React Native Web addon for Storybook

https://github.com/storybookjs/addon-react-native-web
Admin
This addon configures Storybook for React to display React Native projects using React Native for...
Tokens:24,359
Snippets:349
Trust Score:9.7
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start the Storybook development server

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/CONTRIBUTING.md

Run this command to start the Storybook instance for the example project.

```bash
yarn storybook
```

--------------------------------

### Install project dependencies

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/CONTRIBUTING.md

Run this command to install all necessary dependencies for the project.

```bash
yarn install
```

--------------------------------

### Example Preset Configuration

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

A complete example of a presets configuration array.

```typescript
presets: [
  [
    'module:@react-native/babel-preset',
    { useTransformReactJSXExperimental: true }
  ],
  [
    '@babel/preset-react',
    {
      runtime: 'automatic',
      jsxImportSource: 'nativewind'
    }
  ],
  'nativewind/babel'
]
```

--------------------------------

### Install React Navigation Dependencies

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Install necessary navigation packages as development dependencies.

```bash
yarn add react-navigation react-native-screens react-native-safe-area-context --dev
```

--------------------------------

### Install Native Base

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Install Native Base and the required vector icons dependency.

```bash
yarn add native-base react-native-vector-icons --dev
```

--------------------------------

### Install Babel Presets

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Install the required Babel preset to resolve missing preset errors.

```bash
yarn add --dev @react-native/babel-preset
# OR
yarn add --dev metro-react-native-babel-preset
```

--------------------------------

### Initialize and Install Dependencies

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/README.md

Run these commands in the project root to initialize Storybook and install the necessary React Native Web dependencies.

```sh
npx sb init --type react
yarn add react-dom react-native-web babel-plugin-react-native-web @storybook/addon-react-native-web @react-native/babel-preset --dev
```

--------------------------------

### Install NativeWind Dependencies

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Install the required packages for NativeWind and CSS interop support.

```bash
yarn add nativewind react-native-css-interop react-native-reanimated --dev
```

--------------------------------

### Install Core Dependencies

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Install the required development dependencies for React Native Web and the Storybook addon.

```bash
yarn add react-dom react-native-web babel-plugin-react-native-web @storybook/addon-react-native-web @react-native/babel-preset --dev
```

```bash
npm install --save-dev react-dom react-native-web babel-plugin-react-native-web @storybook/addon-react-native-web @react-native/babel-preset
```

--------------------------------

### Verify installation and dependencies

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Check for the presence of the addon and required peer dependencies.

```bash
# Check addon is installed
yarn list @storybook/addon-react-native-web

# Check peer dependencies
yarn list react
yarn list react-dom
yarn list @react-native/babel-preset # or metro-react-native-babel-preset
```

--------------------------------

### Install Node Polyfill Plugin

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Install the webpack plugin required for Node.js polyfills.

```bash
yarn add --dev node-polyfill-webpack-plugin
```

--------------------------------

### Basic Configuration Pattern

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/types.md

A minimal configuration example for transpiling specific modules.

```typescript
const options: Options = {
  modulesToTranspile: ['react-native-reanimated'],
};
```

--------------------------------

### Install react-native-web

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Ensure react-native-web is installed as a dev dependency to support component rendering.

```bash
yarn add --dev react-native-web
```

```bash
yarn list react-native-web
```

--------------------------------

### Install SVG and Asset Loaders

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Install the necessary Webpack loaders to support SVG and static asset imports.

```bash
yarn add --dev @svgr/webpack url-loader
```

--------------------------------

### Install Expo Linear Gradient

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Add the expo-linear-gradient package as a development dependency.

```bash
yarn add expo-linear-gradient --dev
```

--------------------------------

### Environment Variable Example Values

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Illustrates the expected values for environment variables in development and production modes.

```javascript
// In development
process.env.NODE_ENV === 'development'
__DEV__ === true

// In production
process.env.NODE_ENV === 'production'
__DEV__ === false
```

--------------------------------

### Configure Native Base UI

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Install dependencies and configure vector icons transpilation in .storybook/main.js.

```bash
yarn add native-base react-native-vector-icons --dev
```

```javascript
// .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-vector-icons'],
      },
    },
  ],
};
```

--------------------------------

### Install TypeScript Definitions

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Install necessary type packages for React Native and other dependencies.

```bash
# For React Native
yarn add --dev @types/react-native

# For specific packages
yarn add --dev @types/package-name
```

--------------------------------

### Install React Native Babel presets

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Install required Babel presets as dev dependencies to resolve preset-not-found errors.

```bash
# Recommended (newer)
yarn add --dev @react-native/babel-preset

# OR (fallback, legacy)
yarn add --dev metro-react-native-babel-preset
```

```bash
yarn list @react-native/babel-preset
yarn list metro-react-native-babel-preset
```

--------------------------------

### Install Reanimated Dependencies

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Required development dependencies for enabling Reanimated support.

```bash
yarn add react-native-reanimated @babel/plugin-proposal-export-namespace-from --dev
```

--------------------------------

### Install React Native Paper dependencies

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Install the necessary packages for React Native Paper and vector icons.

