Skip to content

Instantly share code, notes, and snippets.

@dannyhw
Last active December 16, 2022 14:32
Show Gist options
  • Save dannyhw/92b3ff0d6ccaead9df2820a507154b87 to your computer and use it in GitHub Desktop.
Save dannyhw/92b3ff0d6ccaead9df2820a507154b87 to your computer and use it in GitHub Desktop.
React native storybook alpha v6 Expo setup
#!/bin/bash
set -e
APP_NAME=${1:-RNStorybookAlpha}
echo "APP_NAME: $APP_NAME"
npm install --global expo-cli
expo init -t expo-template-blank-typescript $APP_NAME
cd $APP_NAME
expo install @storybook/react-native@next \
@storybook/addon-ondevice-actions@next \
@storybook/addon-ondevice-controls@next \
@storybook/addon-ondevice-backgrounds@next \
@storybook/addon-ondevice-notes@next \
@storybook/addon-actions@6.3 \
@storybook/addon-controls@6.3 \
@react-native-async-storage/async-storage \
@react-native-community/datetimepicker \
@react-native-community/slider
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,
},
});
defaultConfig.watchFolders = [...defaultConfig.watchFolders, './.storybook'];
module.exports = defaultConfig;
" > metro.config.js;
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 { getStorybookUI } from '@storybook/react-native';
import './storybook.requires';
const StorybookUIRoot = getStorybookUI({});
export default StorybookUIRoot;" > .storybook/Storybook.tsx
echo "import StorybookUIRoot from './.storybook/Storybook';
export { StorybookUIRoot as default };" > App.tsx
node -e 'const fs = require("fs");
const packageJSON = require("./package.json");
packageJSON.scripts = {
...packageJSON.scripts,
prestart: "sb-rn-get-stories",
"storybook-watcher": "sb-rn-watcher"
};
fs.writeFile("./package.json", JSON.stringify(packageJSON, null, 2), function writeJSON(err) {
if (err) return console.log(err);
console.log(JSON.stringify(packageJSON));
console.log("writing to " + "./package.json");
});';
mkdir components/Button;
echo "import React from 'react';
import {TouchableOpacity, Text, StyleSheet} from 'react-native';
interface MyButtonProps {
onPress: () => void;
text: string;
}
export const MyButton = ({onPress, text}: MyButtonProps) => {
return (
<TouchableOpacity style={styles.container} onPress={onPress}>
<Text style={styles.text}>{text}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
paddingHorizontal: 16,
paddingVertical: 8,
backgroundColor: 'violet',
},
text: {color: 'black'},
});
" > components/Button/Button.tsx;
echo "import React from 'react';
import {ComponentStory, ComponentMeta} from '@storybook/react-native';
import {MyButton} from './Button';
const MyButtonMeta: ComponentMeta<typeof MyButton> = {
title: 'MyButton',
component: MyButton,
argTypes: {
onPress: {action: 'pressed the button'},
},
args: {
text: 'Hello world',
},
};
export default MyButtonMeta;
type MyButtonStory = ComponentStory<typeof MyButton>;
export const Basic: MyButtonStory = args => <MyButton {...args} />;
" > components/Button/Button.stories.tsx
yarn sb-rn-get-stories
@JeffGuKang
Copy link

JeffGuKang commented Dec 16, 2022

Need to change default CLI option for background addon as

echo "import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds';
export const decorators = [withBackgrounds];
export const parameters = {
  backgrounds: {
    default: 'plain',
    values: [
      { name: 'plain', value: 'white' },
      { name: 'warm', value: 'hotpink' },
      { name: 'cool', value: 'deepskyblue' },
    ],
  },
};" > .storybook/preview.js

storybookjs/react-native#413

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment