Passing of variables assigned from one screen to another - react-native

Question

basically I need to pass over a parameter called tempRole over from Login to MainTabNavigator and create tabs accordingly to user role. For example, vendor have 4 tabs and others just 3 tabs. However, I can't seem to get the role passed over though.
From Login
import React from 'react';
import { Text, View, StyleSheet, Platform, TextInput, TouchableOpacity } from 'react-native';
import firebase from 'firebase';
import { Container, Form, Item, Label, Input, Button } from "native-base";
import * as FirebaseAPI from '../modules/firebaseAPI';
import MainTabNavigator from '../navigation/MainTabNavigator';
import bottomTabNavigator from '../navigation/MainTabNavigator';
export default class LoginScreen extends React.Component {
constructor(props) {
super(props);
}
static navigationOptions = {
title: 'Login',
};
state = {
LoginEmail: "",
LoginPassword: "",
};
componentDidMount() {
this.watchAuthState(this.props.navigation)
try {
window = undefined;
} catch (e) {
}
}
watchAuthState(navigation) {
firebase.auth().onAuthStateChanged(function(user) {
console.log('onAuthStateChangedLOGIN: ', user)
if (user) {
// user.displayName will be like vendor.Peter
// e.g. role.name
var tempName = user.displayName;
navigation.navigate('Main', {
userRole: tempName.substr(0,tempName.indexOf('.'))
});
}
});
}
signIn(LoginEmail, LoginPassword) {
FirebaseAPI.signInUser(LoginEmail, LoginPassword);
}
render() {
return (
<Container style={styles.container}>
<Form>
<Text style={styles.text}>Login</Text>
<Item style={styles.standardDefaultInput} floatingLabel>
<Label style={{textAlign: 'center'}}>Email (example#example.com)</Label>
<Input
autoCapitalize="none"
style={{textAlign: 'center'}}
autoCorrect={false}
onChangeText={(text) => this.setState({LoginEmail: text})}
value={this.state.LoginEmail}
/>
</Item>
<Item style={styles.standardDefaultInput} floatingLabel>
<Label style={{textAlign: 'center'}}>Password (min. 6 charatcers)</Label>
<Input
autoCapitalize="none"
style={{textAlign: 'center'}}
autoCorrect={false}
onChangeText={(text) => this.setState({LoginPassword: text})}
value={this.state.Password}
/>
</Item>
<Button style={styles.standardDefaultButton} onPress={() => this.setState(this.signIn(this.state.LoginEmail, this.state.LoginPassword))} full rounded success>
<Text>Log In</Text>
</Button>
<Button style={styles.standardDefaultButton} onPress={() => this.props.navigation.navigate('SignUp')} full rounded link>
<Text>Sign Up</Text>
</Button>
</Form>
</Container>
);
};
}
Do take note that the navigation to Main is to the TabNavigator
From MainTabNavigator
let bottomTabNavigator = null
//let user = navigation.getParam(user)
//let userRole = user.displayName.substr(0,user.displayName.indexOf('.'))
//const { navigation } = this.props;
// The above failed
let userRole = navigation.getParam('userRole');
if (userRole == "vendor") {
bottomTabNavigator = createBottomTabNavigator({
HomeStack,
ListingStack,
CalendarStack,
ProfileStack
});
} else {
bottomTabNavigator = createBottomTabNavigator({
HomeStack,
CalendarStack,
ProfileStack
});
}
export default bottomTabNavigator

Answer 1

Use the global function to pass the value.
Global functions are useful when you need to pass data to a screen that is not a relationship between parents and children.
Global function Screen:
let NICKNAME = "";
function setNickName(data) {
NICKNAME = data;
}
function getNickName() {
return NICKNAME;
}
export {setNickName,getNickName }
senddata Screen:
import {setNickName} from "GlobalFunctionScreen"
...
this.state={
data: "sendData"
}
...
componentDidMount(){
setNickName(this.state.data);
}
receive data Screen:
import {getNickName} from "GlobalFunctionScreen"
...
componentDidMount(){
data = getNickName();
alert(data);
}