diff --git a/with-formik/App.js b/with-formik/App.js
index 11c1a93..2681a15 100644
--- a/with-formik/App.js
+++ b/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 }) => (
+
+ {errorValue}
+
+);
export default function App() {
+ function onLoginHandler(values) {
+ const { email, password } = values;
+
+ alert(`Credentials entered. email: ${email}, password: ${password}`);
+ }
+
return (
-
-
-
-
-
-
-
+
+ {
+ onLoginHandler(values, actions);
+ }}
+ validationSchema={validationSchema}
+ >
+ {({
+ handleChange,
+ values,
+ errors,
+ touched,
+ handleSubmit,
+ handleBlur
+ }) => (
+ <>
+
+
+
+
+
+ Login
+
+ >
+ )}
+
+
);
}
+
+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'
+ }
+});
diff --git a/with-formik/package.json b/with-formik/package.json
index d756a1c..a6d5dc7 100644
--- a/with-formik/package.json
+++ b/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"
},
diff --git a/with-formik/src/config/firebaseConfig.js b/with-formik/src/config/firebaseConfig.js
deleted file mode 100644
index 0111c66..0000000
--- a/with-formik/src/config/firebaseConfig.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
- apiKey: 'AIzaSyClsBKWOOXfzeb48Rm80hX09X87J_TB4mM',
- authDomain: 'rnexpo0.firebaseapp.com',
- databaseURL: 'https://rnexpo0.firebaseio.com',
- storageBucket: '',
- messagingSenderId: '256218572662'
-};
diff --git a/with-formik/src/screens/HomeScreen.js b/with-formik/src/screens/HomeScreen.js
deleted file mode 100644
index 43e7568..0000000
--- a/with-formik/src/screens/HomeScreen.js
+++ /dev/null
@@ -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 (
-
- You've successfully logged in.
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center'
- }
-});
diff --git a/with-formik/src/screens/LoginScreen.js b/with-formik/src/screens/LoginScreen.js
deleted file mode 100644
index 67d5008..0000000
--- a/with-formik/src/screens/LoginScreen.js
+++ /dev/null
@@ -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 }) => (
-
- {errorValue}
-
-);
-
-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 (
-
- {
- onLoginHandler(values, actions);
- }}
- validationSchema={validationSchema}
- >
- {({
- handleChange,
- values,
- errors,
- touched,
- handleSubmit,
- handleBlur
- }) => (
- <>
-
-
-
-
-
- Login
-
-
- >
- )}
-
-
-
-
- );
-}
-
-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
- }
-});
diff --git a/with-formik/src/screens/SignupScreen.js b/with-formik/src/screens/SignupScreen.js
deleted file mode 100644
index d173991..0000000
--- a/with-formik/src/screens/SignupScreen.js
+++ /dev/null
@@ -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 }) => (
-
- {errorValue}
-
-);
-
-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 (
-
- {
- onSignupHandler(values, actions);
- }}
- validationSchema={validationSchema}
- >
- {({
- handleChange,
- values,
- errors,
- touched,
- handleSubmit,
- handleBlur
- }) => (
- <>
-
-
-
-
-
- Signup
-
-
- >
- )}
-
-
- );
-}
-
-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'
- }
-});