DEV Community

How to use React Native Web with Storybook v7 beta

Danny on February 16, 2023

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 th...

Read full post

spotnick • May 8 '23

Thanks for the tutorial! Do you have an idea why it isnt working with TypeScript? I receive the following error:

Thanks :)

Danny • May 10 '23

Hey, this does work with typescript. That looks like a bundling problem, what version of storybook are you using?

spotnick • May 11 '23

Thanks for your help @dannyhw. I am using Storybook 7.0.9 and did everything exactly like you mentioned it in your tutorial. I just tried the same with just .js components to eliminate if it was an error related to typescript but I get the same above message with .js stories and components. Do you have any ideas? :)

Danny • May 11 '23

You might be missing some babel config. In v7 storybook uses the projects babel configuration.

I’ll run through this later today and see if this needs updating.

spotnick • May 11 '23

Hm that sounds valid. My current babel config is pretty simple..

module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: ['nativewind/babel'], }; };

can you maybe post yours? :)

spotnick • May 11 '23

Ok after following this guide storybook.js.org/docs/react/config... to configure babel for storybook 7 its working now! Thank you for your help! :)

Ben Winters • May 2 '23

This looks great. In my case, it wasn't so simple because I don't use Expo, but I was able to get the v7 @storybook/addon-react-native-web working by configuring webpack within the Storybook main.ts file. I've shared a more detailed explanation and the code here.

Danny • May 2 '23 • Edited

Hey Ben thanks for sharing.

A few things I wanted to point out.

Using expo or not shouldn't be a factor since the webpack config does not require expo.
aliases for things like ../../Utilities/Platform and other react native files isn't necessary assuming you have modules-to-transpile setup with all the packages that ship untranspiled.

Cristian Florez • May 24 '23 • Edited

Thanks for this tutorial, Im trying to follow the tutorial for an existing project... Im getting the following error when I run the command yarn storybook:

This is my main.js configuration:

and my SB dependencies:

Chris Honeysett • Jan 25

I was running into the exact same issue when upgrading my project to use Storybook v7. When I commented out both addon-ondevice-controls and addon-ondevice-actions everything started working.

module.exports = {
  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: [
    '@storybook/addon-react-native-web',
    // '@storybook/addon-ondevice-controls',
    // '@storybook/addon-ondevice-actions',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
}

Danny • Jan 28 • Edited

Those addons cannot be used together, you should have separate config folders for react native storybook and react-native-web storybook.

In the starter projects I do this by having a .ondevice folder for the react native config.

Also for v7 you need to use 7.6.10-rc.0 which was just released today.

If you want to try it I recommend using the template project like this

For expo:
npx create-expo-app --template expo-template-storybook@next AwesomeStorybook

For rncli:
npx react-native init AwesomeStorybook --template react-native-template-storybook@next