Setup Storybook with React-native typescript project
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
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
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/
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
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 removingnode_moduels
andyarn.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
now you need to run your native project
yarn ios
Then you are done! 🎉