Passing values from one function to another with React navigation 5

vincent Published at Dev

Vincent

I would like to pass the value "Hello" from App.js to screen1.js. Snack: https://snack.expo.io/@mobshed/passing-data-between-functions

Thank you for your help!

App.js

import React, { useState, useEffect, Component } from "react";
import MyScreen from './screen1'

export default function Root() {
    return <MyScreen show="Hello" />;
}

screen1.js

import { NavigationContainer } from "@react-navigation/native";
import {
  createStackNavigator
} from "@react-navigation/stack";
const Stack = createStackNavigator();

function screenPage ({show}) {
  alert(show)
  return (<View style={{ justifyContent: "center", flex: 1}}><Text>Hello world</Text></View>)
}

export default function Root({ navigation }) {
  return (
    <NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerTitleAlign: "center",
        gestureEnabled: false,
        gestureDirection: "horizontal"
      }}
    >
      <Stack.Screen
        options={{
          headerShown: false
        }}
        name="screenPage"
        component={screenPage}
      />   
    </Stack.Navigator>
     </NavigationContainer>
  );
}

Khanh Le Tran

in screen1.js:

import { NavigationContainer } from "@react-navigation/native";
import {
  createStackNavigator
} from "@react-navigation/stack";
const Stack = createStackNavigator();

function screenPage ({route}) {
  const {show} = route.params;
  alert(show);
  return (<View style={{ justifyContent: "center", flex: 1}}><Text>Hello world</Text></View>)
}

export default function Root({ navigation, show }) {
  return (
    <NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerTitleAlign: "center",
        gestureEnabled: false,
        gestureDirection: "horizontal"
      }}
    >
      <Stack.Screen
        options={{
          headerShown: false
        }}
        name="screenPage"
        component={screenPage}
        initialParams={{show: show}}
      />   
    </Stack.Navigator>
     </NavigationContainer>
  );
}

Another way, you can pass params something like this:

<Button
        title="Done"
        onPress={() => {
          // Pass params back to screenPage
          navigation.navigate('screenPage', { show: "hello" });
        }}
      />

Collected from the Internet

Please contact [email protected] to delete if infringement.