Search code examples
storybook

How to add a global decorator in Storybook

In ReactJs project you can use .storybook/preview.js file to add global decorators and parameters. How to achieve this same behaviour with @storybook/react-native?

What I need is to wrap all my stories with ThemeProvider but the unique way that I found is to wrap individual stories with .addDecorator().

Solution

  • Edit storybook/index.js, by using addDecorator on it.

    Example:

    import React from 'react'
import { getStorybookUI, configure, addDecorator } from '@storybook/react-native'
import Decorator from './Decorator'


addDecorator(storyFn => (
  <Decorator>
    {storyFn()}
  </Decorator>
))

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


const StorybookUI = getStorybookUI({ onDeviceUI: true })
export default StorybookUI;;