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' }}>
    <Card>
      <Card.Content>
        <Title>Do you like this exercice?</Title>
        <Paragraph>
          Component Driven Developement makes me feel happy because it's easy to
          debug
        </Paragraph>
      </Card.Content>
      <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
    </Card>
  </View>
));
  • import your file in the stories index. In the Web it's automatic BUT in react-native you need to add components by hand.
//storybook/stories/index.js

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