Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to navigate to a screen using useNavigation() in react native with typescript

$
0
0

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

enter image description here

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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>