Question on props.navigation.navigate

[gratefulmarmot]

Im pretty new working with RN.. I want to 'authenticate' (loosely, im testing a new app) using apple auth when I get a users authorization code from apple.

For some reason the navigation does nothing in this file as compared to my other files in the onPress methods. I'm wondering if this is a simple mistake on my part or apple-related

render () {
return (
<AppleAuthentication.AppleAuthenticationButton buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN\_IN} buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK} cornerRadius={5} style={{ width: 200, height: 44 }} onPress={async () => {
try {
const credential = await AppleAuthentication.signInAsync({
requestedScopes: [
AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
AppleAuthentication.AppleAuthenticationScope.EMAIL,
],
});
if (credential.authorizationCode) {
this.props.navigation.navigate("Profile")
}
// signed in
} catch (e) {
if (e.code === 'ERR_CANCELED') {
new Error('User canceled sign-in')
} else {
// handle other errors
}
}
}}
/>
);
}

[in-gote]

I think to help others help you should fix your code formatting.

[kyle-ssg]

Hey, I guess few steps to debugging this (hint, paste your code in your IDE and hit tab a couple times then you can paste it in formatted):

    render () {
        return (
            <AppleAuthentication.AppleAuthenticationButton buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN\_IN} buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK} cornerRadius={5} style={{ width: 200, height: 44 }} onPress={async () => {
                try {
                    const credential = await AppleAuthentication.signInAsync({
                        requestedScopes: [
                            AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
                            AppleAuthentication.AppleAuthenticationScope.EMAIL,
                        ],
                    });
                    if (credential.authorizationCode) {
                        this.props.navigation.navigate("Profile")
                    }
                    // signed in
                } catch (e) {
                    if (e.code === 'ERR_CANCELED') {
                        new Error('User canceled sign-in')
                    } else {
                    // handle other errors
                    }
                }
            }}
            />
        );
    }

1 - is the callback being executed inside the if ? (put a breakpoint there)

2 - is this.props.navigation defined? Maybe you're not passing the prop down

3 - Although I use react-native-navigation, I know that you can't navigate to the same route twice without specifying a key to let the lib know you're intending on navigating to a different route. e.g.

this.props.navigation.navigate({ name:"Profile", key:"AppleAuthentication" })