sending parameter between 2 screens - react-native

Question

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!

Answer 1

Try to change your navigation.navigate() as below:
navigation.navigate("Home", {
username: username,
});

Answer 2

Use params field instead of state to pass parameters.
navigation.navigate('CommonScreens', {
screen: 'Home',
params: { username: username },
});
See Passing params to nested navigators.

Answer 3

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();
  }, []);