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.