Skip to main content
This guide will help you migrate from Storybook React Native version 8 to version 9.

​
Migration Steps

1
Update Storybook dependencies to 9.x
2
You need to update all Storybook dependencies to version 9.x. This includes:
3
  • storybook package
  • @storybook/addon-ondevice-* packages
    • 4
    You can check the correct version by looking at the peerDependencies. Please refer to the core Storybook migration guide for more details on the breaking changes of this package.
    5
    Update your .storybook folder
    6
    For better compatibility with projects that includes both Storybook and Storybook React Native, the default configuration folder for Storybook React Native has been renamed from .storybook/ to .rnstorybook/.
    7
    Rename your .storybook folder to .rnstorybook to avoid conflicts with web Storybook configuration.
    8
    Update any references to .storybook in your codebase:
    9
  • Metro configuration files
  • Import paths in your app
  • Package.json scripts
    • 10
    Regenerate your requires file
    11
    Regenerate your .rnstorybook/storybook.requires.ts file by running:
    12
    yarn storybook-generate

    ​
    What Changed

    The main changes in v9 are:
    1. Configuration folder renamed: .storybook/ → .rnstorybook/
      • This prevents conflicts when running both web and React Native Storybook in the same project
      • You may need to update your metro config configPath option to point to .rnstorybook
    2. Storybook core updated to v9: The core storybook package has been updated to version 9
    3. Addon packages updated: All @storybook/addon-ondevice-* packages need to be updated to v9

    ​
    Example Configuration Updates

    If you have a metro config that references the Storybook config path, update it: Before: 
    const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

module.exports = withStorybook(defaultConfig, {
  enabled: true,
  configPath: path.resolve(__dirname, './.storybook'), // Old path
});
    After: 
    const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

module.exports = withStorybook(defaultConfig, {
  enabled: true,
  configPath: path.resolve(__dirname, './.rnstorybook'), // New path
});
    Update your app entry point if needed: Before: 
    import StorybookUI from './.storybook';
    After: 
    import StorybookUI from './.rnstorybook';

    Build docs developers (and LLMs) love

    Get started for freeTalk to us