```bash
yarn add react-native-paper react-native-vector-icons --dev
```

--------------------------------

### Check package installation status

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Verifies if a package is installed by attempting to resolve its package.json file.

```typescript
const isInstalled = (name: string) => {
  try {
    require(`${name}/package.json`);
    return true;
  } catch (er) {
    return false;
  }
};
```

--------------------------------

### Configure Addon in Monorepo

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Setup the addon in main.js to handle transpilation and aliasing for shared packages.

```javascript
// packages/app/.storybook/main.js
const path = require('path');

module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        projectRoot: path.resolve(__dirname, '..'),
        modulesToTranspile: [
          '@mycompany/shared-ui',
          'react-native-reanimated',
        ],
        modulesToAlias: {
          '@mycompany/shared-ui': '@mycompany/shared-ui/web',
        },
      },
    },
  ],
};
```

--------------------------------

### Monorepo Directory Structure

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Example layout for a monorepo containing an app and shared UI components.

```text
monorepo/
  packages/
    app/
      .storybook/
        main.js
      src/
        components/
          Button.tsx
    shared-ui/
      src/
        components/
          Icon.tsx
```

--------------------------------

### isInstalled(name)

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Checks if a specific package is installed in the environment.

```APIDOC
## isInstalled(name)

### Description
Checks if a package is installed by attempting to load its package.json file.

### Parameters
- **name** (string) - Required - The name of the package to check.

### Returns
- `boolean`: Returns true if the package is installed, false otherwise.
```

--------------------------------

### Install React Native Reanimated dependencies

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Install the required Reanimated package and the necessary Babel plugin as development dependencies.

```bash
yarn add react-native-reanimated --dev
yarn add @babel/plugin-proposal-export-namespace-from --dev
```

--------------------------------

### Configure NativeWind

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Install dependencies and apply comprehensive Babel and transpilation settings in .storybook/main.js.

```bash
yarn add nativewind react-native-css-interop react-native-reanimated --dev
```

```javascript
// .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: [
          'react-native-reanimated',
          'nativewind',
          'react-native-css-interop',
        ],
        babelPresetReactOptions: { jsxImportSource: 'nativewind' },
        babelPresets: ['nativewind/babel'],
        babelPlugins: [
          '@babel/plugin-proposal-export-namespace-from',
          'react-native-reanimated/plugin',
          [
            '@babel/plugin-transform-react-jsx',
            {
              runtime: 'automatic',
              importSource: 'nativewind',
            },
          ],
        ],
      },
    },
  ],
};
```

--------------------------------

### Install React Native Gesture Handler

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Add the react-native-gesture-handler dependency to your project.

```bash
yarn add react-native-gesture-handler --dev
```

--------------------------------

### Check package versions

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Verify installed versions of core dependencies to identify conflicts.

```bash
yarn list react
yarn list @babel/preset-react
yarn list @storybook/react
```

--------------------------------

### Install react-native-web dependency

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Run this command to resolve 'Cannot find module' errors by ensuring the required package is present in your project.

```bash
yarn add react-native-web --dev
```

--------------------------------

### Configure and verify Babel plugins

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Validate plugin names and installation status to resolve Babel plugin errors.

```javascript
babelPlugins: [
  'react-native-reanimated/plugin', // ✓ Correct
  'reanimated/plugin', // ✗ Wrong
]
```

```bash
yarn list react-native-reanimated

# Or for Babel plugins
yarn list @babel/plugin-proposal-export-namespace-from
```

```bash
yarn add --dev plugin-name
```

--------------------------------

### Vector Icons Configuration Pattern

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/types.md

Configuration example for including react-native-vector-icons.

```typescript
const options: Options = {
  modulesToTranspile: ['react-native-vector-icons'],
};
```

--------------------------------

### Install React Native SVG

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Add the react-native-svg dependency to your project.

```bash
yarn add react-native-svg --dev
```

--------------------------------

### Configure Monorepo Options

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/types.md

Defines the project root, modules for transpilation, and module aliases for monorepo setups.

```typescript
const options: Options = {
  projectRoot: '/path/to/monorepo/packages/my-app',
  modulesToTranspile: ['shared-components', 'react-native-reanimated'],
  modulesToAlias: {
    '@shared/components': 'shared-components/web',
  },
};
```

--------------------------------

### Configure Options Object

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/api-reference.md

Example of defining an options object for the webpack configuration.

```typescript
const options: Options = {
  modulesToTranspile: ['react-native-reanimated', 'react-native-vector-icons'],
  modulesToAlias: {
    'react-native-gesture-handler': 'react-native-gesture-handler/web',
  },
  babelPlugins: [
    'react-native-reanimated/plugin',
    '@babel/plugin-proposal-export-namespace-from',
  ],
  babelPresets: ['nativewind/babel'],
  babelPresetReactOptions: { jsxImportSource: 'nativewind' },
  projectRoot: '/path/to/project',
};
```

--------------------------------

### Configure React Native Paper

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Install dependencies and configure vector icons transpilation in .storybook/main.js.

```bash
yarn add react-native-paper react-native-vector-icons --dev
```

