majirosstefan

import {
  createStackNavigator,
  createBottomTabNavigator
} from "react-navigation";

const AppBottomTab = createBottomTabNavigator({
  firstTab: {
    screen: Home,
    navigationOptions: {
      title: "Home"

majirosstefan

// in React setup 
npx -p @storybook/cli sb init --type react

// in React Native setup
npx -p @storybook/cli sb init --use-npm --type react_native

majirosstefan

// React setup 
"scripts": {
    "build-storybook": "build-storybook -s public",
    "storybook": "start-storybook -p 9009 -s public", etc..
  }

// React Native setup 
"scripts": {
    "storybook": "start-storybook -p 6006", etc..
  }

majirosstefan

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

majirosstefan

// your component written for react-native - how the metro bundler see it
import {View, Text} from "react-native";

const MyComponent = () => {
  return(
    <View>
      <Text>Hello</Text>
    </View>
    )

majirosstefan

module.exports = {
  stories: ['../storybook/stories/index.js'],
  webpackFinal: async config => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
      // make sure we're rendering output using **web** Storybook not react-native
      '@storybook/react-native': '@storybook/react',
      // plugin-level react-native-web extensions

majirosstefan

{
  "name": "example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",

majirosstefan

const {getDefaultConfig} = require('metro-config');
module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();

  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },

majirosstefan

<svg width="51px" height="53px" viewBox="0 0 51 53" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter x="-48.6%" y="-44.7%" width="191.9%" height="189.5%" filterUnits="objectBoundingBox" id="filter-1">
            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>

majirosstefan

  // handle svg support
    const fileLoaderRule = config.module.rules.find(rule =>
      rule.test.test('.svg'),
    );
    fileLoaderRule.exclude = /\.svg$/;
    config.module.rules.push({
      test: /\.svg$/,
      loader: 'svg-react-loader',
    });