Setup Storybook with React-native typescript project

Storybook server with react native!

in this article I use dooboo-cli (expo base) which is just a boilerplate project helping you to setup a minimum but viable react-native-typescript(with navigation and eslint setup) project super easy!

also uses storybook v 5.2.1 with ios simulator

1. setup storybook

install storybook to your project by following this automatic guide here.

npx -p @storybook/cli sb init --type react_native

type yes to the question of installing Storybook server while installing ( this is optional but recommended )

then you have to setup the project to start with storybook.

edit your starting point as following

// App.tsx
import App from './src/App';
export default App;

to

// App.tsx
const STORYBOOK_START = true;
export default STORYBOOK_START
? require('./storybook').default
: require('./src/App').default;

you can turn on/off by editing STORYBOOK_START variable here

now check if the App starts well

yarn ios

storybook entry!

2. Setup typescript for storybook

by following this

yarn add -D @types/storybook__react

if you are not using dooboo-cli you might need to add more dependencies from the link above

and add below to tsconfig.json

"rootDirs": ["src", "stories"]

so now that typescript can be applied well to the files onstories folder as well as src folder

below is the full codes in tsconfig.json

tsconfig.json of dooboo-cli

note that this is using the tsconfig.json from dooboo-cli, if you are using your own boilerplate then it might be very different from this one above

Now it is time to add some typescript file to your storybook folder and import it to test!

add a tsExample.tsx file at storybook/stories/

tsExample.tsx

add a line of code to import tsExample at storybook/stories/index.js

import './tsExample';
...

your folder structure might look like this

See if it is workin well

Typescript works!

3. use Storybook Server for web integration (optional)

replace StoryboiokUIRoot variable in storybook/index.js as below

const StorybookUIRoot = getStorybookUI({ port: 7007, host: 'localhost' });

make sure your codes in package.json include this below

{ ...
  "scripts" : {
    ...
    "storybook": "start-storybook -p 7007",
  }
}

also install babel-loader if it hasn’t been installed

and then run below

yarn storybook

💡I had encountered dependency errors with babel ‘s plugins and I was able to solve it by removing node_moduels and yarn.lock files. and then reinstall dependencies all with runningyarn . try this if you have same errors with mine!

Also it sometimes asks you that ‘the port 7007 is not available’, even when the port is actually available!, then just type y (yes) and you can continue. I assume this is a bug on current version of storybook, let me know if you encounter same bug!

make sure you have the below screen has been created from your browser

Yay! but not completed yet!

now you need to run your native project

yarn ios

Yay!

Then you are done! 🎉