rfcs icon indicating copy to clipboard operation
rfcs copied to clipboard

<StaticNavigator> for tests/storybook

Open slorber opened this issue 5 years ago • 14 comments

Hi,

I have screens on which some components are "connected" to react-navigation through withNavigation() hoc (a screen navbar header actually)

I want to be able to render these components in envs like tests or RN storybook, but by default it fails because no navigation is found in React context.

I don't really care if when pressing the backbutton it does not really do anything (ie the navigation action is ignored because unknown), as long as it renders.

The current workaround does not look very idiomatic, and I think having an official support for this feature could be helpful

Here's my solution for Storybook:

const reactNavigationDecorator: StoryDecorator = story => {
  const Screen = () => story();
  const Navigator = createAppContainer(createSwitchNavigator({ Screen }))
  return <Navigator />
}

storiesOf('ProfileContext/Referal', module)
  .addDecorator(reactNavigationDecorator)
  .add('Referal', () => <ReferalDumb />)

I'd find this more idiomatic to do:

storiesOf('ProfileContext/Referal', module)
  .addDecorator(reactNavigationDecorator)
  .add('Referal', () => (
    <StaticNavigator>
      <ReferalDumb />
    </StaticNavigator>
  ))

This would be quite similar to the <StaticRouter/> of react-router

slorber avatar Jan 25 '19 10:01 slorber