Navigation not working in react native app

Question

I am developing a react native app with firebase authentication. But when I login successfully the the navigation showing some problem, like, Undefined is not an object(evaluating 'this.props.navigation'). but the same cone used for navigation working properly on other pages. I Tried a lot of things, but nothing works Guys please help me.

      import React from "react";
      import {
        Text,
        View,
        Image,
        TouchableOpacity,
        AsyncStorage,
        TextInput
      } from "react-native";
      import { styles } from "./Css";
      import { KeyboardAvoidingView } from "react-native";
      import { RkTextInput, RkButton } from "react-native-ui-kitten";
      import { Actions } from "react-native-router-flux";
      import { Icon } from "react-native-elements";

      import * as firebase from "firebase";
      export default class Login extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            email: "",
            password: "",
            userId: "",
            errorMessage: null,
          };
        }
        componentDidMount() {
          this._loadInitialState().done();
        }
        _loadInitialState = async () => {
          var value = await AsyncStorage.getItem("user");

          if (value !== null) {
            this.props.navigation.navigate("NewHome")
          }
        };

        handleLogin = (email, password) => {
          if(this.state.email.length<1){
            alert("Enter an Email");
            return;
          }

          if (this.state.email.includes("@")==false){
              alert("Use an email as Username");
              return;
            }

          if(this.state.password.length<6){
            alert("please enter correct password")
            return;
          }

          //alert(firebase.auth().currentUser.uid)
          firebase.auth().signInWithEmailAndPassword(email, password).then(function(user){
            if(user){
              this.props.navigation.navigate("NewHome"), //problem
              //--------------------------Async Test--------------------------
              AsyncStorage.setItem("user", firebase.auth().currentUser.uid)
              //--------------------------------------------------------------
            }else{

            }
          }


            )
            .catch(function(error) {
              var errorCode = error.code;
              var errorMessage = error.message;

              if (errorCode === "auth/wrong-password") {
                alert("Wrong password.");
                return;
              } else {
                alert(errorMessage);
                return;
              }
              console.log(error);
            });
        };

did you debug your code? what is the debug errors and output? https://stackoverflow.com/a/45227393/1848929 — hakki, Feb 06 '19 at 16:32
A few questions: is this Login screen inside a StackNavigator? in your constructor you are doing 'navigation= this.props.navigation' what happens if you take out 'this.props' and pass just 'navigation' to your auth method? — kivul, Feb 06 '19 at 16:34
@kivul actually the contsrtuctor thing i forgot to delete. that does nothing. Now i deleted it please check the code now. the navigator i used is SwitchNavigator — Savad, Feb 06 '19 at 16:40
I think your `this` does not point to your React class anymore. Have you tried an arrow function instead? — schogges, Feb 06 '19 at 18:51
@schogges thanks for the replay . But sorry idont get it. can u please show me what you mean — Savad, Feb 06 '19 at 19:15
@schogges u mean like ()=>this.props.navigation.navigate("NewHome") . now it show anything or nothing happned — Savad, Feb 06 '19 at 19:20
Yeah I meant like this: `firebase.auth().signInWithEmailAndPassword(email, password).then((user) => {...`. If that does'nt help, you could try to pass `this.props.navigation` to a variable right above this line and work with it for navigation (like you did in constructor)? — schogges, Feb 06 '19 at 19:31
Ah nice to read! I will answer it now, so you can mark it ;) please tell me what exactly helped — schogges, Feb 07 '19 at 12:32
@schogges firebase.auth().signInWithEmailAndPassword(email, password).then((user) => {} this thing worked fine for me — Savad, Feb 07 '19 at 14:00

schogges · Accepted Answer · 2019-02-07T14:42:40.133

0

this is not pointing to your React class anymore.

A solution could be using an arrow function:

firebase.auth().signInWithEmailAndPassword(email, password).then((user) => {...}

or you have to save it inside your function before using it inside firebase callbacks.

let props = { ...this.props };

inside your callback use it for navigation:

props.navigation.navigate('NewHome');

edited Feb 07 '19 at 14:42

answered Feb 07 '19 at 12:27

schogges

351
5
12

Navigation not working in react native app

1 Answers1