React Native Passing Value Between Screens.

Syntax

To pass data between screens in React Native, the navigate function provided by react-navigation library can be used. The navigate function accepts a second parameter called params that can be used to pass data to the destination screen.

navigation.navigate('RouteName', { paramName: value });

The getParam function can be used to retrieve passed parameters in the destination screen.

navigation.getParam('paramName', defaultValue);

Example

In the following example, we will pass a user's name from the Home screen to the Profile screen.

// HomeScreen.js
function HomeScreen({ navigation }) {
  const [name, setName] = useState('');

  const onPress = () => {
    navigation.navigate('Profile', { name });
  };

  return (
    <View style={styles.container}>
      <TextInput
        onChangeText={setName}
        value={name}
        placeholder="Enter your name"
      />
      <Button onPress={onPress} title="Go to Profile" />
    </View>
  );
}

// ProfileScreen.js
function ProfileScreen({ navigation }) {
  const name = navigation.getParam('name', '');

  return (
    <View style={styles.container}>
      <Text>Welcome, {name}</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Output

When the user enters their name in the Home screen and navigates to the Profile screen, the Profile screen will display a welcome message with the user's name.

Explanation

In the above example, we are using react-navigation to navigate between screens. When the user presses the button in the Home screen, we pass the user's name to the Profile screen using the navigate function with the params object.

In the Profile screen, we retrieve the passed parameter using the getParam function. If the parameter is undefined, we provide a default value of an empty string.

Use

Passing data between screens is a common feature in many React Native applications. It allows you to create dynamic and personalized experiences for your users.

Important Points

• The data passed between screens should be simple and not too large.
• Screen components should not depend on their order, but rather on props and state.
• React Navigation offers other functions for passing data and deep linking.

Summary

In this guide, we learned how to use react-navigation to pass data between React Native screens. By using the navigate and getParam functions, we can send and receive data between screens and create dynamic and personalized experiences for our users. Keep in mind the important points and best practices when passing data between screens to ensure that your application is scalable and maintainable.