Design System in React Native with Storybook

Storybook Logo

📡 What you will learn

  • Debug your application with isolated components
  • Writing .stories files to have all component variations in one place

👾 Before we start the exercise

👨‍🚀 Exercise 4

  • Setup StoryBook
npx sb@next init --type react_native
? Do you want to install dependencies necessary to run Storybook server?
// answer Yes

🔭 Read the prompt, the setup is NOT 100% automated.

We are going to change the entrypoint of our application.

───> Launch the app ─────> Open Storybook if true
                      └──> Open our Screens
                          └── screens
                                 ├── LoginScreen.tsx
                                 ├── TermsScreen.tsx
                                 └── StarshipFeedScreen.tsx

Change App.tsx for Storybook in React Native

  • Change the entrypoint of your application
// App.tsx
import StorybookUIRoot from './storybook';

const App = () => {
  // ...
}

// 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;
// eslint-disable-next-line import/no-default-export
export default UI;
  • Check if everything is working
  • Create a new file /storybook/stories/Text.stories.tsx
import React from 'react';
import { View } from 'react-native';
import { Text } from 'react-native-paper';

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

storiesOf('Text', module).add('default', () => (
  <View style={{ flex: 1 }}>
    <Text variant="displayLarge">Display Large</Text>
    <Text variant="displayMedium">Display Medium</Text>
    <Text variant="displaySmall">Display small</Text>

    <Text variant="headlineLarge">Headline Large</Text>
    <Text variant="headlineMedium">Headline Medium</Text>
    <Text variant="headlineSmall">Headline Small</Text>

    <Text variant="titleLarge">Title Large</Text>
    <Text variant="titleMedium">Title Medium</Text>
    <Text variant="titleSmall">Title Small</Text>

    <Text variant="bodyLarge">Body Large</Text>
    <Text variant="bodyMedium">Body Medium</Text>
    <Text variant="bodySmall">Body Small</Text>
  </View>
));
  • Import your file in the stories index.js.

With Storybook web, importing *.stories.tsx files is automatic BUT in react-native you need to add each new components by hand.

//storybook/stories/index.js

import './Text.stories';
  • Run your app and try if it's working
  • Create a new Button.stories.tsx and add all types of buttons when mode is 'text' | 'outlined' | 'contained'
  • Create a new Card.stories.tsx

👽 Bonus

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