storybook-addon-ondevice-paper-theme
this repository is a modified clone from https://github.com/h-des/storybook-addon-ondevice-styled-theme to work with react native paper instead styled components, all credits @h-des
Storybook-addon-ondevice-paper-theme for react-native can be used to provide themes to your components that are built with react native paper. You can choose between themes in Themes
panel on your device. This addons wraps every story with ThemeProvider
from react native paper
.
Installation
yarn add -D storybook-addon-ondevice-paper-theme
Configuration
Create a file called rn-addons.js
in your storybook config.
Add following content to it:
import 'storybook-addon-ondevice-paper-theme/register'
Then import rn-addons.js
next to your getStorybookUI
call.
import './rn-addons'
Usage
import React from 'react'
import { Text } from 'react-native'
import { storiesOf, addDectorator } from '@storybook/react-native'
import { withTheme } from 'storybook-addon-ondevice-paper-theme'
addDecorator(withTheme)
storiesOf('Component', module)
.addParameters({
themes: [
{ name: 'theme1', colors: { primary: '#222222' } },
{ name: 'theme2', colors: { primary: '#eeeeee' } }
]
})
.add('default', () => <Text>Some Text</Text>)
or globally in storybook.js
import React from 'react'
import { addDecorator, addParameters } from '@storybook/react-native'
import { withTheme } from 'storybook-addon-ondevice-paper-theme'
addDecorator(withTheme)
addParameters({
themes: [
{ name: 'theme1', colors: { primary: '#222222' } },
{ name: 'theme2', colors: { primary: '#eeeeee' } }
]
})