How to swap between React Native Storybook and your app
— storybook, react native, how to, guide — 2 min read
EDIT: I have recently updated this guide to show a few different approaches I will update further if I find better solutions
Storybook in react native is a component that you can slot into your app and isn't its own separate runtime which you might be used to on the web.
If you want to run storybook in the same environment as your app we're going to need a simple way to switch between them.
To access an environment variable with expo we can follow their documentation here. If you aren't using expo I recommend following this guide instead.
Note: This guide assumes you have an expo application setup for storybook (see the github readme for info on how to get setup).
Using Expo constants
First rename app.json to app.config.js and edit the file so it looks something like this:
1module.exports = {2 name: "my-app",3 slug: "my-app",4 version: "1.0.0",5 orientation: "portrait",6 ...7};
Now add the extra
config option like this
1module.exports = {2 name: 'MyApp',3 version: '1.0.0',4 extra: {5 storybookEnabled: process.env.STORYBOOK_ENABLED,6 },7 ...8};
Now we can access the storybookEnabled variable from our app using expo constants like this:
1import Constants from "expo-constants";2const apiUrl = Constants.expoConfig.extra.storybookEnabled;
Earlier I said to comment out the app function in the App.js file and this where we go back and fix that.
Edit App.js so that it looks like this:
1import { StatusBar } from "expo-status-bar";2import { StyleSheet, Text, View } from "react-native";3import Constants from "expo-constants";4
5function App() {6 return (7 <View style={styles.container}>8 <Text>Open up App.js to start working on your app!</Text>9 <StatusBar style="auto" />10 </View>11 );12}13
14let AppEntryPoint = App;15
16if (Constants.expoConfig.extra.storybookEnabled === "true") {17 AppEntryPoint = require("./.storybook").default;18}19
20const styles = StyleSheet.create({21 container: {22 flex: 1,23 backgroundColor: "#fff",24 alignItems: "center",25 justifyContent: "center",26 },27});28
29export default AppEntryPoint;
Now in package.json we can add a script like this
1"scripts": {2 "storybook": "STORYBOOK_ENABLED='true' expo start",3}
We've added a new command that will run our app with the STORYBOOK_ENABLED flag set to true.
When you run yarn start
you should see the app code and yarn storybook
should show you storybook.
Using entryPoint (expo go <48 only)
This solution won't work in v48 of expo or with expo dev clients.
First we want to rename our app.json to app.config.js and edit the file so it looks something like this:
1module.exports = {2 name: "my-app",3 slug: "my-app",4 version: "1.0.0",5 orientation: "portrait",6 ...7};
Add the entryPoint
config option like this
1module.exports = {2 name: 'MyApp',3 version: '1.0.0',4 entryPoint: process.env.STORYBOOK_ENABLED5 ? "index.storybook.js"6 : "node_modules/expo/AppEntry.js",7 ...8};
Add a file called index.storybook.js in the root of the project with the following content
1import { registerRootComponent } from "expo";2
3import Storybook from "./.storybook";4
5// registerRootComponent calls AppRegistry.registerComponent('main', () => App);6// It also ensures that whether you load the app in Expo Go or in a native build,7// the environment is set up appropriately8registerRootComponent(Storybook);
Now in package.json we can add a script like this
1"scripts": {2 "storybook": "STORYBOOK_ENABLED='true' expo start",3}
Which will run our app with the STORYBOOK_ENABLED flag set to true.
Now when you run yarn start
you should see the app and yarn storybook
should show you storybook.
You can pass the option --ios
or --android
to have the simulator autmatically open up otherwise press i
or a
after the command finishes running to open the simulator.
Summary
As you can see there are multiple potential approaches here and I've tried to offer some possible solutions. Each of these have some potential drawbacks but you should assess your projects needs to see what fits for you.
If you are using Expo Go on version 47 or below the entryPoint might be an interesting option for you but it will be removed in 48. The version using expo constants has the possibility increase your bundle size however will work in expo 48.
Heres some comments from Evan Bacon about the entryPoint field:
Other possible approaches include using env variables in metro config to change the project root or using storybook as a separate app outside of your project. You could also manually alternate the main
field of the package.json
between two different entry point paths (similar to the entryPoint option).
As I find better solutions I will add to this post to showcase the best options.
Thanks for reading.
You can follow me on twitter here: https://twitter.com/Danny_H_W