How to Pass Value between pages React Native

Question

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

Answer 1

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;