AgentToolHub
Skill

upgrading-react-native-storybook

upgrading-react-native-storybook — a Claude Code skill from storybookjs/react-native

Features

  • ✓Component-based development for React Native
  • ✓Enhanced debugging with live UI previews
  • ✓Customizable UI with addons
  • ✓Efficiently manage stories and components
  • ✓Quick setup for new or existing projects
  • ✓Visit GitHub for more tools and updates

Installation Guide

New project

There is some project boilerplate with @storybook/react-native and @storybook/addons-react-native-web both already configured with a simple example.

For expo you can use this template with the following command

sh
# With NPM
npx create-expo-app --template expo-template-storybook AwesomeStorybook

# With Yarn
yarn create expo-app --template expo-template-storybook AwesomeStorybook

# With pnpm
pnpm create expo-app --template expo-template-storybook AwesomeStorybook

For react native cli you can use this template

sh
npx react-native init MyApp --template react-native-template-storybook

Existing project

Run init to setup your project with all the dependencies and configuration files:

sh
npx sb@latest init --type react_native

The only thing left to do is return Storybook's UI in your app entry point (such as App.js) like this:

jsx
export { default } from './.storybook';

If you want to be able to swap easily between storybook and your app, have a look at this blog post

If you want to add everything yourself check out the the manual guide here.

Additional steps: Update your metro config

We use the sbmodern resolver field in order to resolve the modern version of storybook packages. Doing this removes the polyfills that ship in commonjs modules and fixes multiple long standing issues such as the promises never resolving bug and more (caused by corejs promises polyfill).

Expo

First create metro config file if you don't have it yet.

sh
npx expo customize metro.config.js

Then add sbmodern to the start of the resolver.resolverMainFields list.

diff
// metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

--module.exports = getDefaultConfig(__dirname);
++const defaultConfig = getDefaultConfig(__dirname);

++defaultConfig.resolver.resolverMainFields.unshift('sbmodern');

++module.exports = defaultConfig;

React native

js
module.exports = {
  /* existing config */
  resolver: {
    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
  },
};

Reviews