Decorators may get applied multiple times

[thani-sh]

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]

TODO:

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

[macrozone]

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

[thani-sh]

Hi,
Moved the issue: https://github.com/storybooks/storybook/issues/1593