React Native Navigate onAuthStateChanged

Question

I'm trying to perform a navigation method when Firebase has concluded whether or not a user is signed in:

/



import React, { Component, PropTypes } from 'react';
import * as firebase from 'firebase';
import {
  AppRegistry,
  Image,
  StyleSheet,
  TextInput,
  Navigator,
  TouchableHighlight,
  Button,
  Text,
  View
} from 'react-native';



firebase.initializeApp({
});

 class Login extends Component {



   navigate(routeName) {
    this.props.navigator.push({
      name: routeName
    });
  }

  constructor(props) {
    super(props);
    this.state = {
      username_text: 'Username',
      password_text: 'Password'
    };
  }


  render() {



    return (
      <View>

        <TouchableHighlight onPress={ this.navigate.bind(this,'register')} style={styles.button}>
          <Text style={styles.buttonText}>
            Logiiiiiiin
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

firebase.auth().onAuthStateChanged(user => {
  if (!user) {
    var login = new Login(navigator);
    login.navigate(this,'register')
  }
});


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  background: {
    flex: 1,
    resizeMode: 'cover'
  },
  button: {
    height: 50,
    backgroundColor: '#000000',
    alignItems: 'center',
    marginTop: 10,
    justifyContent: 'center'
  },
  buttonText: {
    fontSize: 22,
    color: '#FFF',
    alignSelf: 'center'
  }
});

export default Login

Index file:

import React, { Component } from 'react';
import {
  AppRegistry,
  Image,
  StyleSheet,
  TextInput,
  Navigator,
  TouchableHighlight,
  Button,
  Text,
  View
} from 'react-native';

import LoginScreen from './login';
import RegisterScreen from './register';







 class Test extends Component {


   renderScene(route, navigator){
     console.log(route);
     if(route.name == 'login'){
       return <LoginScreen navigator = {navigator}/>
     }
     if(route.name == 'register'){
       return <RegisterScreen navigator = {navigator}/>
     }

   }


   render() {

     return (



       <View style={styles.container}>


       <Navigator
          initialRoute={{name: 'login'}}
          renderScene={this.renderScene.bind(this)}
        />


       </View>

     )
   }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('Test', () => Test);

At the moment I get the following error:

undefined is not an object (evaluating 'this.props.navigator.push')

pointing at the navigate method's this.props.navigator.push({ line

Answer 1

You create Login components in two ways, one of them is wrong:

firebase.auth().onAuthStateChanged(user => {
    if (!user) {
        var login = new Login(navigator); // <-- Navigator is not defined!!
        login.navigate(this,'register')
    }
});

Instead, you can put the code to listen to firebase auth state inside the Login component, e.g. like this:

class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {
            username_text: 'Username',
            password_text: 'Password'
        };
    }

    componentWillMount() {
        // Add listener here
        this.unsubscribe = firebase.auth().onAuthStateChanged(user => {
            if (!user) {
                this.navigate('register');
            }
        });
    }

    componentWillUnmount() {
        // Don't forget to unsubscribe when the component unmounts
        this.unsubscribe();
    }

    navigate(routeName) {
        this.props.navigator.push({
            name: routeName
        });
    }

    render() {
        return (
            <View>
                <TouchableHighlight onPress={ this.navigate.bind(this,'register')} style={styles.button}>
                    <Text style={styles.buttonText}>
                        Logiiiiiiin
                    </Text>
                </TouchableHighlight>
            </View>
        );
    }
}