React Native Ecosystem

What you will learn

  • Debug your application in real life scenarios

👨‍🚀 Exercise 4

  • Setup StoryBook

You can have a look at the storybook-for-react-native documentation if you need.

npx -p @storybook/cli sb init --type react_native
? Do you want to install dependencies necessary to run Storybook server? // answer Yes
yarn add -D @types/storybook__react

We are going to change our entrypoint of our application

───> Launch the app ─────> Open StoryBook if true
                      └──> Open our Screens
                          └── screens
                                 ├── LoginScreen.tsx
                                 ├── TermsScreen.tsx
                                 └── StarshipFeedScreen.tsx
  • Create a new <RootScreen.tsx /> component and copy paste your content from App.tsx

  • Change the entrypoint of your application

// App.tsx
import { RootScreen as App } from './src/Screens/RootScreen';
import StorybookUIRoot from './storybook';

// Should we show storybook instead of our app?
// ⚠️ Leave this as `false` when checking into git.
const SHOW_STORYBOOK = true;

const UI = SHOW_STORYBOOK && __DEV__ ? StorybookUIRoot : App;
export default UI;
  • Check if everything is working
  • Create a new file /storybook/stories/Card.story.tsx
import React from 'react';
import { View } from 'react-native';
import { Button, Card, Title, Paragraph } from 'react-native-paper';

import { storiesOf } from '@storybook/react-native';

storiesOf('Card', module).add('default', () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Title>Do you like this exercice?</Title>
          Component Driven Developement makes me feel happy because it's easy to
      <Card.Cover source={{ uri: '' }} />
  • import your file in the stories index. In the Web it's automatic BUT in react-native you need to add components by hand.

import './Card.story.tsx';
  • Run your app and try if it's working
  • Create a new Button.story.tsx and add all types of buttons
  • Create a new Text.story.tsx and add all types of Text

👽 Bonus

Hint: you can create your own script on package.json to update automatically StoryLoader on each launch like this

  "scripts": {
    "start:storybook": "yarn storybook:update && expo start --clear",
    "storybook:update": "rnstl --searchDir ./src --pattern '**/*.story.tsx' --outputFile ./storybook/StoryLoader.ts",

  • Create *.story.tsx files for all your components
  • Update Card.story.tsx to add your mocked datas.ts from the api