Styjun

I'm actually doing a login system and when my user is logged, the login component has to send data to my main screen but I don't really understand how to do it.

Actually I've this when user is logged :

User.username = data.username;
User.id = responseJson.id;
User.token = responseJson.token;
this.props.navigation.navigate('Main', User: User );

User is where everything is saved and it works.

Data is sended to Main a Switch Navigates inside an AppContainer :

export default createAppContainer(createSwitchNavigator(
 
 Auth: screen: AuthStack, navigationOptions: tabBarVisible: false ,
 Main: screen: MainStack ,
 ,
 
 initialRouteName: "Auth"
 ),
);

so it goes on Mainstack who's a bottomTabNavigator and works like that :

const MainStack = createBottomTabNavigator(
 {
 Services: 
 screen: Home,
 navigationOptions: 
 tabBarLabel:"Services",
 tabBarIcon: ( tintColor ) => (
 <Icon name="home" size=30 color="#0033CC" />
 )
 ,
 ,

I know it's not complete I've other screens not only Services, just wanted to avoid too long function on paste.

So is that possible to send this data "User" to my Home screen ?
I'm open to any suggestion or answer, that's my first react Native project so there is maybe some mistakes :)

You'll probably want to persist the user data in the app (save it in the storage for when the user leaves the app then enters he stays logged in). That's why react-navigation has the switchNavigator (the one you are using). In order to persist data, you can use the AsyncStorage to save the user data and in the switch navigator constructor check whether the user data is already available in the storage or not then decide whether to navigate to the app or the authentication page. In fact React Navigation provides an example on this: https://reactnavigation.org/docs/en/auth-flow.html . Since you're new to RN, here's an extra tip on managing data: you can use a State in every component that is only for that specific component (which is also reactive), you can use global data (store) shared between all the components in the app (check react redux/flux/mobx), you can share data from parent components to children components by passing data/functions in the props (aka attributes), and you can use the new React context api to use a provider (also like a store shared between parent and children components)

I've made something maybe a bit more understandable :

I get my user data in component login from an external api and it works well. To go from login to home I'm using this :

this.props.navigation.navigate('Main', User: User)

So it goes on Main who opens Mainstack Screen who's a bottomTabNavigator and if I don't do any mistakes my User data that I've sent is on this Mainstack but I don't know how to get it and how to share it to the other components.
Every component got his own js file, there is only the App container and Authstack/Mainstack that are on the same file.

Hope you understood it !