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. -