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.

navigation.state is undefined when navigating back from materialTopTabNavigatior

See original GitHub issue

When a sharedElementStack has a nested materialTopTabNavigator inside as a screen, an exception TypeError: undefined is not an object (evaluating 'navigation.state') pops up when trying to go back from it. An example:

const TabScreen = createMaterialTopTabNavigator(
  {
    InsideOne: { screen: InsideOne },
    InsideTwo: { screen: InsideTwo },
  }
)

const SharedStack = createSharedElementStackNavigator(
  {
    Main: { screen: MainScreen },
    TabScreen: { screen: TabScreen }
  }
)

When navigating to the TabScreen and then navigating back by tapping on the back arrow, the app crashes as soon as the transition is done.

Issue Analytics

State:
Created 4 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

TheTimeWalkercommented, Feb 27, 2020

I had two reproducible cases where it crashed and tested it out quickly. It seems like this is now both fixed with 2.1.0, thank you!

1reaction

IjzerenHeincommented, Feb 22, 2020

I’ve fixed the issue and release a new version 👍 https://github.com/IjzerenHein/react-navigation-shared-element/releases/tag/v2.1.0

Top Results From Across the Web

React-native navigation state 'undefined' at the very beginning

I'm trying to check the navigation state via hooks: const state = useNavigationState(state => state);. The hooks itself works pretty well.

Material Top Tabs Navigator | React Navigation

A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or...

A Complete Guide to React Native Navigation | by Allan Graves

A navigation container is required — it sets up the state required for screens to persist, track which screen you are on, and...

Track the Current Route in React Navigation V5 Outside Of a ...

React Navigation 5.x has useful hooks that are great when you ... if (state.index === undefined || state.index < 0) { return undefined;...

React Native Passing Value between Screen - Javatpoint

This function is used to navigate between the different screens. ... Component {; constructor(props) {; //constructor to set default state; super(props); ...