```javascript
// .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-vector-icons'],
      },
    },
  ],
};
```

--------------------------------

### Install React Native Vector Icons

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Add the vector icons package as a development dependency.

```bash
yarn add react-native-vector-icons --dev
```

--------------------------------

### Retrieve Babel Plugins

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/api-reference.md

Examples of using getBabelPlugins to merge user-defined plugins with the default react-native-web plugin.

```typescript
import { getBabelPlugins, Options } from '@storybook/addon-react-native-web/webpack';

const options: Options = {
  babelPlugins: [
    'react-native-reanimated/plugin',
    ['@babel/plugin-transform-runtime', { useESModules: true }],
  ],
};

const plugins = getBabelPlugins(options);
// Result: ['react-native-web', 'react-native-reanimated/plugin', ['@babel/plugin-transform-runtime', { useESModules: true }]]
```

```typescript
import { getBabelPlugins } from '@storybook/addon-react-native-web/webpack';

const options: Options = {};
const plugins = getBabelPlugins(options);
// Result: ['react-native-web']
```

--------------------------------

### Define User-Provided Aliases

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Example configuration for the modulesToAlias option to map specific packages to web variants.

```typescript
modulesToAlias: {
  'react-native-gesture-handler': 'react-native-gesture-handler/web',
  'react-native-svg': 'react-native-svg/web',
  '@company/ui-kit': '@company/ui-kit/web',
}
```

--------------------------------

### Configure nativewind

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/README.md

Comprehensive configuration for nativewind, including storybook main settings, preview imports, metro config, and babel setup.

```js
// .ondevice/main.ts 
// AND/OR .storybook/main.ts

module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: [
          'react-native-reanimated',
          'nativewind',
          'react-native-css-interop',
        ],
        babelPresetReactOptions: { jsxImportSource: 'nativewind' },
        // If you have a bable.config.js file: this can also be placed there, and removed from here
        babelPresets: ['nativewind/babel'],
        babelPlugins: [
          // If you have a bable.config.js file: this can also be placed there, and removed from here
          'react-native-reanimated/plugin',
          // If you have a bable.config.js file: this can also be placed there, and removed from here
           [
            '@babel/plugin-transform-react-jsx',
            {
              runtime: 'automatic',
              importSource: 'nativewind',
            },
           ],
         ],
      },
    },
  ],
};
```

```js
// .ondevice/preview.tsx
// add the following
import '../styles/global.css'
```

```js
// metro.config.js
const path = require("path");
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");
const withStorybook = require("@storybook/react-native/metro/withStorybook");

const defaultConfig = getDefaultConfig(__dirname);

// 👇 important: nativeWindConfig is defined and passed to withStorybook!
// replace this: module.exports = withNativeWind(config, { input: "./global.css" });
// with the below (and update your input):
const nativeWindConfig = withNativeWind(defaultConfig, { input: "./styles/global.css" });

module.exports = withStorybook(nativeWindConfig, {
  // this line helps you switch between app and storybook using variable in package.json script,
  // and changes to your app's main entry point.
  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true",
  configPath: path.resolve(__dirname, "./.ondevice"),
  onDisabledRemoveStorybook: true,
});
```

```js
// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
    plugins: [
      ["babel-plugin-react-docgen-typescript", { exclude: "node_modules" }],
      'react-native-reanimated/plugin',
      [
        '@babel/plugin-transform-react-jsx',
        {
          runtime: 'automatic',
          importSource: 'nativewind',
        },
      ],
    ],
  };
};
```

--------------------------------

### Use React Native Paper components

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Example of importing and using Paper components within a story.

```typescript
import { Button, Card, Text } from 'react-native-paper';

export const PaperCard = () => (
  <Card>
    <Card.Content>
      <Text variant="headlineSmall">Card Title</Text>
      <Button mode="contained">Action</Button>
    </Card.Content>
  </Card>
);
```

--------------------------------

### getRnPreset()

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Dynamically selects the appropriate React Native Babel preset based on installed dependencies.

```APIDOC
## getRnPreset()

### Description
Dynamically selects the appropriate React Native Babel preset based on what is installed in the project.

### Returns
- `string`: Returns 'module:@react-native/babel-preset' if found, or 'module:metro-react-native-babel-preset' if only the metro preset is found.

### Errors
- Throws an error if neither preset is installed.
```

--------------------------------

### Initialize Storybook

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Run this command to initialize Storybook in a React project if it is not already set up.

```bash
npx sb init --type react
```

--------------------------------

### Babel Preset Resolution Logic

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

The addon automatically selects the appropriate React Native Babel preset at build time based on installed dependencies.

```javascript
// Pseudo-code
if (isInstalled('@react-native/babel-preset')) {
  use '@react-native/babel-preset' (preferred)
} else if (isInstalled('metro-react-native-babel-preset')) {
  use 'metro-react-native-babel-preset' (fallback)
} else {
  throw Error('Neither preset found')
}
```

--------------------------------

### Build the Addon

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Compiles the addon for distribution, producing CJS, ESM, and type declaration files.

```bash
yarn build
```

--------------------------------

