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!

CodePudding user response：

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

navigation.navigate("Home", {
            username: username,
        });

CodePudding user response：

Use params field instead of state to pass parameters.

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

See Passing params to nested navigators.