react native passing value

Question

I am new in React Native and I searched on Google but I only could find old version of React Native.

Actually, I am not sure how to pass state value to other js files I am making Authpage that will redirect to tappage.js if the state value 'isValid' becomes 'true'

I am planning to change the page like this on App.js, if there are other better way, please let me know.

Thank you this is my code. AuthManager.js

export default class AuthPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user                    : null,
      firebaseUser            : null,
      fcmToken                : null,
      accessToken             : null,
      authType                : null,
      hasInitialNotification  : null,
      isValid                 : false
    };
    this.unsubscribe = null;

  }

...some codes..


render() {
    // if (!this.state.firebaseUser) {
      return (
        <Provider store={store}>
        <View style = {styles.main}>


        <View style ={styles.logotemp}>
        <Image style ={styles.logo}
        source={require('../../resources/logo/logo.png')}
        />

        </View>

        <View style = {styles.inputid}>


        <FormInput
        ref={(el)=> {this.email = el;}}
        textInputRef='email'
        placeholder = "Email"
        onChangeText={(email) => this.setState({email})}
        value = {this.state.email}
        />

        <FormInput
        ref={(el)=> {this.password = el;}}
        textInputRef='password'
        onChangeText={(password) => this.setState({password})}
        value = {this.state.password}
        placeholder = "Password"
        secureTextEntry = {true}
        />
        <TouchableOpacity onPress={this._emailSignIn.bind(this)}>
        <Image
        style = {styles.loginbut}
        source={require('../../resources/socialicon/signin.png')}
        />
        </TouchableOpacity>  

        </View>

        <View style = {styles.socialicons}>
        <TouchableOpacity onPress={this._facebookSignIn.bind(this)} >
        <Image 
        style={styles.fbicons}
        source={require('../../resources/socialicon/facebook.png')}
        />
        </TouchableOpacity>
        <Image
        style={styles.divider}
        source = {require('../../resources/socialicon/divider.png')}
        />

        <TouchableOpacity onPress={this._googleSignIn.bind(this)} >
        <Image
        style={styles.ggicons}
        source={require('../../resources/socialicon/google.png')}
        />
        </TouchableOpacity>  

        </View>    
        </View>

        </Provider>
      );
    // }

    if (this.state.firebaseUser) {
      return(
        <Provider store = {store}>
        {store.isValid = this.state.isValid}
        </Provider>
      );
    }
  }

export default class MainPage extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {

  }



  render() {
    alert(store.isValid);
    if(!this.props.isValid){
      return(<View style={{flex:1}}>

         <AuthPage></AuthPage> 

        </View>


      );
    }

    if(isValid){
    return(
        <View style={{flex:1}}>

         <TabPage></TabPage>

        </View>
      );
    }




  }
}

thank you!!

Answer 1

The idiom in React is that only the current element can know it's state. I would highly recommend using Redux for the global data transfer between components, or, if you do not need data synced, you can use AsyncStorage.