### Verify addon configuration

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Confirm the addon is registered in the main configuration file.

```bash
# Verify .storybook/main.js exists and has addon registered
cat .storybook/main.js | grep addon-react-native-web
```

--------------------------------

### Build for Production

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Generates a static build of the Storybook instance in the storybook-static/ directory.

```bash
yarn build-storybook
```

--------------------------------

### Clear cache and restart

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Remove build caches and reinstall dependencies to resolve stale state issues.

```bash
# Remove caches
rm -rf node_modules/.cache
rm -rf .storybook/.cache
rm -rf dist

# Reinstall and restart
yarn install
yarn storybook
```

--------------------------------

### Configure Storybook Preview

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Import the global CSS file into .storybook/preview.tsx.

```typescript
import '../global.css';
```

--------------------------------

### Configure NativeWind Preview

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Import global CSS styles in .storybook/preview.tsx.

```typescript
// .storybook/preview.tsx
import '../global.css'; // Import global CSS
```

--------------------------------

### Analyze bundle size

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Generate build statistics to analyze bundle composition.

```bash
yarn build-storybook --stats
```

--------------------------------

### Configure React Preset

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Sets up the React preset with automatic runtime.

```typescript
[
  '@babel/preset-react',
  {
    runtime: 'automatic',
    ...babelPresetReactOptions
  }
]
```

--------------------------------

### Resolve Module with Web Variant

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

Shows how the addon resolves modules that provide a specific web entry point.

```text
import { GestureHandler } from 'react-native-gesture-handler'
    ↓
Check alias: react-native-gesture-handler → react-native-gesture-handler/web
    ↓
Resolve: node_modules/react-native-gesture-handler/web
    ↓
Load: GestureHandler from web entry point
```

--------------------------------

### Configure addon in Storybook main.js

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/api-reference.md

Standard configuration for adding the addon to the Storybook addons array.

```javascript
// In .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-reanimated'],
      },
    },
  ],
};
```

--------------------------------

### Enable debug logging

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Run the build process with verbose Webpack logging enabled.

```bash
NODE_DEBUG=webpack yarn storybook
```

--------------------------------

### Define Babel Plugins

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/types.md

Demonstrates the use of string and tuple formats for specifying Babel plugins with optional configurations.

```typescript
babelPlugins: [
  'react-native-reanimated/plugin',
  '@babel/plugin-proposal-export-namespace-from',
  [
    '@babel/plugin-transform-runtime',
    {
      useESModules: true,
      corejs: 3,
    },
  ],
]
```

--------------------------------

### Complete Advanced Configuration

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/configuration.md

Combines multiple transpilation, aliasing, and Babel settings for complex projects.

```javascript
// .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        // Packages that need transpiling
        modulesToTranspile: [
          'react-native-reanimated',
          'react-native-vector-icons',
          'nativewind',
          'react-native-css-interop',
          '@mycompany/custom-ui',
        ],

        // Module aliases for web variants
        modulesToAlias: {
          'react-native-gesture-handler': 'react-native-gesture-handler/web',
          '@mycompany/custom-ui': '@mycompany/custom-ui/web',
        },

        // Babel plugins
        babelPlugins: [
          '@babel/plugin-proposal-export-namespace-from',
          'react-native-reanimated/plugin',
        ],

        // Additional Babel presets
        babelPresets: ['nativewind/babel'],

        // React preset options
        babelPresetReactOptions: {
          runtime: 'automatic',
          jsxImportSource: 'nativewind',
        },

        // React Native preset options
        babelPresetReactNativeOptions: {
          useTransformReactJSXExperimental: true,
        },

        // Project root for monorepo support
        projectRoot: process.cwd(),
      },
    },
  ],
};
```

--------------------------------

### Define the addon preset entry point

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

The preset.js file exports the webpackFinal function to be consumed by Storybook's preset system.

```javascript
// preset.js (in package root)
const webpackFinal = require('./dist/cjs/webpack');

module.exports = {
  webpackFinal,
};
```

--------------------------------

### Display File Structure

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/README.md

A visual representation of the documentation file hierarchy within the project workspace.

```text
/workspace/home/output/
├── INDEX.md                           (11 KB, 351 lines) - Navigation & quick reference
├── installation-and-setup.md          (9.8 KB, 462 lines) - Getting started
├── api-reference.md                   (7.4 KB, 221 lines) - Function & type APIs
├── types.md                           (5.0 KB, 152 lines) - Type definitions
├── configuration.md                   (9.7 KB, 358 lines) - Configuration options
├── webpack-configuration-details.md   (12 KB, 524 lines) - Internal webpack modifications
├── integration-guide.md               (12 KB, 447 lines) - How addon integrates
├── usage-patterns.md                  (15 KB, 702 lines) - Practical examples
├── library-integration-reference.md   (11 KB, 568 lines) - Per-library setup
├── troubleshooting.md                 (12 KB, 678 lines) - Problem solving
└── README.md                          (this file)
```

--------------------------------

### webpackFinal Preset

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/api-reference.md

Manually importing and using the webpackFinal preset in .storybook/main.js.

