Skip to content

Releases: storybookjs/react-native

v10.1.0

27 Nov 12:55

Choose a tag to compare

What's Changed

  • chore(deps): bump node-forge from 1.3.1 to 1.3.2 by @dependabot[bot] in #814
  • updates to latest versions of storybook apis

Full Changelog: v10.0.7...v10.1.0

v10.1.0-beta.5

25 Nov 21:45

Choose a tag to compare

v10.1.0-beta.5 Pre-release
Pre-release

updates storybook versions for 10.1

Full Changelog: v10.0.7...v10.1.0-beta.5

v10.0.7

12 Nov 20:40

Choose a tag to compare

  • updates storybook dependencies

Full Changelog: v10.0.6...v10.0.7

v10.0.2

06 Nov 21:45

Choose a tag to compare

What's Changed

  • fix: adjust lite ui animations and keyboard handling by @dannyhw in #809
  • fix: uses a custom slider for platforms that don't support the native slider, uses portal when modal isn't supported like for macos

Full Changelog: v10.0.1...v10.0.2

v10.0.1

04 Nov 20:27

Choose a tag to compare

What's Changed

  • fix: update deps and remove unused ones by @dannyhw in #807

Full Changelog: v10.0.0...v10.0.1

v10.0.1-alpha.0

29 Oct 13:47

Choose a tag to compare

v10.0.1-alpha.0 Pre-release
Pre-release

removes unused dependencies and updates others

Full Changelog: v10.0.0...v10.0.1-alpha.0

v10.0.0

28 Oct 16:04

Choose a tag to compare

What's Changed

  • v10 by @dannyhw in #786
  • fix: for lite ui remove references to safearea and use safearea context instead as a direct dependency by @dannyhw in #806
  • chore(deps-dev): bump vite from 7.1.5 to 7.1.11 by @dependabot[bot] in #804

Mostly supporting the esm only build from storybook 10 and updating dependencies, however we also have some breaking changes to the withStorybook metro wrapper and some fixes to the lite-ui.

Breaking changes

For full migration documentation:
https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-9-to-10

  • lite-ui now depends on react-native-safe-area-context since its basically impossible to avoid with safeareview being deprecated
  • The withStorybook metro wrapper has been significantly simplified in v10. see below for full explanation

withStorybook changes

  1. Import path unified - In v9, withStorybookConfig (from metro/withStorybookConfig) was a preview of the simplified API. In v10, this is now the standard behavior when importing withStorybook from metro/withStorybook
  2. onDisabledRemoveStorybook is removed - When enabled: false, Storybook is automatically removed from the bundle (no separate flag needed)
  3. Simpler defaults - Works out of the box with sensible defaults

Before (v9):

When using withStorybook with the old API:

const withStorybook = require('@storybook/react-native/metro/withStorybook');

module.exports = withStorybook(defaultConfig, {
  enabled: process.env.STORYBOOK_ENABLED === 'true',
  onDisabledRemoveStorybook: true, // This option no longer exists in v10
});

After (v10):

const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

// Basic usage - works out of the box with defaults
module.exports = withStorybook(defaultConfig);

// Or with options
module.exports = withStorybook(defaultConfig, {
  // When false, automatically removes Storybook from bundle
  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
});

The updated config will automatically stub out the rnstorybook config folder when enabled is set to false as well as the storybook packages.
This makes it so that you don't need to wrap your imports of storybook with conditionals to avoid crashing the app.

for example:

Before (v9):

// App.tsx
let AppEntryPoint = App;

if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true') {
  // Conditional import to avoid bundling Storybook in production
  AppEntryPoint = require('./.rnstorybook').default;
}

export default AppEntryPoint;

After (v10):
could now just be imported in a more natural way like this:

import StorybookUI from './.rnstorybook';

const isStorybook = process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true';

export default function App() {
  return isStorybook ? <StorybookUI /> : <AppComponent />;
}

Full Changelog: v9.1.4...v10.0.0

v10.0.0-rc.1

24 Oct 16:46

Choose a tag to compare

v10.0.0-rc.1 Pre-release
Pre-release

We're now preparing for the release of v10 and in this RC we have most if not all of the changes ready

Version 10 brings Storybook React Native in sync with Storybook core v10 and introduces improved Metro configuration.

Update your metro config

The withStorybook metro wrapper has been significantly simplified in v10. The key changes are:

  1. Import path unified - In v9, withStorybookConfig (from metro/withStorybookConfig) was a preview of the simplified API. In v10, this is now the standard behavior when importing withStorybook from metro/withStorybook
  2. onDisabledRemoveStorybook is removed - When enabled: false, Storybook is automatically removed from the bundle (no separate flag needed)
  3. Simpler defaults - Works out of the box with sensible defaults

Before (v9):

When using withStorybook with the old API:

const withStorybook = require('@storybook/react-native/metro/withStorybook');

module.exports = withStorybook(defaultConfig, {
  enabled: process.env.STORYBOOK_ENABLED === 'true',
  onDisabledRemoveStorybook: true, // This option no longer exists in v10
});

After (v10):

const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

// Basic usage - works out of the box with defaults
module.exports = withStorybook(defaultConfig);

// Or with options
module.exports = withStorybook(defaultConfig, {
  // When false, automatically removes Storybook from bundle
  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
});

The updated config will automatically stub out the rnstorybook config folder when enabled is set to false as well as the storybook packages.
This makes it so that you don't need to wrap your imports of storybook with conditionals to avoid crashing the app.

for example:

// App.tsx
let AppEntryPoint = App;

if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true') {
  // Conditional import to avoid bundling Storybook in production
  AppEntryPoint = require('./.rnstorybook').default;
}

export default AppEntryPoint;

could now just be imported in a more natural way like this:

import StorybookUI from './.rnstorybook';

const isStorybook = process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true';

export default function App() {
  return isStorybook ? <StorybookUI /> : <AppComponent />;
}

v10.0.0-beta.9

02 Oct 17:10

Choose a tag to compare

v10.0.0-beta.9 Pre-release
Pre-release

feat: update dependencies to beta-9

Full Changelog: v10.0.0-beta.8...v10.0.0-beta.9

v10.0.0-beta.8

30 Sep 14:51

Choose a tag to compare

v10.0.0-beta.8 Pre-release
Pre-release

What's Changed

Full Changelog: v10.0.0-beta.5...v10.0.0-beta.8