Elad Karni Elad Karni - 1 month ago 15
React JSX Question

React Native + Firebase signin Error: Undefind is not object (evaluating 'this.props.navigator')

I'm attempting to create a simple app that allows users to register and login using Firebase as a backend.

I'm using Stephen Grider-ReactNativeCasts as a template and I implemented firebase as the backend somewhat successfully I think. I am able to signup and the user shows up in the user list on the firebase dashboard, but when I attempt to sign in I get the error: Undefind is not object (evaluating 'this.props.navigator').

This is what my signin looks like,



var React = require('react-native');
var Firebase = require('firebase');
var {
View,
Text,
StyleSheet,
TextInput
} = React;

var Parse = require('parse/react-native');
var Button = require('../common/button');

module.exports = React.createClass({
getInitialState: function() {
return {
email: '',
password: '',
errorMessage: ''
};
},
render: function() {
return (
<View style={styles.container}>
<Text>Sign In</Text>

<Text style={styles.label}>Email:</Text>
<TextInput
style={styles.input}
value={this.state.email}
onChangeText={(text) => this.setState({email: text})}
/>

<Text style={styles.label}>Password:</Text>
<TextInput
secureTextEntry={true}
style={styles.input}
value={this.state.password}
onChangeText={(text) => this.setState({password: text})}
/>

<Text style={styles.label}>{this.state.errorMessage}</Text>
<Button text={'Sign In'} onPress={this.onPress} />
<Button text={'I need an account...'} onPress={this.onSignupPress} />
</View>
);
},
onSignupPress: function() {
this.props.navigator.push({name: 'signup'});
},
onPress: function() {
var ref = new Firebase("https://reactapplogin.firebaseio.com");
ref.authWithPassword({
email : this.state.email,
password : this.state.password
}, function(error, authData) {
if (error) {
console.log("Login Failed!", error);
} else {
console.log("Authenticated successfully with payload:", authData);
this.props.navigator.immediatelyResetRouteStack({name: 'tweets'});
}
});
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
input: {
padding: 4,
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 5,
margin: 5,
width: 200,
alignSelf: 'center'
},
label: {
fontSize: 18
}
});





I'm having issue with
this.props.navigator.immediatelyResetRouteStack({name: 'tweets'});
not working, and I also have zero idea where these console logs show up in the emulator (using Genymotion/Android Studio Emulators) so debugging is proving a little hard. I've tried to connect to chrome but it keeps failing.

Anyhelp would be really appreciated!
Thanks!

Stephen's project Github Page: https://github.com/StephenGrider/ReactNativeCasts/tree/master/authentication

Answer

The problem is not with Firebase but with your implementation.
You don't have the navigator on your props because you are not using a navigator. In Stephen's project Github Page you can see the Navigator is rendered and the components get the navigator prop.

renderScene: function(route, navigator) {
    var Component = ROUTES[route.name]; // ROUTES['signin'] => Signin
    return <Component route={route} navigator={navigator} />;
},
render: function() {
    return (
      <Navigator
            style={styles.container}
            initialRoute={{name: 'signin'}}
            renderScene={this.renderScene}
            configureScene={() => { return Navigator.SceneConfigs.FloatFromRight; }}
      />
);

update

Take a look at the src/main.js.
The rendered component is the react-native Navigator. on the navigator you have a renderScene prop that calls renderScene function which returns the correct component according to the ROUTES object and passes it the navigator as a prop.

Comments