```APIDOC
## webpackFinal Preset

### Description
Manually integrate the addon by importing the `webpackFinal` function from the preset and applying it to the Storybook webpack configuration.

### Usage
```javascript
const { webpackFinal } = require('@storybook/addon-react-native-web/preset');

module.exports = {
  webpackFinal: (config) => webpackFinal(config, { /* options */ }),
};
```
```

--------------------------------

### Configure Custom UI Library Alias

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Maps workspace packages to their respective web variants.

```typescript
'@mycompany/components': '@mycompany/components/web'
```

--------------------------------

### Configure Vector Icons

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Steps to register fonts and ensure correct imports for vector icons.

```javascript
// .storybook/main.js
module.exports = {
  staticDirs: [
    'node_modules/react-native-vector-icons/Fonts',
  ],
};
```

```javascript
options: {
  modulesToTranspile: ['react-native-vector-icons'],
}
```

```typescript
// ✓ Correct
import { MaterialIcons } from 'react-native-vector-icons';

// ✗ Wrong
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
```

```bash
yarn storybook
```

--------------------------------

### Define Package Exports

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Configure package.json to support platform-specific entry points for web and native.

```json
{
  "name": "@mycompany/shared-ui",
  "exports": {
    ".": {
      "web": "./dist/web/index.js",
      "native": "./dist/native/index.js",
      "default": "./dist/web/index.js"
    }
  }
}
```

--------------------------------

### Monorepo Configuration

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/configuration.md

Sets the project root and aliases workspace packages to their web-compatible variants.

```javascript
// packages/my-app/.storybook/main.js
const path = require('path');

module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        projectRoot: path.resolve(__dirname, '..'),
        modulesToTranspile: [
          'react-native-reanimated',
          '@myorg/shared-ui',
        ],
        modulesToAlias: {
          '@myorg/shared-ui': '@myorg/shared-ui/web',
        },
      },
    },
  ],
};
```

--------------------------------

### Inspect Webpack Configuration

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

Use webpackFinal in .storybook/main.js to log the final resolved webpack configuration to the console.

```javascript
// .storybook/main.js
module.exports = {
  webpackFinal: async (config) => {
    console.log(JSON.stringify(config, null, 2));
    return config;
  },
};
```

--------------------------------

### Use Native Base Components

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Import and use Native Base components like Box, Button, and Text.

```typescript
import { Box, Button, Text } from 'native-base';

export const NativeBaseButton = () => (
  <Box p={4}>
    <Button>
      <Text>Press Me</Text>
    </Button>
  </Box>
);
```

--------------------------------

### Test Babel transpilation

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Run Babel manually to verify transpilation configuration.

```bash
# Test Babel transpilation
yarn babel src --out-dir dist
```

--------------------------------

### Define Babel Presets

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/types.md

Shows the configuration format for Babel presets using both string and tuple definitions.

```typescript
babelPresets: [
  'nativewind/babel',
  [
    'babel-preset-custom',
    {
      option1: 'value1',
    },
  ],
]
```

--------------------------------

### Test Library Import

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Verify library compatibility by attempting an import in a test file.

```typescript
// Try importing the library
import { Component } from 'library-name';

// If this fails, adjust configuration
```

--------------------------------

### Configure Vector Icons Fonts

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Include the font directory in staticDirs within .storybook/main.js to ensure icons render correctly.

```javascript
module.exports = {
  staticDirs: ['node_modules/react-native-vector-icons/Fonts'],
};
```

--------------------------------

### Optimize transpilation and Babel plugins

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Reduce build size by limiting transpilation to necessary packages and including only required Babel plugins.

```javascript
// ✗ Too much
options: {
  modulesToTranspile: [
    'react-native',
    'react-native-web',
    'expo',
    // ... 20 more packages
  ],
}

// ✓ Minimal
options: {
  modulesToTranspile: [
    'react-native-reanimated', // Only what's needed
  ],
}
```

```javascript
// ✗ Unnecessary
babelPlugins: [
  'plugin1',
  'plugin2',
  'plugin3',
  // ... unused plugins
]

// ✓ Needed only
babelPlugins: [
  'react-native-reanimated/plugin',
]
```

--------------------------------

### Import Preset Directly

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/api-reference.md

Manually integrate the addon by importing the webpackFinal preset function directly into the webpackFinal configuration.

```javascript
const { webpackFinal } = require('@storybook/addon-react-native-web/preset');

module.exports = {
  webpackFinal: (config) => webpackFinal(config, { /* options */ }),
};
```

--------------------------------

### Configure babelPlugins

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/README.md

Pass a list of required Babel plugins to the addon configuration.

```js
module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        babelPlugins: ['babel-plugin-name'],
      },
    },
  ],
};
```

--------------------------------

### Configure Babel preset options

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Pass specific options to babel presets to reduce processing overhead during the build.

```javascript
// .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        babelPresetReactNativeOptions: {
          useTransformReactJSXExperimental: true,
          // Add other optimization options
        },
      },
    },
  ],
};
```

--------------------------------

### Resolve React Native Import

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

Shows how the addon aliases react-native imports to react-native-web.

