storybook-eol/react-native-storybook

Decorators may get applied multiple times

thani-sh opened this issue · 3 comments

thani-sh commented

Check whether this issue reported on react-storybook repo exists here. It is more likely that it does. Unfortunately we can't apply the solution used there because react-native HMR does not support dispose handlers. Investigate this issue and find a good solution.

If the issue exists, I think users can prevent it by manually calling clearDecorators from the config.js file. Global decorators are not that common so this issue is not critical. We can do it after optimising ios/android setup guides.

thani-sh commented

TODO:

  • try to reproduce this issue and check whether it exists
  • find a solution without adding extra config for users
macrozone commented

hi @mnmtanish I have exact this issue with react native. My storybook/index.js looks like this:


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('../src/modules/core/components/stories')
  require('../src/modules/editor/components/stories')
  require('../src/modules/icons/components/stories')
}, module)


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

// see also comment on src/App.js
// see https://github.com/react-community/create-react-native-app/issues/88#issuecomment-292728645
export default class extends React.Component {
  render() {
    return StorybookUI()
  }
}

the decorator:

// Decorator.js
import { ThemeProvider } from 'styled-components'
import React from 'react'
import styled from 'styled-components/native'

import theme from '../src/configs/theme'


/* add margin top so that id does not overlap statusbar */
const DecoratorBase = styled.View`
  flex: 1;
  margin-top: 20px;
`

// see https://github.com/react-community/create-react-native-app/issues/88#issuecomment-292728645
/* eslint react/prefer-stateless-function: 0 */
export default class extends React.Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <DecoratorBase>{this.props.children}</DecoratorBase>
      </ThemeProvider>
    )
  }
}

I needed to wrap these components in React.Component, otherwise HMR did not work properly. But now a new decorator is added whenever hot reload happens