Setting up Gluestack UI + React Native with Storybook Web

[hristo87]

Hey everyone,

If you're using React Native + Gluestack UI with Storybook Web and encountering challenges while wrapping your story in GluestackUIProvider, here's a sample main.js and preview.jsx configuration that you can use as a base to make it work.

main.js

import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: ['../src/stories/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['@gluestack-ui/themed', '@gluestack-ui/config'],
      },
    },
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },

  webpackFinal: async config => {
    //@ts-ignore
    config.resolve.alias = {
      //@ts-ignore
      ...config.resolve.alias,
      'react-native$': 'react-native-web',
    };
    return config;
  },
};
export default config;

preview.jsx

import React from 'react';
import type { Preview } from '@storybook/react';
import { config } from '@gluestack-ui/config';
import { GluestackUIProvider } from '@gluestack-ui/themed';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [
    Story => (
      <GluestackUIProvider config={config}>
        <Story />
      </GluestackUIProvider>
    ),
  ],
};

export default preview;

[dannyhw]

@hristo87 the webpackfinal is not required since that alias is already handled by addon-react-native-web. The fix is adding the packages to the moduleToTranspile option here:

    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['@gluestack-ui/themed', '@gluestack-ui/config'],
      },
    },

[hristo87]

@dannyhw you are correct and I have tested it on clean react native project and it was working as expected, but for some reason I couldn`t run it without pointing the aliases in my current project, so I guess its good to have it as an example for those who might experience the same problems.