DEV Community

jmquilario
jmquilario

Posted on

Storybook React Native CLI Setup

  1. create a new RN CLI project or in an existing RN CLI project,
  2. run npx sb@latest init in terminal PWD
  3. replace the metro.config.js with the below
  4. run npx pod-install ios
  5. replace all the content of App.tsx with export {default} from './.storybook';
  6. run yarn start in terminal PWD
  7. in Metro, press i to run on iOS
// metro.config.js
// config for storybook RN
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    resolverMainFields: [
      'sbmodern',
      ...getDefaultConfig(__dirname).resolver.resolverMainFields,
    ],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)