Storybook React Native CLI Setup

jmquilario — Mon, 27 Nov 2023 11:34:40 +0000

create a new RN CLI project or in an existing RN CLI project,
run npx sb@latest init in terminal PWD
replace the metro.config.js with the below
run npx pod-install ios
replace all the content of App.tsx with export {default} from './.storybook';
run yarn start in terminal PWD
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);

DEV Community: jmquilario

Storybook React Native CLI Setup