Title: Troubleshooting “TypeError: No ‘routes’ found in navigation state”
In this blog post, we will explore a common error that developers using the createMaterialTopTabNavigator from React Navigation may encounter. Specifically, the error message “TypeError: No ‘routes’ found in navigation state” will be addressed.
Understanding the Error
When using the createMaterialTopTabNavigator along with two separate screens, such as UpdatesStack and ShopsStack, it is common to encounter navigation issues. The goal is to be able to navigate to other screens from these individual stacks.
<Toptab navigation={this.props.navigation} />However, simply adding this line of code may result in the following red screen error: “TypeError: No ‘routes’ found in navigation state”. This error can be confusing and frustrating to debug, but we have some solutions for you!
Possible Solutions
Solution 1: Export Toptab directly
If you are encountering the “TypeError” while wrapping Toptab with the ParentTheme component, there may be no need for this additional wrapper in your specific use case. Instead, simply export Toptab itself and style it as you would any other component.
Solution 2: Declare the router variable
If you must use the ParentTheme wrapper, you need to ensure that the router from Toptab is accessible in addition to the navigation prop. By adding static router = Toptab.router; to the ParentTheme component, both the router and navigation will refer to the same instance.
If you are using functional React components with hooks, it is important to note that you cannot declare a static variable inside the component. Instead, you can declare the router variable as follows:
const reactComponent = (props) => {
// your component logic and render here
};
reactComponent.router = Toptab.router;
export default reactComponent;Conclusion
In this blog post, we tackled the common error “TypeError: No ‘routes’ found in navigation state” that developers may encounter when using createMaterialTopTabNavigator from React Navigation. We explored two possible solutions, depending on whether you need to wrap Toptab with an additional component or not.
By following these solutions, you should be able to resolve the error and navigate between screens seamlessly. We hope this troubleshooting guide has been helpful, and happy coding!
reference :
https://stackoverflow.com/questions/51675083/typeerror-no-routes-found-in-navigation-state
Read Another Article :
