Introduction

I am writing this article as I found it really hard at the beginning, to find a working sample of a project with react-native, storybook and typescript with the compatibility to run in expo. The project setup was not straight forward as there were many issues with storybook for react-native. Currently in this project I have figured out that storybook works for the ios and android simulators and emulators respectively but does not render the components in the web yet.

While this might be a slight disadvantage, it is not really a problem as the goal is to build a mobile application with react-native.

Setup

I used the simple expo setup to start a basic typescript project. The simple project setup I used was from here. This project also follows the atomic design pattern. Although it might be irrelevant this design pattern suits well for large react native projects. Then I also used the basic storybook setup and ran it in the root of the project from the documentation here.

Now create a src folder in which you can create the components, atoms and then inside it a Button Component. You can copy paste the below code in Button.tsx, index.ts and style.ts as follows.

You can similarly create another simple Text component for using the text inside the button. You can use the code below in the Text folder inside the atoms folder.

Now simply change the addons.js, index.js and rn-addons.js extensions into addons.ts, index.tsx, rn-addons.ts respectively.

Now inside the stories folder, delete all the components those are pre-generated and paste the below Button Story code. Then you can run view the component in the ios simulator/android emulator which can be run using expo.

Then import the storybook folder as a component in the App.tsx and then run the project with the following commands in two terminals in the same order.

  1. npm run storybook
  2. npm start

Now you should be able to see the storybook UI as follows:

You can find the fully working project in the git repository here.

Written by : Suprith Reddy

I am a serial tech entrepreneur. I believe entrepreneurship is my purpose and technology is my passion. I am naturally business savvy and my expertise is building digital products from scratch and scaling them to create impact. I give talks about technology, business and entrepreneurship.

Subscribe To My Newsletter

BE NOTIFIED ABOUT NEW ARTICLES OR EVENTS OR SESSIONS

Thank you for your message. It has been sent.
There was an error trying to send your message. Please try again later.

You can get access to content with other group of entrepreneurs and startup folks.