Passing parameters between stacks / screens - react-native

Question

I am struggeling with passing parameters between stacks / screens.
I have the following app container with several stacks:
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Auth: AuthStack,
Tab: TabStack,
Menu: MenuStack
},
{
initialRouteName: 'AuthLoading',
}
));
In the Auth Stack I have the Login Screen. After login I would like to pass the userName to the other stacks, e.g. in order to establish a web socket connection to my XMPP server.
this.props.navigation.navigate('Tab', { userName: loginData.username })
Unfortunately, I don't have any idea how to access the userName parameter. I will always get undefined when calling navigation.getParam('userName') (I can confirm that loginData.username is not undefined).
Is it correct that parameters are not passed between stacks?
If yes then I know at least the reason for this behavior. But how can I pass the userName then (I read that AsyncStorage is a kind of an anti-pattern for these kind of information and setting up Redux for this case seems a bit over-engineered) ?

Answer 1

In the route you've gone to, you can access your parameters like this:
this.props.navigation.state.params.userName
This is located under "Summary" at the bottom of the documentation page. It's always worth checking if params is not null, since if there's no params this.props.navigation.state.params returns null.
if(this.props.navigation.state.params && this.props.navigation.state.params.userName) {
//do something
}
This was the original way of getting route params before the navigate.getParam() function was introduced in 2.X

Answer 2

I would highly recommend you checkout this package:
https://github.com/vonovak/react-navigation-props-mapper
Simplifies this flow a lot.

Answer 3

I could fix my issue by navigating to a concrete route instead of the stack name.
this.props.navigation.navigate('Map', { userName: loginData.username });
So Map route is part of the TabStack

Answer 4

It seems that it NOT possible to pass parameters to a "stack". It seems that parameters can only be passed to a "screen."
Passing parameters to a nested screen (a "screen", which is part of a "stack") has a different approach than passing parameters to a "screen", which is defined as a "tab".
// example of a stack definition
const Stack_1 = () => {
const MyStack = createStackNavigator();
return (
<MyStack.Navigator>
<MyStack.Screen name="Screen_1_in_Stack_1" component={Screen_1_in_Stack_1} />
</MyStack.Navigator>
);
};
// example for passing parameters to a screen, which is part of a stack:
navigation.navigate('Stack_1', {
screen: 'Screen_1_in_Stack_1',
params: { userID: '123' },
});