Using expo-keycloak-auth

https://www.npmjs.com/package/expo-keycloak-auth

I am trying to add the login to an existing screen. I am able to login successfully. I want the user to be able to click a button to navigate to the new screen. this is the code (almost identical to the example on github)

export const Auth = () => {
 
  const {
    ready, // If the discovery is already fetched and ready to prompt authentication flow
    login, // The login function - opens the browser
    isLoggedIn, // Helper boolean to use e.g. in your components down the tree
    token, // Access token, if available
    logout, // The logout function - Logs the user out
  } = useKeycloak();
  if (!ready) return <ActivityIndicator />;

  if (!isLoggedIn)
    
    return (
      <View  style={styles.ViewRr}>

<ButtonSolid style={{ fontSize: 20, marginTop: 24 }} onPress={login} title="Login" title={'Log in'}   />
     </View>
    );

  return (
    <View style={{ margin: 24 }}>
      <Text  style={{ fontSize: 17, marginBottom: 24 }}>Successfully Logged in!</Text>
      <TextInput value={token}></TextInput>
      <Text></Text>
      <ButtonSolid  style={{ fontSize: 20, marginBottom: 24 }}
         onPress={() => {
          try {
            navigation.navigation(‘MainNav’, { screen: ‘Startup });
          } catch (err) {
            console.error(err);
          }
        }}
        style={[
          styles.ButtonSolidIM,
          { backgroundColor: "#000" },
        ]}
        title={'Log In'}
            title={'Continue'}
          />
      <Button onPress={logout} title={"Logout"} style={{ marginTop: 24 }} />
    </View>
  );
};

I am adding that to my screen like so

const LoginScreen = props => {
   
  const { navigation } = props;

 return (
    <ScreenContainer hasSafeArea={true} scrollable={true}>
      <KeycloakProvider {...keycloakConfiguration}>
    <Auth/>
      </KeycloakProvider>
    </ScreenContainer>

the problem is that navigation is not available in the Auth() function. is there a way to pass it in or am I doing this completely wrong?

CodePudding user response：

You have to pass navigation from LoginScreen as prop to Auth component:

const Auth = (props) => {

     props.navigation...
  }

and in LoginScreen:

...
<Auth navigation={navigation} />
...