React-native-device-preview NPM

react-native-device-preview

Component preview for react native.

Install

yarn add react-native-device-preview

Setup

yarn rn-dp-init

Usage

Add the next scripts in package.json

{
    ...
    "scripts": {
        ....
        "get-stories": "rn-dp-get-stories",
        "watch-stories": "rn-dp-watcher",
        "prestart": "rn-dp-get-stories"
        ....
    }
    ...
}

In your App.js

import { StorybookRootUI } from './.storybook/storybook-ui-root'

function App() {
  return <StorybookRootUI />
}

export default App

Start developing

yarn start

yarn ios

yarn android

Custom components directory

Change the stories path in .storybook/main.js with your components path

module.exports = {
  stories: ['../src/components/**/*.stories.?(ts|tsx|js|jsx)'],
}

Create your components and stories

    |- src/components
        |- button.js
        |- button.stories.js

// button.js
import { Button as RNButton } from 'react-native'

export const Button = ({ title }) => {
  return <RNButton title={title} />
}

// button.stories.js
import { Button } from './button'

export default {
  title: 'button',
  component: Button,
}

const Template = args => <Button {...args} />

export const Default = Template.bind({})

Default.args = {
  title: 'button',
}

Typescript support

// button.tsx
import { Button as RNButton } from 'react-native'

export const Button = ({ title }: { title: string }) => {
  return <RNButton title={title} />
}

// button.stories.tsx
import { ComponentMeta, ComponentStory } from 'react-native-device-preview'
import { Button } from './button'

export default {
  title: 'button',
  component: Button,
} as ComponentMeta<typeof Button>

const Template: ComponentStory<typeof Button> = args => <Button {...args} />

export const Default = Template.bind({})

Default.args = {
  title: 'button',
}