update example to minimal

with-formik/App.js

@@ -1,21 +1,124 @@
-import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  StyleSheet,
+  Dimensions
+} from 'react-native';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
 
-import LoginScreen from './src/screens/LoginScreen';
-import SignupScreen from './src/screens/SignupScreen';
-import HomeScreen from './src/screens/HomeScreen';
+const validationSchema = Yup.object().shape({
+  email: Yup.string()
+    .label('Email')
+    .email('Enter a valid email')
+    .required('Please enter a registered email'),
+  password: Yup.string()
+    .label('Password')
+    .required()
+    .min(6, 'Password must have at least 6 characters ')
+});
 
-const Stack = createStackNavigator();
+const ErrorMessage = ({ errorValue }) => (
+  <View style={styles.errorContainer}>
+    <Text style={styles.errorText}>{errorValue}</Text>
+  </View>
+);
 
 export default function App() {
+  function onLoginHandler(values) {
+    const { email, password } = values;
+
+    alert(`Credentials entered. email: ${email}, password: ${password}`);
+  }
+
   return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen name="Login" component={LoginScreen} />
-        <Stack.Screen name="Signup" component={SignupScreen} />
-        <Stack.Screen name="Home" component={HomeScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
+    <View style={styles.container}>
+      <Formik
+        initialValues={{ email: '', password: '' }}
+        onSubmit={(values, actions) => {
+          onLoginHandler(values, actions);
+        }}
+        validationSchema={validationSchema}
+      >
+        {({
+          handleChange,
+          values,
+          errors,
+          touched,
+          handleSubmit,
+          handleBlur
+        }) => (
+          <>
+            <TextInput
+              style={styles.input}
+              numberOfLines={1}
+              value={values.email}
+              placeholder="Enter email"
+              onChangeText={handleChange('email')}
+              autoCapitalize="none"
+              onBlur={handleBlur('email')}
+            />
+            <ErrorMessage errorValue={touched.email && errors.email} />
+            <TextInput
+              style={styles.input}
+              numberOfLines={1}
+              value={values.password}
+              placeholder="Enter password"
+              onChangeText={handleChange('password')}
+              autoCapitalize="none"
+              onBlur={handleBlur('password')}
+              secureTextEntry={true}
+            />
+            <ErrorMessage errorValue={touched.password && errors.password} />
+            <TouchableOpacity
+              onPress={handleSubmit}
+              style={styles.buttonContainer}
+            >
+              <Text style={styles.buttonText}>Login</Text>
+            </TouchableOpacity>
+          </>
+        )}
+      </Formik>
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  errorContainer: {
+    marginVertical: 5
+  },
+  errorText: {
+    color: 'red'
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: 40
+  },
+  input: {
+    marginVertical: 10,
+    width: Dimensions.get('window').width - 100,
+
+    height: 40,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5
+  },
+  buttonContainer: {
+    marginVertical: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 10,
+    width: Dimensions.get('window').width - 200,
+    height: 44,
+    borderRadius: 5,
+    backgroundColor: '#343434'
+  },
+  buttonText: {
+    fontSize: 18,
+    color: '#ffffff'
+  }
+});

with-formik/package.json

