Кнопка входа не работает с реагировать на навигацию

Question

Я пытаюсь создать приложение и использую авторизацию firebaseuser с включенной электронной почтой и паролем. Я успешно создал экран регистрации, и это прекрасно работает. Однако, когда я нажимаю кнопку входа в систему, это не перенаправляет меня на домашний экран, к которому я пытаюсь добраться! Когда я впервые открываю приложение, оно сразу переходит на домашний экран и не ждет, пока пользователь создаст логин, прежде чем оно перенаправит на домашний экран, поэтому я предполагаю, что пользователь! == null - это не правильный синтаксис, но что такое?

вот экран входа в систему

import React, { Component } from 'react';
import AuthForm from '../ui/AuthForm';
import { login, signup, subscribeToAuthChanges } from '../api/FirebaseApi';

class LoginScreen extends Component {

  state = {
    authMode: 'login'
  }

  componentDidMount() {
    subscribeToAuthChanges(this.onAuthStateChanged)
  }

  onAuthStateChanged = (user) => {
    if (user !== null) {
      this.props.navigation.navigate('home');
    }
  }

  switchAuthMode = () => {
    this.setState(prevState => ({
      authMode: prevState.authMode === 'login' ? 'signup' : 'login'
    }));
  }

  render() {
    return (
      <AuthForm
        login={login}
        signup={signup}
        authMode={this.state.authMode}
        switchAuthMode={this.switchAuthMode}
      />
    );
  }
}


export default LoginScreen;

Вот пользовательский интерфейс

import React from 'react';
import {
  StyleSheet,
  View,
  TextInput,
  Button, Text
} from 'react-native';

import { withFormik } from 'formik';
import * as yup from 'yup';

const AuthForm = (props) => {

  displayNameInput = (
    <View>
      <TextInput
        style={styles.formInput}
        onChangeText={text => props.setFieldValue('displayName', text)}
        placeholder='Display Name'
      />
      <Text style={styles.validationText}>{props.errors.displayName}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text h2 style={styles.header}>Coding with Curry</Text>
      {props.authMode === 'signup' ? displayNameInput : null}
      <TextInput
        style={styles.formInput}
        onChangeText={text => props.setFieldValue('email', text)}
        placeholder='email'
      />
      <Text style={styles.validationText}> {props.errors.email}</Text>
      <TextInput
        style={styles.formInput}
        secureTextEntry={true}
        onChangeText={text => props.setFieldValue('password', text)}
        placeholder='password'
      />
      <Text style={styles.validationText}> {props.errors.password}</Text>
      <Button
        onPress={() => props.handleSubmit()}
        buttonStyle={styles.loginButton}
        title={props.authMode === 'login' ? 'Login' : 'Create Account'} />
      <Button
        backgroundColor='transparent'
        color='black'
        buttonStyle={styles.switchButton}
        onPress={() => props.switchAuthMode()}
        title={props.authMode === 'login' ? 'Switch to Signup' : 'Switch to Login'} />
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    marginBottom: 60
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  validationText: {
    marginTop: 8,
    marginBottom: 16,
    color: 'red',
    alignSelf: 'center'
  },
  formInput: {
    width: 300,
    height: 50,
    borderColor: '#B5B4BC',
    borderWidth: 1,
    marginBottom: 16,
    padding: 8
  },
  loginButton: {
    width: 200,
    marginBottom: 16,
    backgroundColor: '#6f37be',
  },
  switchButton: {
    width: 200,
    backgroundColor: '#3f51b5'
  }
});

export default withFormik({
  mapPropsToValues: () => ({ email: '', password: '', displayName: '' }),
  validationSchema: (props) => yup.object().shape({
    email: yup.string().email().required(),
    password: yup.string().min(10).required(),
    displayName: props.authMode === 'signup' ?
      yup.string().min(5).required() : null
  }),
  handleSubmit: (values, { props }) => {
    props.authMode === 'login' ? props.login(values) : props.signup(values)
  },
})(AuthForm);

здесь находится навигатор

    import {createStackNavigator} from 'react-navigation-stack';
    import { createAppContainer} from 'react-navigation';
    import CategoriesScreen from '../../screens/CategoriesScreen';
    import CategoryMealScreen from '../../screens/CategoryMealScreen';
    import MealDetailScreen from '../../screens/MealDetailScreen';
    import LoginScreen from '../../screens/LoginScreen';
    import HomeScreen from '../../screens/HomeScreen';


  const App = createStackNavigator({
    login: LoginScreen,
    home: HomeScreen
});

export default createAppContainer(App);

здесь находится страница Firebase, которая обрабатывает регистрация и вход в систему не работает

export function login({ email, password }) {
    firebase.auth().signInWithEmailAndPassword(email, password);
      this.navigation.navigate("CategoriesMeals");
  }

  export function signup({ email, password, displayName }) {
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((userInfo) => {
        console.log(userInfo)
        userInfo.user.updateProfile({ displayName: displayName.trim() })
          .then(() => { })
      })
  }

  export function subscribeToAuthChanges(authStateChanged) {
    firebase.auth().onAuthStateChanged((user) => {
      authStateChanged(user);
    })
  }

  export function signout(onSignedOut) {
    firebase.auth().signOut()
      .then(() => {
        onSignedOut();
      })
  }