storybook-addon-ondevice-emotion-theme
Storybook-addon-ondevice-emotion-theme for react-native can be used to provide themes to your components that are built with emotion. You can choose between themes in Themes
panel on your device. This addons wraps every story with ThemeProvider
from @emotion/react
.
Installation
yarn add -D storybook-addon-ondevice-emotion-theme
Configuration
Create a file called rn-addons.js
in your storybook config.
Add following content to it:
import 'storybook-addon-ondevice-emotion-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-emotion-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-emotion-theme'
addDecorator(withTheme)
addParameters({
themes: [
{ name: 'theme1', colors: { primary: '#222222' } },
{ name: 'theme2', colors: { primary: '#eeeeee' } }
]
})