@@ -1,18 +1,10 @@
 {
   "dependencies": {
-    "@react-native-community/masked-view": "0.1.6",
-    "@react-navigation/native": "5.4.3",
-    "@react-navigation/stack": "5.4.0",
     "expo": "37.0.11",
-    "firebase": "7.9.0",
     "formik": "2.1.4",
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
-    "react-native-gesture-handler": "1.6.1",
-    "react-native-reanimated": "~1.7.0",
-    "react-native-safe-area-context": "0.7.3",
-    "react-native-screens": "~2.2.0",
     "react-native-web": "0.11.7",
     "yup": "0.29.0"
   },

with-formik/src/config/firebaseConfig.js

@@ -1,7 +0,0 @@
-export default {
-  apiKey: 'AIzaSyClsBKWOOXfzeb48Rm80hX09X87J_TB4mM',
-  authDomain: 'rnexpo0.firebaseapp.com',
-  databaseURL: 'https://rnexpo0.firebaseio.com',
-  storageBucket: '',
-  messagingSenderId: '256218572662'
-};

with-formik/src/screens/HomeScreen.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { View, Text, Button, StyleSheet } from 'react-native';
-import * as firebase from 'firebase';
-
-export default function HomeScreen({ navigation }) {
-  async function onLogoutHandler() {
-    try {
-      await firebase.auth().signOut();
-      navigation.navigate('Login');
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
-  return (
-    <View style={styles.container}>
-      <Text>You've successfully logged in.</Text>
-      <Button
-        color="#343434"
-        title="Press here to logout"
-        onPress={onLogoutHandler}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});

with-formik/src/screens/LoginScreen.js

@@ -1,153 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  TextInput,
-  StyleSheet,
-  Dimensions,
-  Button
-} from 'react-native';
-import { Formik } from 'formik';
-import * as Yup from 'yup';
-import * as firebase from 'firebase';
-
-import firebaseConfig from '../config/firebaseConfig';
-
-firebase.initializeApp(firebaseConfig);
-
-const validationSchema = Yup.object().shape({
-  email: Yup.string()
-    .label('Email')
-    .email('Enter a valid email')
-    .required('Please enter a registered email'),
-  password: Yup.string()
-    .label('Password')
-    .required()
-    .min(6, 'Password must have at least 6 characters ')
-});
-
-const ErrorMessage = ({ errorValue }) => (
-  <View style={styles.errorContainer}>
-    <Text style={styles.errorText}>{errorValue}</Text>
-  </View>
-);
-
-export default function LoginScreen({ navigation }) {
-  async function onLoginHandler(values, actions) {
-    const { email, password } = values;
-
-    try {
-      const response = await firebase
-        .auth()
-        .signInWithEmailAndPassword(email, password);
-
-      if (response.user) {
-        navigation.navigate('Home');
-      }
-    } catch (error) {
-      actions.setFieldError('general', error.message);
-    } finally {
-      actions.setSubmitting(false);
-    }
-  }
-
-  return (
-    <View style={styles.container}>
-      <Formik
-        initialValues={{ email: '', password: '' }}
-        onSubmit={(values, actions) => {
-          onLoginHandler(values, actions);
-        }}
-        validationSchema={validationSchema}
-      >
-        {({
-          handleChange,
-          values,
-          errors,
-          touched,
-          handleSubmit,
-          handleBlur
-        }) => (
-          <>
-            <TextInput
-              style={styles.input}
-              numberOfLines={1}
-              value={values.email}
-              placeholder="Enter email"
-              onChangeText={handleChange('email')}
-              autoCapitalize="none"
-              onBlur={handleBlur('email')}
-            />
-            <ErrorMessage errorValue={touched.email && errors.email} />
-            <TextInput
-              style={styles.input}
-              numberOfLines={1}
-              value={values.password}
-              placeholder="Enter password"
-              onChangeText={handleChange('password')}
-              autoCapitalize="none"
-              onBlur={handleBlur('password')}
-              secureTextEntry={true}
-            />
-            <ErrorMessage errorValue={touched.email && errors.password} />
-            <TouchableOpacity
-              onPress={handleSubmit}
-              style={styles.buttonContainer}
-            >
-              <Text style={styles.buttonText}>Login</Text>
-            </TouchableOpacity>
-            <ErrorMessage errorValue={errors.general} />
-          </>
-        )}
-      </Formik>
-      <View style={styles.signupButtonContainer}>
-        <Button
-          title="New user? Sign up here."
-          onPress={() => navigation.navigate('Signup')}
-          color="#555555"
-        />
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  errorContainer: {
-    marginVertical: 5
-  },
-  errorText: {
-    color: 'red'
-  },
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    marginTop: 40
-  },
-  input: {
-    marginVertical: 10,
-    width: Dimensions.get('window').width - 100,
-
-    height: 40,
-    borderWidth: 1,
-    padding: 10,
-    borderRadius: 5
-  },
-  buttonContainer: {
-    marginVertical: 10,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 10,
-    width: Dimensions.get('window').width - 200,
-    height: 44,
-    borderRadius: 5,
-    backgroundColor: '#343434'
-  },
-  buttonText: {
-    fontSize: 18,
-    color: '#ffffff'
-  },
-  signupButtonContainer: {
-    marginTop: 10
-  }
-});

with-formik/src/screens/SignupScreen.js

@@ -1,138 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  TextInput,
-  StyleSheet,
-  Dimensions
-} from 'react-native';
-import { Formik } from 'formik';
-import * as Yup from 'yup';
-import * as firebase from 'firebase';
-
-const validationSchema = Yup.object().shape({
-  email: Yup.string()
-    .label('Email')
-    .email('Enter a valid email')
-    .required('Please enter a registered email'),
-  password: Yup.string()
-    .label('Password')
-    .required()
-    .min(6, 'Password must have at least 6 characters ')
-});
-
-const ErrorMessage = ({ errorValue }) => (
-  <View style={styles.errorContainer}>
-    <Text style={styles.errorText}>{errorValue}</Text>
-  </View>
-);
-
-export default function SignupScreen({ navigation }) {
-  async function onSignupHandler(values, actions) {
-    const { email, password } = values;
-
-    try {
-      const response = await firebase
-        .auth()
-        .createUserWithEmailAndPassword(email, password);
-
-      if (response.user) {
-        navigation.navigate('Home');
-      }
-    } catch (error) {
-      actions.setFieldError('general', error.message);
-    } finally {
-      actions.setSubmitting(false);
-    }
-  }
-
-  return (
-    <View style={styles.container}>
-      <Formik
-        initialValues={{ email: '', password: '' }}
-        onSubmit={(values, actions) => {
-          onSignupHandler(values, actions);
-        }}
-        validationSchema={validationSchema}
-      >
-        {({
-          handleChange,
-          values,
-          errors,
-          touched,
-          handleSubmit,
-          handleBlur
-        }) => (
-          <>
-            <TextInput
-              style={styles.input}
-              numberOfLines={1}
-              value={values.email}
-              placeholder="Enter email"
-              onChangeText={handleChange('email')}
-              autoCapitalize="none"
-              onBlur={handleBlur('email')}
-            />
-            <ErrorMessage errorValue={touched.email && errors.email} />
-            <TextInput
-              style={styles.input}
-              numberOfLines={1}
-              value={values.password}
-              placeholder="Enter password"
-              onChangeText={handleChange('password')}
-              autoCapitalize="none"
-              onBlur={handleBlur('password')}
-              secureTextEntry={true}
-            />
-            <ErrorMessage errorValue={touched.email && errors.password} />
-            <TouchableOpacity
-              onPress={handleSubmit}
-              style={styles.buttonContainer}
-            >
-              <Text style={styles.buttonText}>Signup</Text>
-            </TouchableOpacity>
-            <ErrorMessage errorValue={errors.general} />
-          </>
-        )}
-      </Formik>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  errorContainer: {
-    marginVertical: 5
-  },
-  errorText: {
-    color: 'red'
-  },
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    marginTop: 40
-  },
-  input: {
-    marginVertical: 10,
-    width: Dimensions.get('window').width - 100,
-
-    height: 40,
-    borderWidth: 1,
-    padding: 10,
-    borderRadius: 5
-  },
-  buttonContainer: {
-    marginVertical: 10,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 10,
-    width: Dimensions.get('window').width - 200,
-    height: 44,
-    borderRadius: 5,
-    backgroundColor: '#343434'
-  },
-  buttonText: {
-    fontSize: 18,
-    color: '#ffffff'
-  }
-});