How to use React Native Web with Storybook v7 beta

12.02.2023 — react native web, react native, storybook, guide — 1 min read

You may have heard that Storybook is getting close to a v7 release. If you're using addon-react-native-web you might be wondering how to try out the beta. In this quick guide I will show you how to setup a new project and add @storybook/addon-react-native-web Storybook to the project. This enables you to use the web Storybook with your react native components.

If you already have this setup in an existing project it should be pretty straight forward to get updated. Change the version of @storybook/addon-react-native-web to next and update all your other relevant storybook dependencies to the latest v7 beta version (you can use next here too). Then you should check this migration guide to see if you need to update anything to get your project ready for v7.

To setup a fresh new project you can follow this guide:

First I'll generate a project.

1yarn create expo-app

Next I'll open up the project and in the root of the project run

1npx sb@next init --type react

After its done add @storybook/addon-react-native-web@next and the dependencies for it.

1yarn add --dev react-dom react-native-web babel-plugin-react-native-web @storybook/addon-react-native-web@next

Add the addon to .storybook/main.js as follows:

1const config = {
2  /* existing config */
3  addons: [/*existing addons,*/ "@storybook/addon-react-native-web"],
4  /* more config here */
5};
6export default config;

If you're familiar with the Storybook config you'll notice there are some slight differences in the main.js file. One cool new feature is that you can now get benefits of autocomplete even if you aren't using typescript for your config files. This change comes from the comment above the config object that looks like this

1/** @type { import('@storybook/react-webpack5').StorybookConfig } */
2const config = {

Now that the setup is done, let's add a React Native component and a story in the stories folder.

You may want to delete the ReactJS example components. To do that delete everything inside of the stories folder.

1rm -rf stories/*

Then in that folder you can add this example button component.

Inside stories/ create Button.jsx

1// stories/Button.jsx
2import React from "react";
3import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
4
5const styles = StyleSheet.create({
6  button: {
7    paddingVertical: 8,
8    paddingHorizontal: 16,
9    borderRadius: 4,
10    alignSelf: "flex-start",
11    flexGrow: 0,
12    backgroundColor: "purple",
13  },
14  buttonText: {
15    color: "white",
16    fontSize: 16,
17    fontWeight: "bold",
18  },
19  buttonContainer: {
20    alignItems: "flex-start",
21    flex: 1,
22  },
23});
24
25export const Button = ({ text, onPress, color, textColor }) => (
26  <View style={styles.buttonContainer}>
27    <TouchableOpacity
28      style={[styles.button, !!color && { backgroundColor: color }]}
29      onPress={onPress}
30      activeOpacity={0.8}
31    >
32      <Text style={[styles.buttonText, !!textColor && { color: textColor }]}>
33        {text}
34      </Text>
35    </TouchableOpacity>
36  </View>
37);

Now add the files Button.stories.jsx in the stories folder with this content:

1// stories/Button.stories.jsx
2import { Button } from "./Button";
3
4export default {
5  component: Button,
6};
7
8export const Basic = {
9  args: {
10    text: "Hello World",
11    color: "purple",
12  },
13};

One of the really cool updates in V7 is the introduction of CSF3 which you can see above. There is now much less boilerplate needed to write a story!

At this point all thats left to do is run yarn storybook and get to work building your components!

Thanks for reading.

Follow me on twitter @Danny_H_W