CODEWITHSUNDEEP
reactjsreact-nativetailwind-cssnativewind
themaster
themaster

Reputation: 385

React Native Storybook and Nativewind

I have a react native project and I want to use storybook to document components. However the issue I'm running into is nativewind styles don't apply when viewing in storybook. So i just see a component with no styling, but they are styled when i run component in app.

Can anyone nudge me in the right direction?

Here is the setup i have so far.

.storybook/main.ts

import { dirname, join } from 'path'


/**
 * Resolves the absolute path of a package. Useful for monorepos or Yarn PnP.
 */
function getAbsolutePath(value) {
  return dirname(require.resolve(join(value, 'package.json')));
}

module.exports = {
  stories: [
    '../../../libs/shared-ui/src/components/**/*.stories.tsx',
  ],
  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-interactions'),
    {
      name: getAbsolutePath('@storybook/addon-react-native-web'),
      options: {
        modulesToTranspile: ['nativewind'],
        babelPlugins: [
          '@babel/plugin-proposal-export-namespace-from',
          [
            '@babel/plugin-transform-react-jsx',
            {
              runtime: 'automatic',
              importSource: 'nativewind',
            },
          ],
        ],
      },
    },
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: '@storybook/react-vite',
  async viteFinal(config, { configType }) {
    return {
      ...config,
      define: {
        'process.env': {},
      },
      resolve: {
        alias: {
          'react-native': 'react-native-web',
        },
      },
    }
  },
};

.storybook/preview.ts

import '../global.css';

/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
}

export default preview

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

It seems to fail to inject styles from nativewind className to styles on the component.

Upvotes: 2

Views: 628

Answers (1)

themaster
themaster

Reputation: 385

Found my issue, it turns out the issue was I needed to use createGlobPatternsForDependencies for example

const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(
      __dirname,
      '../shared-ui/src/components/**/*.{js,ts,jsx,tsx}'
    ),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  important: 'html',
  theme: {
    extend: {},
  },
  plugins: [],
};

Upvotes: 0

Related Questions