using `withNavigation` throws an error

[xaviramirezcom]

Wrapping a component with withNavigation throws the following error:

Invariant Violation: Invariant Violation: withNavigation can only be used on a view hierarchy of a navigator. The wrapped component is unable to get access to navigation from props or context.

This error is located at:
    in withNavigation(TransitionableBottomSheet) (at Screen1.js:35)
    in RCTView (at View.js:60)
    in View (at Screen1.js:26)
    in Screen1 (at FluidTransitioner.js:367)
    in RCTView (at View.js:60)
    in View (at createAnimatedComponent.js:154)
    in AnimatedComponent (at TransitionRouteView.js:39)
    in TransitionRouteView (at FluidTransitioner.js:361)
    in RCTView (at View.js:60)
    in View (at TransitionItemsView.js:106)
    in TransitionItemsView (at FluidTransitioner.js:210)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:141)
    in Transitioner (at FluidTransitioner.js:71)
    in FluidTransitioner (at createFluidNavigator.js:35)
    in FluidNavigationView (at createNavigator.js:59)
    in Navigator (at createNavigationContainer.js:376)
    in NavigationContainer (at App.js:11)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

This error is located at:
    in NavigationContainer (at App.js:11)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

[chrfalch]

Hi, @xaviercobain88 - thanks for submitting an issue. To be able to investigate we need a little more context. The best thing would be a short snack on Expo - or a description of what you're trying to do, why and how you reproduce this issue. Otherwise it'll be closed :-)

[etodanik]

@chrfalch I'm also getting this issue. Didn't have to do anything special, just apply withNavigation to any element other than the screen itself.

[chrfalch]

@israelidanny: But I need to know what you are trying to accomplish - why use withNavigation() - to get a clearer understanding of the use case. That's why I have attached the Reproduction Needed label to the issue :-)

[etodanik]

@chrfalch I'm using withNavigation() for its' official documented use: To be able to use the navigation prop without having to drill it down through the whole tree to my specific component.

[chrfalch]

Ok, would it be possible to create a simple reproduction using http://snack.expo.io?

[etodanik]

This seems to reproduce it (however instead of showing the error message it loses connection with device): https://snack.expo.io/HkpaLcJYQ

[chrfalch]

Try adding the following (satic router...) to the exported class (just like in the examples):

export default class App extends Component {
  static router = Navigator.router;
  render() {
    return (
       <Navigator/>
    );
  }
}

[rekiandewandaru]

im also getting this issue im trying to call "this.prop.navigation." inside component by importing withNavigation

[chrfalch]

I've tested out the snack in my debugger, and the same error occurs when using createStackNavigator as with FluidNavigator. You should all probably try to find out if this is an issue with your navigation setup. I'm closing this one for now. @Rekian @israelidanny @xaviercobain88

[stpch]

I'm running into the same issue. Replacing FluidNavigator(...) with createStackNavigator(...) fixes it, so it seems to be a problem with react-navigation-fluid-transitions.

[stpch]

Here is a reproducible example: https://snack.expo.io/rkkqMjWqQ

If you go to Router.js and use createStackNavigator instead, it'll work. I used react-navigation-fluid-transitions@2.6 because newer versions throw a dependency error in Expo.