title: React Native Hooks and Authentication flow
body: <p>I am currently setting up my authentification flow for my React Native app and I ve got the following issues. </p>
  
  <p>My navigation screen looks like that</p>
  
  <pre><code>
  export default CreateStack = () =&gt; {
    const [isLoading, setIsLoading] = React.useState(true);
    const [userToken, setUserToken] = React.useState(null);
  
    const authContext = React.useMemo(() =&gt; {
      return {
        signIn: () =&gt; {
          setIsLoading(false);
          setUserToken('asdf');
        },
        signUp: () =&gt; {
          setIsLoading(false);
          setUserToken('asdf');
        },
        signOut: () =&gt; {
          setIsLoading(false);
          setUserToken(null);
        },
      };
    }, []);
  
    React.useEffect(() =&gt; {
      setTimeout(() =&gt; {
        setIsLoading(false);
      }, 1000);
    }, []);
  
    if (isLoading) {
      return &lt;LoadingScreen /&gt;;
    }
    return (
      &lt;AuthContext.Provider value={authContext}&gt;
        &lt;NavigationContainer&gt;
          {userToken ? (
            &lt;Stack.Navigator
              screenOptions={{headerShown: false}}
              initialRouteName={Browser}&gt;
              &lt;Stack.Screen name="Browser" component={TabsScreen} /&gt;
              &lt;Stack.Screen name="PreScreen" component={PreScreen} /&gt;
              &lt;Stack.Screen name="Player" component={Player} /&gt;
            &lt;/Stack.Navigator&gt;
          ) : (
            &lt;AuthStack.Navigator
              screenOptions={{headerShown: false}}
              initialRouteName={RegisterLogin}&gt;
              &lt;AuthStack.Screen name="RegisterLogin" component={RegisterLogin} /&gt;
              &lt;AuthStack.Screen name="Login" component={Login} /&gt;
              &lt;AuthStack.Screen name="Register" component={Register} /&gt;
            &lt;/AuthStack.Navigator&gt;
          )}
        &lt;/NavigationContainer&gt;
      &lt;/AuthContext.Provider&gt;
    );
  };
  
  </code></pre>
  
  <p>AuthContext : </p>
  
  <pre><code>import React from 'react';
  
  export const AuthContext = React.createContext();
  
  </code></pre>
  
  <p>And when i am trying to access the singIn function from my navigation screen from my Log in screen i am getting the error for invalid hook call.</p>
  
  <p>My log in screen is formed from a class as following </p>
  
  <pre><code>class Login extends Component {
    state = {
      email: VALID_EMAIL,
      password: VALID_PASSWORD,
      errors: [],
      loading: false,
    };
  
    handleLogin() {
      const {signIn} = React.useContext(AuthContext);
      const {navigation} = this.props;
      const {email, password} = this.state;
      let errors = [];
  
      Keyboard.dismiss();
      this.setState({loading: true});
  
      if (email !== VALID_EMAIL) {
        errors.push('email');
      }
      if (password !== VALID_PASSWORD) {
        errors.push('password');
      }
  
      this.setState({errors, loading: false});
  
      if (!errors.length) {
        signIn();
      }
    }
    render() {
      const {navigation} = this.props;
      const {loading, errors} = this.state;
      const hasErrors = (key) =&gt; (errors.includes(key) ? styles.hasErrors : null);
      return (
        &lt;View style={styles.mainContainerView}&gt;
          &lt;StatusBar barStyle="light-content" /&gt;
          &lt;NavigationBarDown title="LogIn" /&gt;
          &lt;TextInput
            style={[styles.TextInput, hasErrors('email')]}
            label="Email"
            error={hasErrors('email')}
            placeholder="Email Adress"
            autoCapitalize="none"
            autoCorrect={false}
            onChangeText={(text) =&gt; this.setState({email: text})}
          /&gt;
          &lt;TextInput
            label="Password"
            placeholder="Password"
            error={hasErrors('password')}
            style={[styles.TextInput, hasErrors('password')]}
            onChangeText={(text) =&gt; this.setState({password: text})}
          /&gt;
          &lt;TouchableOpacity
            style={styles.singInButton}
            gradient
            onPress={() =&gt; this.handleLogin()}&gt;
            {loading ? (
              &lt;ActivityIndicator size="small" color="white" /&gt;
            ) : (
              &lt;Text style={styles.logInText}&gt;Login&lt;/Text&gt;
            )}
          &lt;/TouchableOpacity&gt;
  
          &lt;Text&gt;Dont have an account ?&lt;/Text&gt;
          &lt;TouchableOpacity&gt;
            &lt;Text&gt;Register here in here&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export default Login;
  </code></pre>
  
  <p>I am stuck here for a few days so any help is welcomed</p>
  
  <p>After some updates i came out with this </p>
  
  <pre><code>import React, {useContext} from 'react';
  import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
    StatusBar,
    Keyboard,
    KeyboardAvoidingView,
  } from 'react-native';
  import styles from './style';
  import NavigationBarDown from '../../components/NavigationBardown/NavigationBarDown';
  import {AuthContext} from '../../components/Navigation/context';
  import login from './action';
  
  const VALID_EMAIL = 'c';
  const VALID_PASSWORD = '2';
  const EMPTY = '';
  
  class Login extends React.Component {
    state = {
      email: VALID_EMAIL,
      password: VALID_PASSWORD,
      errors: [],
      loading: false,
    };
  
    handleLogin = () =&gt; {
      const {navigation} = this.props;
      const {email, password} = this.state;
      let errors = [];
  
      Keyboard.dismiss();
      this.setState({loading: true});
  
      if (email !== VALID_EMAIL) {
        errors.push('email');
      }
      if (password !== VALID_PASSWORD) {
        errors.push('password');
      }
  
      this.setState({errors, loading: false});
  
      if (!errors.length) {
        this.props.signIn;
      }
    };
    render() {
      const {navigation} = this.props;
      const {loading, errors} = this.state;
      const hasErrors = (key) =&gt; (errors.includes(key) ? styles.hasErrors : null);
      return (
        &lt;View style={styles.mainContainerView}&gt;
          &lt;StatusBar barStyle="light-content" /&gt;
          &lt;NavigationBarDown title="LogIn" /&gt;
          &lt;TextInput
            style={[styles.TextInput, hasErrors('email')]}
            label="Email"
            error={hasErrors('email')}
            placeholder="Email Adress"
            autoCapitalize="none"
            autoCorrect={false}
            onChangeText={(text) =&gt; this.setState({email: text})}
          /&gt;
          &lt;TextInput
            label="Password"
            placeholder="Password"
            error={hasErrors('password')}
            style={[styles.TextInput, hasErrors('password')]}
            onChangeText={(text) =&gt; this.setState({password: text})}
          /&gt;
          &lt;TouchableOpacity
            style={styles.singInButton}
            gradient
            onPress={() =&gt; this.handleLogin()}&gt;
            {loading ? (
              &lt;ActivityIndicator size="small" color="white" /&gt;
            ) : (
              &lt;Text style={styles.logInText}&gt;Login&lt;/Text&gt;
            )}
          &lt;/TouchableOpacity&gt;
  
          &lt;Text&gt;Dont have an account ?&lt;/Text&gt;
          &lt;TouchableOpacity&gt;
            &lt;Text&gt;Register here in here&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const LoginWithContext = (props) =&gt; {
    const {signIn} = useContext(AuthContext);
    return &lt;Login signIn={signIn} /&gt;;
  };
  
  export default LoginWithContext;
  
  </code></pre>
  
  <p>but now still is not working </p>