skip to Main Content

I’m very new to react native and am trying to pass two inputs between two pages by pressing a button but i’m not sure where i’m going wrong. My intention is to have one variable be "Book name" and the second be "number of pages". Any help would be very appreciated.

Page 1

const FirstPage = ({navigation}) => {
  const [userName, setUserName] = useState('');
    return (
        <SafeAreaView style={{flex: 1}}>
          <View style={styles.container}>
            <Text style={styles.heading}>
              React Native Pass Value From One Screen to Another
              Using React Navigation
            </Text>
            <Text style={styles.textStyle}>
              Please insert your name to pass it to second screen
            </Text>
            {/*Input to get the value from the user*/}
            <TextInput
              value={String}
              onChangeText={(bookname) => setUserName(bookname)}
              placeholder={'Enter Any value'}
              style={styles.inputStyle}
            />
            
            <TextInput
              value={String}
              onChangeText={(pagenum) => setUserName(pagenum)}
              placeholder={'Enter Any value'}
              style={styles.inputStyle}
            />
            <Button
              title="Go Next"
              //Button Title
              onPress={() =>
                navigation.navigate('SecondPage', {
                  paramKey: pageNum,
                  paramKey: bookName,
                })
              }
            />

Page 2

const SecondPage = ({route}) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={styles.heading}>
          React Native Pass Value From One Screen to Another
          Using React Navigation
        </Text>
        <Text style={styles.textStyle}>
          Values passed from First page: {route.params.paramKey}
        </Text>
      </View>
    
    </SafeAreaView>
  );
};

2

Answers


  1.     <Button
          title="Go Next"
          //Button Title
          onPress={() =>
            navigation.navigate('SecondPage', {
              paramKey: pageNum,
              paramKey: bookName,
            })
          }
        />
    

    You could use a shorthand:

        <Button
          title="Go Next"
          //Button Title
          onPress={() =>
            navigation.navigate('SecondPage', {
              pageNum, // same like pageNum: pageNum
              bookName,//           bookName: bookName
            })
          }
        />
    

    Access params:

     const SecondPage = ({route}) => {
      return (
        <SafeAreaView style={{flex: 1}}>
          <View style={styles.container}>
            <Text style={styles.heading}>
              React Native Pass Value From One Screen to Another
              Using React Navigation
            </Text>
            <Text style={styles.textStyle}>
              Values passed from First page: {route.params.pageNum}
            </Text>
    
            <Text style={styles.textStyle}>
              Values passed from First page: {route.params.bookName}
            </Text>
          </View>
        
        </SafeAreaView>
      );
    };
    
    Login or Signup to reply.
  2. Here you can find a full example

    import * as React from 'react';
    import { Pressable, View, Text } from 'react-native';
    import { NavigationContainer } from '@react-navigation/native';
    import {
      createStackNavigator,
      HeaderBackButton,
    } from '@react-navigation/stack';
    import { useNavigation, useRoute } from '@react-navigation/native';
    
    function ScreenOne() {
      const navigation = useNavigation();
      const route = useRoute();
    
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Screen {route?.params?.passedValue}</Text>
          <Pressable
            onPress={() => navigation.navigate('Two', { passedValue: 'Two : 2'})}
            style={{ backgroundColor: 'plum', padding: 10 }}>
            <Text>Navigate an pass</Text>
          </Pressable>
        </View>
      );
    }
    
    
    const Stack = createStackNavigator();
    
    function App() {
      return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="One" component={ScreenOne} />
            <Stack.Screen name="Two" component={ScreenOne} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
    
    export default App;
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search