I wanted to use useNavigation
to navigate to a screen.Below is my code:
MainNav.tsx:
const defaultNavigationOptions: StackNavigationOptions = { ... ... ... headerRight: (props) => { return <AccountHeaderComponent tintColor={props.tintColor} />; }, ... ... ...};const MainNavigator = () => {return (<MainStack.Navigator><MainStack.Screen name={"VerificationScreen} component={VerificationScreen} /></MainStack.Navigator> );};
This created a header with a profile icon like in below image.
when clicked on it, it will go to component AccountHeaderComponent
AccountHeaderComponent.tsx:
import AccountsPopUpComponent from "./AccountsPopUpComponent";export interface AccountHeaderComponentProps { tintColor?: string,}const AccountHeaderComponent = (props: AccountHeaderComponentProps) => { const {tintColor} = props;} return (<><Modal><AccountsPopUpComponent/></Modal><TouchableOpacity><View><Icon name={'account-outline'}/></View></TouchableOpacity></></> )};
Notice that Here I am having a component called AccountsPopUpComponent
AccountsPopUpComponent.tsx:
const AccountsPopUpComponent = (props: any) => { const {onClose} = props; const getCurrentPage = () => { switch (page) { case '': return <ProfileComponent /> default: return <DummyComponent/> } } return (<View style={{flex: 1}}>{getCurrentPage()}</View> )};
Finally I have a ProfileComponent
from which I want to navigate to VerificationScreen
, which is in the main navigator.
ProfileComponent.tsx:
const ProfileComponent = (props: ProfileComponentProps) => { const navigation = useNavigation(); const gotoVerifyScreen= () => { navigation.navigate(VerificationScreen); }; return (<><VerifyRibbonComponent gotoOTP={gotoVerifyScreen} /></> );};
here in gotoVerifyScreen
I have used useNavigation
to go to verify screen, it doesn't take me to that screen, but if I click back button of my device then I can see that screen. This is not the kind of functionality which I wanted. I want to see that screen when I click on VerifyRibbonComponent
. I have tried very hard, but unable to find the mistake which I am doing