Question 33765 in React native Question posted in
The official React Native documentation can be found here.

React Native Navigation, How do I navigate to another screen after pressing the button of an alert?

I am new to Javascript and React Native and I’m confused why the following code doesn’t navigate me to my other screen:

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName = "Home">
        <Stack.Screen name = "Home" component = {HomeScreen} />
        <Stack.Screen name = "Login" component = {LoginScreen} />
        <Stack.Screen name = "Register" component = {RegisterScreen}/>
        <Stack.Screen name = "Hub" component = {HubScreen}/>
        <Stack.Screen name = "NewList" component = {NewListScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function RegisterScreen({navigation}) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Registration</Text>
      <TextInput 
        style={styles.input} 
        placeholder="Username"
        onChangeText={(text) => setUsername(text)}
      />
      <TextInput 
        style={styles.input} 
        placeholder="Password"
        onChangeText={(text) => setPassword(text)}
      />
      <Button
        title="Register"
        onPress = {() => Register(username, password)}
      />
    </View>
  )
}


function Register(username, password){
  Alert.alert("All Done!", "You have successfully registered.", {text: "OK", onPress: () => {navigation.navigate('Home')}})
}

I want function Register to show an alert where the user can press ok and for them to be redirected back to the home screen. The alert apears however pressing okay doesn’t navigate back to the Home screen. From what I’ve read on the React Native Navigation docs function Register somehows needs access to navigation parameter but im confused on how to practically do that.

I tried using useNavigation(); but I kept getting a hook call error.
I have also tried NavigationRef but with no success. I have also tried putting Register inside RegisterScreen. Also tried having navigation as a parameter of Register. No change in output.

Tags:

2

Answers


  1. 0

    try put Register function inside RegisterScreen

    edit:
    The third prop of Alert.alert is an object array, i wonder why you didn’t get an error there

    Alert.alert("All Done!", "You have successfully registered.", [{text: "OK", onPress: () => {navigation.navigate('Home')}}])
    Login or Signup to reply.
  2. 0

    you should define the Register() inside the RegisterScreen component like following..

    function RegisterScreen({navigation}) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

function Register(username, password){
  const user = new User(username, password);
  //const navigation = useNavigation();
  user_array.push(user)
  console.log(user_array[0].username)
  Alert.alert("All Done!", "You have successfully registered.", [{text: "OK", onPress: () => {navigation.navigate('Home')}}])
}

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Registration</Text>
      <TextInput 
        style={styles.input} 
        placeholder="Username"
        onChangeText={(text) => setUsername(text)}
      />
      <TextInput 
        style={styles.input} 
        placeholder="Password"
        onChangeText={(text) => setPassword(text)}
      />
      <Button
        title="Register"
        onPress = {() => Register(username, password)}
      />
    </View>
  )
}

    or you can pass the navigation in Register function params like this

    Register(username, password, navigation)

    function Register(username, password, navigation){
  const user = new User(username, password);
  user_array.push(user)
  console.log(user_array[0].username)
  Alert.alert("All Done!", "You have successfully registered.", [{text: "OK", onPress: () => {navigation.navigate('Home')}}])
}

    and you can see user_array is not defined here
    and what is the meaning of this line const user = new User(username, password);

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search