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:

// 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 />;
}

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