GabrielTrettel
3 years ago
2 changed files with 94 additions and 22 deletions
@ -0,0 +1,65 @@ |
|||
import React, { useState, useEffect } from "react"; |
|||
import { useFormikContext } from "formik"; |
|||
|
|||
import TextInput from "../TextInput"; |
|||
import ErrorMessage from "./ErrorMessage"; |
|||
import { View, Text, StyleSheet } from "react-native"; |
|||
import { TouchableOpacity } from "react-native-gesture-handler"; |
|||
import colors from "../../config/colors"; |
|||
import defaultStyles from "../../config/styles"; |
|||
import { MaskedTextInput } from "react-native-mask-text"; |
|||
|
|||
function PhoneNumberFormField({ |
|||
name, |
|||
flex = 0, |
|||
maxLength = 0, |
|||
placeholder = "", |
|||
paddingLeft = 16, |
|||
paddingRight = 16, |
|||
}) { |
|||
const { values, setFieldValue, errors, touched } = useFormikContext(); |
|||
|
|||
// console.log(values);
|
|||
return ( |
|||
<View flex={flex}> |
|||
<View |
|||
style={{ |
|||
paddingLeft: paddingLeft, |
|||
paddingRight: paddingRight, |
|||
}} |
|||
> |
|||
<MaskedTextInput |
|||
mask="(99) 99999-9999" |
|||
placeholder={placeholder} |
|||
placeholderTextColor={colors.medium} |
|||
onChangeText={(_, rawText) => { |
|||
setFieldValue(name, rawText.substr(0, maxLength)); |
|||
}} |
|||
style={styles.container} |
|||
keyboardType="numeric" |
|||
/> |
|||
</View> |
|||
|
|||
<View style={{ paddingRight: paddingRight, paddingLeft: paddingLeft }}> |
|||
<ErrorMessage error={errors[name]} visible={touched[name]} /> |
|||
</View> |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
const styles = StyleSheet.create({ |
|||
container: { |
|||
...defaultStyles.shadow, |
|||
...defaultStyles.text, |
|||
flexDirection: "row", |
|||
alignItems: "center", |
|||
backgroundColor: colors.white, |
|||
borderRadius: 6, |
|||
borderColor: colors.grayBG, |
|||
borderWidth: 1, |
|||
padding: 5, |
|||
paddingLeft: 12, |
|||
height: 68, |
|||
}, |
|||
}); |
|||
export default PhoneNumberFormField; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue