diff --git a/src/app/components/forms/PasswordFormField.js b/src/app/components/forms/PasswordFormField.js new file mode 100644 index 0000000..a4dd0da --- /dev/null +++ b/src/app/components/forms/PasswordFormField.js @@ -0,0 +1,70 @@ +import React, {useState} from "react"; +import ErrorMessage from "./ErrorMessage"; +import { useFormikContext } from "formik"; +import { View, TextInput, StyleSheet } from "react-native"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; +import colors from "../../config/colors"; +import defaultStyles from "../../config/styles"; + +function PasswordFormField({ name, ...otherProps }) { + const { + values, + setFieldTouched, + setFieldValue, + handleChange, + errors, + touched, + } = useFormikContext(); + const [fieldVal, setFieldVal] = useState(values[name]); + + + return ( + + + setFieldTouched(name)} + onChangeText={(val) => { + setFieldVal(val); + }} + value={fieldVal.toString()} + style={defaultStyles.text} + height={48} + placeholderTextColor={colors.medium} + {...otherProps} + /> + + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + ...defaultStyles.shadow, + flexDirection: "row", + alignItems: "center", + backgroundColor: colors.white, + borderRadius: 6, + borderColor: colors.grayBG, + borderWidth: 1, + padding: 5, + paddingLeft: 10, + marginHorizontal: 16 + }, + icon: { + marginRight: 10, + alignItems: "flex-end" + }, +}); + +export default PasswordFormField; diff --git a/src/app/screens/LoginScreen.js b/src/app/screens/LoginScreen.js index 80e2e17..667b470 100644 --- a/src/app/screens/LoginScreen.js +++ b/src/app/screens/LoginScreen.js @@ -17,6 +17,7 @@ import assets from "../config/assets"; import Button from "../components/Button"; import { TouchableNativeFeedback } from "react-native-gesture-handler"; import { login, userPersonalData } from "../api/auth"; +import PasswordFormField from "../components/forms/PasswordFormField"; const phoneRegex = RegExp( /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/ @@ -124,10 +125,9 @@ export default function LoginScreen(props) { -