React Native Storybook for Vega

Vega Open Beta Knowledge Base
1

Storybook 9 for Vega!

So I’ve been working on making a lite version of the Storybook UI that can work in more places and as a result of that its now possible to run React Native Storybook on Vega. You can even build your own UI and pass it to the customui propery if you don’t like my version :grinning_face_with_smiling_eyes:.

There is still some rough edges and any help to better support TV is appreciated.
You will find that there are more libraries included than you might expect and that’s because of a limitation around the Metro version that doesn’t work with optional requires. However this can improve over time.

image
image3044×1480 234 KB

How?

Follow these steps:

1. Generate a new project if you don’t have one

vega project create --template hello-world --name keplersampleapp --packageId com.amazondeveloper.keplersampleapp --outputDir keplerstorybook

2. Add Storybook

npm create storybook@latest -- --yes --type react_native --package-manager npm

Now add the lite mode UI package for better compatibility with Vega and the async storage package:

npm i -D @storybook/react-native-ui-lite @amazon-devices/react-native-async-storage__async-storage

3. Update Metro config

Update Metro config with the following:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    // 👇 add this
    unstable_enablePackageExports: true,
    sourceExts: [...defaultConfig.resolver.sourceExts, 'mjs'],
  },
};

const finalConfig = mergeConfig(defaultConfig, config);

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

// 👇 add this
module.exports = withStorybook(finalConfig, {
  docTools: false, // important to set this to false otherwise code not compatible with Vega will be added
});

Storybook requires package exports support, which is available as a beta feature in React Native 0.72. You must enable unstable_enablePackageExports: true in your Metro config. While this feature is stable enough for development, the unstable_ prefix indicates it may have edge cases or API changes in future React Native versions.

4. Update Storybook config

update .rnstorybook/index.tsx

// .rnstorybook/index.tsx
import {view} from './storybook.requires';
// 👇 add this instead of the @react-native-async-storage/async-storage
import AsyncStorage from '@amazon-devices/react-native-async-storage__async-storage'; 

 // 👇 add this
import {LiteUI} from '@storybook/react-native-ui-lite';


const StorybookUIRoot = view.getStorybookUI({
  // 👇 add this
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
  CustomUIComponent: LiteUI, // 👈 add this
});

export default StorybookUIRoot;

5. Update generate script

Update to have the -D flag which disables doctools which are unsupported currently in Vega.

"scripts": {
   "storybook-generate": "sb-rn-get-stories -D"
}

6. Add Storybook to your app entry point

You might want to conditionally load Storybook based on an environment variable or some other condition, but to quickly get running we will just load it directly.

In your app entry point App.tsx add the StorybookUI component:

import React from 'react';
import {View} from 'react-native';
// 👇 add this
import StorybookUI from '../.rnstorybook';

const fill = {flex: 1};

export const App = () => {
  return (
    <View style={fill}>
       {/* 👇 add this  */}
      <StorybookUI />
    </View>
  );
};

7. Run Storybook

Now run Vega as normal, you can also logic to switch between Storybook and your app or add it in a separate route.

Thank you!

Please feel free to give feedback and I hope it’s useful to some of you. :slight_smile:

For general guidance on React Native Storybook, check out the Getting Started Guide:

Last updated: Feb 23, 2026

Vega Supported Libraries and Services