```text
import { View } from 'react-native'
    ↓
Check alias: react-native → react-native-web
    ↓
Resolve: node_modules/react-native-web
    ↓
Load: View from react-native-web/lib/exports/View
```

--------------------------------

### Configure projectRoot for monorepos

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Set the projectRoot to the specific package directory to resolve module path issues in monorepo environments.

```javascript
// packages/app/.storybook/main.js
const path = require('path');

module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        projectRoot: path.resolve(__dirname, '..'),
        modulesToTranspile: ['@mycompany/shared-ui'],
      },
    },
  ],
};
```

--------------------------------

### Minimal Configuration

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/INDEX.md

Use this configuration for projects relying solely on standard React Native components.

```javascript
module.exports = {
  addons: ['@storybook/addon-react-native-web'],
};
```

--------------------------------

### Implement Platform-Specific Components

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Use .web.tsx and .native.tsx file extensions to provide platform-specific styling implementations.

```typescript
// src/Button.web.tsx
import { View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  button: {
    // Web-specific styles
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
  },
});

export const Button = () => <View style={styles.button} />;

// src/Button.native.tsx
import { View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  button: {
    // Native-specific styles
    elevation: 5,
  },
});

export const Button = () => <View style={styles.button} />;
```

--------------------------------

### getBabelPlugins(options: Options)

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/DOCUMENTATION_MANIFEST.txt

Retrieves the list of Babel plugins required for React Native Web transpilation.

```APIDOC
## getBabelPlugins(options)

### Description
Generates the necessary Babel plugin configuration based on the provided options.

### Parameters
- **options** (Options) - Required - Configuration object containing babelPlugins and other relevant settings.

### Returns
- **Array** - A list of Babel plugins configured for the project.
```

--------------------------------

### Configure react-native-reanimated

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/README.md

Add the required modules and babel plugins to the storybook addon configuration.

```js
module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-reanimated'],
        babelPlugins: [
          '@babel/plugin-proposal-export-namespace-from',
          'react-native-reanimated/plugin',
        ],
      },
    },
  ],
};
```

--------------------------------

### Configure Addon Order in main.js

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

Place the React Native Web addon before other addons that depend on its specific configuration.

```javascript
module.exports = {
  addons: [
    '@storybook/addon-essentials', // Core addons
    '@storybook/addon-react-native-web', // React Native Web config
    // Other addons
  ],
};
```

--------------------------------

### Implement Include Logic

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Determines whether a file should be processed based on the modules list and project root exclusions.

```typescript
include(filename: string) {
  if (!filename) {
    return false;
  }

  // Include if filename matches any module in the modules list
  for (const possibleModule of modules) {
    if (filename.includes(path.normalize(possibleModule))) {
      return true;
    }
  }

  // For files in projectRoot, include unless they match DEFAULT_EXCLUDES
  if (filename.includes(root)) {
    for (const excluded of DEFAULT_EXCLUDES) {
      if (filename.includes(path.normalize(excluded))) {
        return false;
      }
    }
    return true;
  }
  
  return false;
}
```

--------------------------------

### Configure with NativeWind

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/INDEX.md

Use this configuration to integrate Tailwind CSS support via NativeWind.

```javascript
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['nativewind', 'react-native-css-interop'],
        babelPresets: ['nativewind/babel'],
        babelPresetReactOptions: { jsxImportSource: 'nativewind' },
      },
    },
  ],
};
```

--------------------------------

### Configure tailwind.config.js

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Define content paths for Tailwind CSS scanning.

```javascript
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './stories/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

--------------------------------

### Export the Webpack Final Configuration

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/README.md

The main entry point for the addon, exporting the webpackFinal function from the package root.

```javascript
module.exports = {
  webpackFinal,  // Exported from dist/cjs/webpack.js
};
```

--------------------------------

### Configure native-base and react-native-paper

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/README.md

Add react-native-vector-icons to modulesToTranspile for libraries that depend on it.

```js
module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-vector-icons'],
      },
    },
  ],
};
```

--------------------------------

### Configure module aliases

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Define custom module aliases in .storybook/main.js to resolve missing module errors.

```javascript
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToAlias: {
          'package-name': 'package-name/web',
          'another-package': 'another-package/web',
        },
      },
    },
  ],
};
```

```bash
yarn storybook
```

--------------------------------

### Configure Babel Plugins

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Defines the order of plugins, ensuring react-native-web is applied first.

```typescript
plugins: [
  'react-native-web',  // Always first
  ...babelPlugins     // User-provided plugins
]
```

```typescript
plugins: [
  'react-native-web',
  'react-native-reanimated/plugin',
  '@babel/plugin-proposal-export-namespace-from',
  [
    '@babel/plugin-transform-runtime',
    { useESModules: true }
  ]
]
```

--------------------------------

### Manage Storybook HMR and Cache

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Commands to ensure Storybook runs in development mode, watches files, and clears cache.

```bash
yarn storybook

