Managing Authentication Flow

navigation/index.js

@@ -12,6 +12,6 @@ const SwitchNavigator = createSwitchNavigator(
   }
 )
 
-const AppContainer = createAppContainer(AuthNavigation)
+const AppContainer = createAppContainer(SwitchNavigator)
 
 export default AppContainer

screens/Login.js

@@ -1,12 +1,56 @@
 import React from 'react'
-import { StyleSheet, Text, View, Button } from 'react-native'
+import { StyleSheet, View, Button, TextInput } from 'react-native'
 
 export default class Login extends React.Component {
+  state = {
+    email: '',
+    password: ''
+  }
+
+  handleEmailChange = email => {
+    this.setState({ email })
+  }
+
+  handlePasswordChange = password => {
+    this.setState({ password })
+  }
+
+  onLogin = async () => {
+    const { email, password } = this.state
+    try {
+      if (email.length > 0 && password.length > 0) {
+        this.props.navigation.navigate('App')
+      }
+    } catch (error) {
+      alert(error)
+    }
+  }
+
   goToSignup = () => this.props.navigation.navigate('Signup')
   render() {
+    const { email, password } = this.state
+
     return (
       <View style={styles.container}>
-        <Text>Login</Text>
+        <View style={{ margin: 10 }}>
+          <TextInput
+            name='email'
+            value={email}
+            placeholder='Enter email'
+            autoCapitalize='none'
+            onChangeText={this.handleEmailChange}
+          />
+        </View>
+        <View style={{ margin: 10 }}>
+          <TextInput
+            name='password'
+            value={password}
+            placeholder='Enter password'
+            secureTextEntry
+            onChangeText={this.handlePasswordChange}
+          />
+        </View>
+        <Button title='Login' onPress={this.onLogin} />
         <Button title='Go to Signup' onPress={this.goToSignup} />
       </View>
     )