How to use @storybook/react-native - 10 common examples

import React, {useState, createElement, useCallback, useRef} from 'react';
import {Button as NativeButton, View, Modal, Text, TextInput, StyleSheet, Platform} from 'react-native';
import {storiesOf} from '@storybook/react-native';

import Button from '../src';

storiesOf('Button', module)
  .add('default view', () => {
    const [title, setTitle] = useState('Learn More');
    const onPress = useCallback(() => {
      console.warn('onPress');
    }, []);
    return (
      <>
        <button title="{title}">
      
    );
  })
  // .add('loading prop', () =&gt; {
  //   const [loading, setLoading] = useState(false);
  //   const onPress = useCallback(() =&gt; {
  //     setLoading(true);
  //     setTimeout(() =&gt; {</button>

import React, {useState} from 'react';
import {Text, StyleSheet} from 'react-native';
import {storiesOf} from '@storybook/react-native';

import {MonthPicker} from '../src';

storiesOf('MonthPicker', module).add('default view', () => {
  const [date, setDate] = useState(new Date());
  return (
    <>
      {/*  */}
      
      
    
  );
});

import * as React from "react";
import { AppRegistry } from "react-native";
import {
  getStorybookUI,
  configure,
  addDecorator
} from "@storybook/react-native";
import { withKnobs } from "@storybook/addon-knobs";

addDecorator(withKnobs);

// import stories
configure(() => {
  require("./stories");
}, module);

// This assumes that storybook is running on the same host as your RN packager,
// to set manually use, e.g. host: 'localhost' option
const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });

import "./rn-addons";

// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
// https://github.com/storybooks/storybook/issues/2081
// eslint-disable-next-line react/prefer-stateless-function
class StorybookUIHMRRoot extends React.Component {
  render() {
    return ;
  }

/* eslint-disable flowtype/require-valid-file-annotation */
import { getStorybookUI, configure } from '@storybook/react-native';

import { loadStories } from './storyLoader'; //eslint-disable-line

import './rn-addons';

// import stories
configure(loadStories, module);

const StorybookUI = getStorybookUI({
  port: 7007,
  host: 'localhost',
});

export default StorybookUI;

/* eslint-disable global-require */
import React, { Component } from 'react'
import { AppRegistry } from 'react-native'
import { configure, getStorybookUI } from '@storybook/react-native'

// import stories
configure(() => {
    require('./stories')
}, module)

// This assumes that storybook is running on the same host as your RN packager,
// to set manually use, e.g. host: 'localhost' option
const StorybookUIRoot = getStorybookUI({ port: 7008, onDeviceUI: false })

// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
// https://github.com/storybooks/storybook/issues/2081
// eslint-disable-next-line react/prefer-stateless-function
class StorybookUIHMRRoot extends Component {
    render() {
        return 
    }
}

/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, global-require */

import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';
import 'loki/configure-react-native';

// import stories
configure(() => {
  require('./stories');
}, module);

const StorybookUI = getStorybookUI({
  port: 7007,
  host: 'localhost',
  onDeviceUI: false,
});
AppRegistry.registerComponent('Loki', () => StorybookUI);
export default StorybookUI;

import { getStorybookUI, configure } from '@storybook/react-native';
import './rn-addons';

configure(() => {
  // eslint-disable-next-line global-require
  require('./stories');
}, module);

// const darkTheme = {
//   backgroundColor: 'black',
//   headerTextColor: 'white',
//   labelColor: 'white',
//   borderColor: 'white',
//   previewBorderColor: 'gray',
//   buttonTextColor: 'white',
//   buttonActiveTextColor: 'white',
// };

// const StorybookUIRoot = getStorybookUI({ theme: darkTheme });

/* eslint-disable global-require */
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';

// import stories
configure(() => {
  // eslint-disable-next-line
  require('./stories');
}, module);

// This assumes that storybook is running on the same host as your RN packager,
// to set manually use, e.g. host: 'localhost' option
const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });

// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
// https://github.com/storybooks/storybook/issues/2081
// eslint-disable-next-line react/prefer-stateless-function
class StorybookUIHMRRoot extends Component {
  render() {
    return ;
  }
}

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';

// import stories
configure(() => {
  require('./stories');
}, module);

// This assumes that storybook is running on the same host as your RN packager,
// to set manually use, e.g. host: 'localhost' option
const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });

// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
// https://github.com/storybooks/storybook/issues/2081
// eslint-disable-next-line react/prefer-stateless-function
class StorybookUIHMRRoot extends Component {
  render() {
    return ;
  }
}

/* eslint-disable global-require */
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';

// import stories
configure(() => {
    require('../test/stories');
}, module);

// This assumes that storybook is running on the same host as your RN packager,
// to set manually use, e.g. host: 'localhost' option
const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });

// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
// https://github.com/storybooks/storybook/issues/2081
// eslint-disable-next-line react/prefer-stateless-function
class StorybookUIHMRRoot extends Component {
    render() {
        return ;
    }
}

AppRegistry.registerComponent('RNskeleton', () => StorybookUIHMRRoot);
export default StorybookUIHMRRoot;