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

How to Pass Value between pages React Native

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>
  );
};
Tags:

2

Answers


  1. 0 
        <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. 0

    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