# check config in package.json
# searchDir & pattern
# write *.tsx(component) & *.stories.js
yarn storybook
- storybook
- react-native-storybook-loader
- A CLI for dynamically importing stories into Storybook for React Native.
-
Setup react-native
-
use the following template
npx react-native init components --template react-native-template-typescript
-
execute pod-install
npx pod-install
-
Remove deprecated prettier settings
-
-
Install storybook
-
npx -p @storybook/cli sb init --type react_native
-
Install react-native-storybook-loader
yarn add -D react-native-storybook-loader
-
Write script in
package.json
# in package.json "scripts": { "prestorybook": "rnstl" }
-
Write
loadStories()
func in./storybook/index.js
// import stories configure(() => { // This function is created in the `storyLoader.js` that appears when `prestorybook` is executed. loadStories(); }, module);
-
-
Run storybook
yarn storybook # run prestorybook and storybook yarn <platform> # platform = ios | andriod
-
Generate Component with storybook
- Write code in
src/components/**
- Write code in