# NOT
yarn storybook --production
```

```bash
yarn storybook --no-cache
```

```bash
rm -rf node_modules/.cache
yarn storybook
```

--------------------------------

### Minimal Storybook Configuration

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/configuration.md

Uses default settings including automatic react-native-web aliasing and babel preset detection.

```javascript
// .storybook/main.js
module.exports = {
  addons: ['@storybook/addon-react-native-web'],
};
```

--------------------------------

### Combine Addon with Custom webpackFinal

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

Use the addon registry while applying custom webpack modifications in the main.js file.

```javascript
// .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: { /* addon options */ },
    },
  ],
  webpackFinal: async (config) => {
    // Custom webpack modifications here
    config.module.rules.push({
      test: /\.custom$/,
      loader: 'custom-loader',
    });
    return config;
  },
};
```

--------------------------------

### Integrate NativeWind CSS

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Configuration steps for adding Tailwind CSS support to Storybook.

```bash
yarn add --dev tailwindcss postcss autoprefixer
```

```javascript
// .storybook/main.js
module.exports = {
  webpackFinal: async (config) => {
    config.module?.rules?.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            },
          },
        },
      ],
    });
    return config;
  },
};
```

```typescript
// .storybook/preview.tsx
import '../global.css';
```

```javascript
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './stories/**/*.{js,jsx,ts,tsx}',
  ],
};
```

--------------------------------

### Webpack Configuration Output

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

The resulting webpack configuration after the addon processes plugins, module rules, resolution extensions, and aliases.

```javascript
config.plugins = [
  // ... existing plugins
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"development"',
    __DEV__: true,
  }),
  new webpack.DefinePlugin({
    process: { env: {} },
  }),
];

config.module.rules = [
  // ... existing rules
  {
    test: /\.(js|jsx|ts|tsx|mjs)$/,
    loader: 'babel-loader',
    include: function(filename) { /* custom logic */ },
    options: {
      root: '/path/to/project',
      presets: [
        ['module:@react-native/babel-preset', { useTransformReactJSXExperimental: true }],
        ['@babel/preset-react', { runtime: 'automatic' }],
      ],
      plugins: ['react-native-web', 'react-native-reanimated/plugin'],
    },
  },
];

config.resolve.extensions = [
  '.web.js',
  '.web.jsx',
  '.web.ts',
  '.web.tsx',
  '.web.mjs',
  // ... original extensions
];

config.resolve.alias = {
  'react-native$': 'react-native-web',
  // ... user aliases
};
```

--------------------------------

### Verify React version consistency

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Check and synchronize React package versions to prevent rendering issues caused by mismatches.

```bash
yarn list react
yarn list react-dom

# Should all show the same version (18.x, 19.x, etc.)
```

```bash
yarn add --dev react react-dom --exact
```

--------------------------------

### Define User Presets

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Placeholder for additional user-provided presets.

```typescript
...babelPresets
```

--------------------------------

### Verify Reanimated integration

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Test the configuration by importing Reanimated hooks and components in a Storybook component.

```typescript
// src/components/AnimatedBox.tsx
import Animated, { useSharedValue } from 'react-native-reanimated';

export const AnimatedBox = () => {
  const scale = useSharedValue(1);
  return <Animated.View style={{ transform: [{ scale }] }} />;
};
```

--------------------------------

### Configure NativeWind in Storybook

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/library-integration-reference.md

Configure Babel presets, plugins, and Webpack rules for CSS processing in .storybook/main.js.

```javascript
// .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: [
          'react-native-reanimated',
          'nativewind',
          'react-native-css-interop',
        ],
        babelPresetReactOptions: {
          jsxImportSource: 'nativewind',
        },
        babelPresets: ['nativewind/babel'],
        babelPlugins: [
          '@babel/plugin-proposal-export-namespace-from',
          'react-native-reanimated/plugin',
          [
            '@babel/plugin-transform-react-jsx',
            {
              runtime: 'automatic',
              importSource: 'nativewind',
            },
          ],
        ],
      },
    },
  ],
  webpackFinal: async (config) => {
    config.module?.rules?.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            },
          },
        },
      ],
    });
    return config;
  },
};
```

--------------------------------

### Configure modulesToTranspile in Storybook

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Use this configuration to resolve 'Proper Loader Not Found' errors by specifying packages that require transpilation.

```javascript
// .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-reanimated'],
      },
    },
  ],
};
```

--------------------------------

### Extension Resolution Order

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/configuration.md

Configures webpack to prioritize web-specific file extensions for platform-specific development.

```javascript
[
  '.web.js',
  '.web.jsx',
  '.web.ts',
  '.web.tsx',
  '.web.mjs',
  // ... original extensions
]
```

--------------------------------

### Verify React Native Preset Detection

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

Log the detected React Native preset to the console to ensure the addon is correctly identifying the environment.

```javascript
const { getRnPreset } = require('@storybook/addon-react-native-web/webpack');
console.log('Using React Native preset:', getRnPreset());
```

--------------------------------

### Define Options Type

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/types.md

The primary TypeScript type definition for configuring the addon.

```typescript
export type Options = {
  modulesToTranspile?: string[];
  modulesToAlias?: { [key: string]: string };
  babelPlugins?: Array<string | [string, Record<string, string>]>;
  babelPresets?: Array<string | [string, Record<string, string>]>;
  babelPresetReactOptions?: Record<string, any>;
  babelPresetReactNativeOptions?: Record<string, any>;
  projectRoot?: string;
};
```

--------------------------------

### Implement Interaction Tests

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Use Storybook test utilities to simulate user input and verify component behavior.

```typescript
// src/components/Form.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { userEvent, within, expect } from '@storybook/test';
import { Form } from './Form';

