Skip to content

Latest commit

 

History

History
229 lines (179 loc) · 6.06 KB

v6README.md

File metadata and controls

229 lines (179 loc) · 6.06 KB
Raw

How to test the 6.0 alpha

Setting up a new project from scratch

Vanilla React Native: Run the setup script or follow this guide to do it step-by-step.

Expo: Follow this guide.

This guide assumes that you have yarn, node, npm and npx and they are in your path so your terminal can run them. The guide is for Mac/Linux, Windows might need slight adjustments. Contributions for a Windows guide are welcome!

First, create the project:

Vanilla React Native

npx react-native init RnSBSixAlpha --template react-native-template-typescript
cd RnSBSixAlpha

Expo

npm install --global expo-cli
expo init -t expo-template-blank-typescript appName
cd appName

Next, open the project in your chosen editor, here I use vscode

code .

Now install the react native storybook dependencies, here I'm installing all the available ondevice addons. You can just pick the addons you want to use.

yarn add @storybook/react-native@next \
            @react-native-async-storage/async-storage \
            @storybook/addon-ondevice-actions@next \
            @storybook/addon-ondevice-controls@next \
            @storybook/addon-ondevice-backgrounds@next \
            @storybook/addon-ondevice-notes@next \
            @storybook/addon-actions \
            @react-native-community/datetimepicker \
            @react-native-community/slider \
            @storybook/addon-controls

Datetime picker, slider and addon-controls are required for controls to work. If you don't want controls you don't need to install these (controls is the knobs replacement).

Continue by updating your metro config to have resolver:{resolverMainFields: ['sbmodern', 'main']}. This enables us to use the modern build of storybook instead of the polyfilled versions.

Vanilla React Native

echo "/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    resolverMainFields: ['sbmodern', 'main'],
  },
};" > metro.config.js

Expo

echo "const { getDefaultConfig } = require('expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.resolverMainFields = [
  'sbmodern',
  ...defaultConfig.resolver.resolverMainFields,
];
defaultConfig.transformer.getTransformOptions = async () => ({
  transform: {
    experimentalImportSupport: false,
    inlineRequires: false,
  },
});
module.exports = defaultConfig;
" > metro.config.js;

Create .storybook/main and preview.js, here we use unix commands to set this up. If you are using windows then just make the .storybook folder and components folder then add the content for main.js and preview.js from those "echo '...' >" commands

mkdir .storybook
mkdir components
echo "module.exports = {
  stories: [
    './components/**/*.stories.?(ts|tsx|js|jsx)'
  ],
   addons: [
    '@storybook/addon-ondevice-notes',
    '@storybook/addon-ondevice-controls',
    '@storybook/addon-ondevice-backgrounds',
    '@storybook/addon-ondevice-actions',
  ],
};" > .storybook/main.js

echo "import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds';

export const decorators = [withBackgrounds];
export const parameters = {
  backgrounds: [
    {name: 'plain', value: 'white', default: true},
    {name: 'warm', value: 'hotpink'},
    {name: 'cool', value: 'deepskyblue'},
  ],
};" > .storybook/preview.js

echo "import AsyncStorage from '@react-native-async-storage/async-storage';
import { getStorybookUI } from '@storybook/react-native';

import './storybook.requires';

const StorybookUIRoot = getStorybookUI({
  asyncStorage: AsyncStorage,
});

export default StorybookUIRoot;" > Storybook.tsx

echo "import StorybookUIRoot from './Storybook';
export { StorybookUIRoot as default };" > App.tsx

Now add