Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

using `withNavigation` throws an error

See original GitHub issue

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)

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:11 (5 by maintainers)

Top GitHub Comments

2reactions

stpchcommented, Oct 3, 2018

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.

0reactions

stpchcommented, Oct 3, 2018

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.

Top Results From Across the Web

React native Mobx with navigation and decorator throws an error

When im trying to use React Native Single Store. After injecting into Home Component the store is not visible in props of Home...

Troubleshooting | React Navigation

Now rebuild the app and test on your device or simulator. I'm getting an error "requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager"....

How to handle errors while working with Navigation in ...

How to handle errors while working with Navigation in ReactNative? - Problem: How to handle the error “A navigator can only contain 'Screen' ......

AppShell Page Navigation using Absolute Route URI doesn't ...

throws an exception with navigation fail on WinUI. It works on Android. What am I doing wrong that WinUI doesn't like?

MVC Navigation widget throws error when permissions for ...

When having restricted "View" permissions for Pages and browse a page (with broken permissions inheritance) with navigation widget with a ...