const meta = {
  title: 'Components/Form',
  component: Form,
} satisfies Meta<typeof Form>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const input = canvas.getByPlaceholderText('Enter name');
    await userEvent.type(input, 'John Doe', { delay: 100 });
    expect(input).toHaveAttribute('value', 'John Doe');
  },
};
```

--------------------------------

### Default Module Includes

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/configuration.md

List of modules automatically included in the babel-loader transpilation process.

```javascript
[
  'node_modules/react-native',
  'node_modules/react-navigation',
  'node_modules/expo',
  'node_modules/unimodules',
  'node_modules/@react/*',
  'node_modules/@expo/*',
  'node_modules/@use-expo/*',
  'node_modules/@unimodules/*',
  'node_modules/native-base',
  'node_modules/styled-components',
]
```

--------------------------------

### Define Web-Compatible Styles

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Use StyleSheet.create to define styles, ensuring properties are supported by react-native-web.

```typescript
// ✓ Works
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#ffffff',
  },
});

// ✗ May not work
const styles = StyleSheet.create({
  container: {
    elevation: 5, // Android-only
    shadowOffset: { width: 0, height: 2 }, // iOS-only
  },
});
```

--------------------------------

### Enable Debug Logging

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

Set the NODE_DEBUG environment variable to output detailed webpack logs during Storybook startup.

```bash
NODE_DEBUG=webpack NODE_ENV=development yarn storybook
```

--------------------------------

### Redirect React Native Imports

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/webpack-configuration-details.md

Demonstrates how imports are automatically resolved from react-native to react-native-web.

```typescript
// Input
import { View, Text } from 'react-native';

// Resolved to
import { View, Text } from 'react-native-web';
```

--------------------------------

### Platform-Specific Extension Resolution

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

Webpack prioritizes .web.* file extensions to allow for platform-specific implementations.

```text
import Button from './Button'
↓
Check: ./Button.web.ts? → YES → Use it
Check: ./Button.web.tsx? → NO
Check: ./Button.ts? → YES → But already found .web.ts
```

--------------------------------

### Create a React Native Component

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Define a basic React Native component using TouchableOpacity and Text.

```typescript
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
});

interface ButtonProps {
  onPress?: () => void;
  children: string;
}

export const Button: React.FC<ButtonProps> = ({ onPress, children }) => {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.buttonText}>{children}</Text>
    </TouchableOpacity>
  );
};
```

--------------------------------

### Configure Webpack for SVG Support

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/installation-and-setup.md

Update .storybook/main.js to exclude existing SVG rules and add custom loaders.

```javascript
module.exports = {
  webpackFinal: async (config) => {
    const fileLoaderRule = config.module.rules.find(
      (rule) => rule.test && rule.test.test('.svg'),
    );

    if (fileLoaderRule) {
      fileLoaderRule.exclude = /\.svg$/;
    }

    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack', 'url-loader'],
    });

    return config;
  },
};
```

--------------------------------

### Configure modulesToAlias in Storybook

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/usage-patterns.md

Use this configuration to resolve import resolution issues by mapping specific modules to their web-compatible counterparts.

```javascript
// .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToAlias: {
          'react-native-gesture-handler': 'react-native-gesture-handler/web',
        },
      },
    },
  ],
};
```

--------------------------------

### Configure TypeScript Compiler Options

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Update tsconfig.json to include necessary compatibility flags.

```json
{
  "compilerOptions": {
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}
```

--------------------------------

### webpackFinal(config: Configuration, options: Options)

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/DOCUMENTATION_MANIFEST.txt

Modifies the Storybook Webpack configuration to support React Native Web development.

```APIDOC
## webpackFinal(config, options)

### Description
Modifies the Storybook Webpack configuration to enable React Native Web support, including module aliasing and transpilation settings.

### Parameters
- **config** (Configuration) - Required - The base Webpack configuration object.
- **options** (Options) - Required - Configuration options for the addon, including modulesToTranspile, modulesToAlias, and babel settings.

### Returns
- **Configuration** - The updated Webpack configuration object.
```

--------------------------------

### Resolve React Native Component

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/integration-guide.md

Demonstrates the resolution process when a web-specific variant does not exist.

```text
src/Button.tsx (exists)
    ↓
Check: Button.web.tsx? (doesn't exist) → NO
    ↓
Result: Use Button.tsx
```

--------------------------------

### Verify component exports

Source: https://github.com/storybookjs/addon-react-native-web/blob/main/_autodocs/troubleshooting.md

Ensure components are properly exported to be visible in Storybook.

```typescript
// ✓ Correct
export const Button = () => <View />;

// ✓ Also correct
export default Button;

// ✗ Wrong (no export)
const Button = () => <View />;
```
Tokens:
Raw