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

sending parameter between 2 screens – React native

React-native noob here,

I have 2 screens. Users fill in their name on a screen called InputName and then when they click a button they go to HomeScreen and should see their name on that screen. I am using React Navigation to navigate between screens. The code on InputName Screen looks as follows:

const InputName = ({ navigation }) => {
const [username, setUsername] = useState('');

const handleName = async () => {
    if (!username.trim()) {
        alert('Please fill in a name')
    } else {
        navigation.navigate("CommonScreens", {
            screen: "Home",
            state: {
                username: username,
            },
        });
        console.log(username)
        AsyncStorage.setItem("hasSeenWelcome", "true");
    }
}

Once the user presses a button, handleName is executed.
On the InputName Screen users fill in their name in a TextInput that has the following code:

<TextInput
 style={style}
 placeholder="Fill in your name here"
 onChangeText={text => setUsername(text)}
/>

The screen where I’m trying to retrieve this username is HomeScreen. The code I’m using to retrieve it is as follows:

const HomeScreen = ({ navigation, route }) => {
    let username = route.params?.username;
    {console.log(username)}

As you can see I have console.log on both InputName screen and HomeScreen. In InputName I get the value that I filled in and in HomeScreen it comes back as undefined.

EDIT: Navigation structure

function WelcomeStackScreen() {
  return (
    <WelcomeStack.Navigator
      initialRouteName="Welcome"
      screenOptions={{ headerShown: false }}
    >
      <WelcomeStack.Screen name="Welcome" component={WelcomeScreen} />
      <WelcomeStack.Screen
        name="ChooseDepartment"
        component={ChooseDepartment}
      />
      <WelcomeStack.Screen
        name="InputName"
        component={InputName}
      />
    </WelcomeStack.Navigator>
  );
}

function CommonScreensStackScreen() {
  return (
    <CommonScreensStack.Navigator screenOptions={{ headerShown: false }}>
      <CommonScreensStack.Screen name="HomeTab" component={HomeTabScreen} />
      <CommonScreensStack.Screen name="QuizScreen" component={DilemmasScreen} />
      <CommonScreensStack.Screen name="UitlegScreen" component={UitlegScreen} />
      <CommonScreensStack.Screen
        name="PrivacyPolicy"
        component={PrivacyPolicy}
      />
      <CommonScreensStack.Screen
        name="AlgemeneVoorwaarden"
        component={AlgemeneVoorwaarden}
      />
      <CommonScreensStack.Screen
        name="ChooseDepartment"
        component={ChooseDepartment}
      />
      <CommonScreensStack.Screen
        name="Toelichting"
        component={ToelichtingScreen}
      />
      <CommonScreensStack.Screen name="Results" component={ResultScreen} />
    </CommonScreensStack.Navigator>
  );
}

<HomeTab.Navigator
      initialRouteName="Home"
    >
      <HomeTab.Screen name="Results" component={ResultsScreen} />
      <HomeTab.Screen name="Home" component={HomeScreen} />
      <HomeTab.Screen name="Settings" component={SettingsScreen} />
    </HomeTab.Navigator>

Any help/pointers would be greatly appreciated!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Hi thanks for all your answers.

    I have no idea why none of them or my own solution didn't work but I managed to get around it by using AsyncStorage.

    AsyncStorage.setItem("username", username);

    I'm then able to retreive the username in other components/screens like this:

    const [username, setUsername] = useState("");

  useEffect(() => {
    const getUsername = async () => {
      const username = await AsyncStorage.getItem("username");
      setUsername(username);
    };
    getUsername();
  }, []);

  2. 0

    Try to change your navigation.navigate() as below:

    navigation.navigate("Home", {
            username: username,
        });
    Login or Signup to reply.
  3. 0

    Use params field instead of state to pass parameters.

    navigation.navigate('CommonScreens', {
  screen: 'Home',
  params: { username: username },
});

    See Passing params to nested navigators.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search