storybook-eol/react-native-storybook

Hook on leaveing a story

linonetwo opened this issue · 3 comments

Some component will change Orientation of device, so seems that we need a hook to revert the changing of Orientation on leaving a story.

I think we should be able to do this with a decorator. The basic idea is to wrap the story with a component and run the hook function on componentWillUnmount

storiesOf('Button', module)
  .addDecorator(storyHook({
    componentWillUnmount() {
      // reset screen orientation
    }
  }))
  .add('story - 1', () => (
    <pre>STORY_1</pre>
  ))

That would be much more easy to use. I'm currently having to use redux to do this clean up work for every component.

storiesOf('LineChart', module)
  .addDecorator((getStory) => {
    const store = getNewStore();
    const token = 'e77b3f75-1daa-4ded-b52a-7bbd65f758f5';
    store.dispatch(STORYBOOK.request({ orientation: 'landscape' }));
    store.dispatch(LOGIN.request({ token, jump: false }));
    Orientation.lockToLandscape();
    Promise.delay(2000)
    .then(() => {
      store.dispatch(LOAD_LINE_CHART.request({ areaType: 'Company', jump: false }));
    });
    return (
      <Provider store={store}>
        {getStory()}
      </Provider>
    );
  })
  .add('initial', () => (
    <LineChart areaType="Company" />
  ));

Where STORYBOOK.request({ orientation: 'landscape' }) is an action creator for informing redux to do something special for storybook. If I don't pass orientation: 'landscape' to it, it will reset the orientation.

Please open an issue over at the new repo if you're still experiencing this issue, thanks!