global state react native

Question

I just developev some app with react native and in my code I'm just receive mobile phone in state .how to set this state in global and use in another screen like as OTP screen how to use this in another screen. I use react native router flux. Can I send this data in second variable in next screen?

react native .049
phpstorm
android studio

export default class Login extends Component{
  constructor(props) {
    super(props);
    this.state = {mobile: ''};



    this._OtpButton = this._OtpButton.bind(this);

}



  _OtpButton() {

            fetch("https://2d44f003.ngrok.io/mobileWebViews/v1/sendOtp/", {
                method: "POST",
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                     mobile:this.state.mobile,
                     type:'otp'
                })
            })
                    .then(response => response.json())
                    .then(responseJson => {
                        if(responseJson.status.toString() === 'ok'){
                            // this.global.mobile = mobile;

                            Alert.alert('پیامک ارسال شد');
                            Actions.replace('OTP');


                        }else if(responseJson.status.toString() === 'fail') {
                            Alert.alert(responseJson.message.toString());
                        }else{
                            Alert.alert(responseJson.message.toString());
                        console.log(responseJson.message)
                        }

                    })
                    .catch(error => {
                        Alert.alert("Error"+JSON.stringify(error));
                        // console.error(error);
                    })
        }


  render() {


    return (

       <View style={styles.container}>
       <Image source={require("./assets/img/login.jpg")} 
       style={{
                        flex: 1,
                        position: 'absolute',
                        width: '100%',
                        height: '100%',
                        justifyContent: 'center',
                    }}

                    />

              <View style={styles.LoginBox}>
                  <Text style={styles.LoginTitel}>   ورود به بوتیک</Text>
                          <View style={styles.inputGroups}>

                            <TextInput
                              style={styles.inputText}
                              underlineColorAndroid='transparent'
                              placeholder="شماره موبایل (مثال ۰۹۱۲۱۲۳۴۵۶۷)"
                              keyboardType={'numeric','number-pad'}
                              onChangeText={(mobile) => this.setState({mobile})}

                            />

                        </View>
                        <TouchableOpacity activeOpacity={.8} onPress={this._OtpButton}>
                        <Text style={styles.ButtonEnter}>دریافت رمز از طریق پیامک</Text>
                        </TouchableOpacity>

                        <TouchableOpacity activeOpacity={.8} onPress={()=>Actions.replace('Login2')}>
                        <Text style={styles.ButtonPass}>ورود با نام کاربری و پسورد</Text>
                        </TouchableOpacity>

                        <Text> </Text>
                        <TouchableOpacity activeOpacity={.8} onPress={()=>Actions.replace('register')} >
                        <Text style={styles.forgetPass}>ثبت نام فروشگاه جدید</Text>
                        </TouchableOpacity>

                </View>
                <Image/>

      </View>
    );
  }
}

Answer 1

Yes, you can pass props between scenes.

This is how you would accomplish this with react-native-router-flux:

Actions.yourSceneName({ whatever: responseFromServer });

Then in the next scene, you would access the passed value with:

this.props.whatever

If you wanted to save it globally and NOT use a state management library like MobX or Redux, you can use AsyncStorage to save it into the phones memory. That would look something like:

AsyncStorage.setItem('whatever', JSON.stringify({ valToBeSaved }));

And to retrieve that value you would do something like:

 AsyncStorage.getItem('whatever');