reactotron icon indicating copy to clipboard operation
reactotron copied to clipboard

Do not understand documentation about storybook switcher

Open lucasluca opened this issue 5 years ago • 5 comments

image

image

The documentation do not says where to use storybook imported from reactotron

lucasluca avatar Oct 29 '19 22:10 lucasluca

Can you show me your reactotron config?

rmevans9 avatar Oct 29 '19 22:10 rmevans9

I'm in the same boat - the example for using storybook doesn't not explain anything I can understand :-(

crobinson42 avatar Nov 07 '19 21:11 crobinson42

image

crobinson42 avatar Nov 07 '19 21:11 crobinson42

My solution was to define a Reactotron "custom command":

// App.js

...

const AppRoot = () => {
  const [showStorybook, setShowStorybook] = useState(false)

  Object.defineProperty(global, 'showStorybook', {
    configurable: true,
    get() {
      return showStorybook
    },
    set(value) {
      setShowStorybook(Boolean(value))
      return Boolean(value)
    },
  })

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Provider store={state}>
        {global.showStorybook ? <StorybookUI /> : <App />}
      </Provider>
    </SafeAreaView>
  )
}
// ReactotronConfig.js

...

Reactotron.onCustomCommand({
  command: 'storybook',
  handler() {
    global.showStorybook = !global.showStorybook
  },
  title: 'Toggle Storybook',
  description: 'Toggle between app and storybook',
})

crobinson42 avatar Nov 07 '19 22:11 crobinson42

Seems like storybookSwitcher function is not defined at first. But if I wait like so setTimeout(() => console.tron.log(Tron.storybookSwitcher), 1). It is defined, but we can't register yet the App with AppRegistry.registerComponent...

martinezguillaume avatar Mar 23 '20 23:03 martinezguillaume