Search code examples
react-nativereact-navigationtabbar

Can not able to navigate to child screens


My initialRouteName is loginScreen.

After signin Second screen came with BottamTabNavigation. BottomTab contain 4 screens and one of the screen named GroupScreen go to TopTabScren. I am not able to navigate To this screen.

The flow is --> loginScreen --> BottomTabScreen --> TopTabScreen.

I am not able to navigate to TopTabScreen. It gives error

"undefined is not an object(evaluating'this.props.navigation.navigate' ".

TopTabScreen leades to further 4 Screens

But when I set InitailRoutName= "TobTabScreen" then all the four screen work with that.

For navigation screens i am using this .

onPress={() => this.props.navigation.navigate('screenName')}.  

enter image description here


Solution

  • from the looks of it, you are taking a misunderstanding of how navigation works! in a react native app's subcomponent system.

    If a component is wrapped as a screen in the navigator object while creating it will have direct access to navigation prop!

    but if you have sub-component which is inside the render of a component and it is not a screen ( for sure) then you have to manually pass navigation as a prop to it!

    Which in my sense is not a good approach at all! but in your case, it will work

    NOTE : IF I AM CORRECT POST YOUR CODE OF SUBCOMPONENTS! AND I WILL HELP SHOWING THE EXAMPLE