TouchOpacity onPress request is not working with formik and react-native-text-input-mask - react-native

Question

When i tried to login the button is not sending request. On button pree i supposed to console the output. It seems that the onChangeText and onChange is not working correcttly in TextInputMask.
TouchableOpacity tag has onPress event where onPress={()=>formikProps.handleSubmit()} is not triggering the onSubmit props of formik.
Here i'm using yup for validation and Formik for submitting data.
const validationSchema = yup.object().shape({
phoneNumber: yup
.string()
.label("Phone Number")
.required("Phone Number is required."),
password: yup.string().label("Password").required("Password is required."),
});
class Home extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: "",
press: false,
ButtonStateHolder: false,
};
}
render() {
return (
<ImageBackground style={{ width: "100%", height: "100%" }} source={bgImg}>
<ScrollView>
<Formik
initialValues={{ phoneNumber: "", password: "" }}
onSubmit={(values, actions) => {
this.setState({
password: values.password,
ButtonStateHolder: true,
});
console.warn(this.state.phoneNumber);
console.warn(this.state.password);
}}
validationSchema={validationSchema}
>
{(formikProps) => (
<React.Fragment>
<View>
<View>
<Text>Phone number</Text>
<TextInputMask
keyboardType="number-pad"
ref={(ref) => (this.phoneField = ref)}
onChangeText={(formatted, extracted) => {
this.setState({
phoneNumber: extracted,
});
}}
onChange={formikProps.handleChange("phoneNumber")}
onBlur={formikProps.handleBlur("phoneNumber")}
placeholder={""}
mask={"([000]) [000] [0000]"}
/>
<Text style={styles.errMsg}>
{formikProps.touched.phoneNumber &&
formikProps.errors.phoneNumber}
</Text>
</View>
<View>
<Text style={styles.formLable}>Password</Text>
<TextInput
onChangeText={formikProps.handleChange("password")}
onBlur={formikProps.handleBlur("password")}
placeholder={""}
returnKeyType={"done"}
autoCapitalize={"none"}
autoCorrect={false}
/>
<Text style={styles.errMsg}>
{formikProps.touched.password &&
formikProps.errors.password}
</Text>
<TouchableOpacity
activeOpacity={0.7}
style={styles.btnEye}
onPress={this.showPass}
>
<Image source={eyeImg} style={styles.iconEye} />
</TouchableOpacity>
</View>
</View>
<View style={styles.loginBottom}>
<TouchableOpacity
style={styles.button}
onPress={() => formikProps.handleSubmit()}
>
<Text style={styles.buttonText}> Login </Text>
</TouchableOpacity>
</View>
</React.Fragment>
)}
</Formik>
</ScrollView>
</ImageBackground>
);
}
}
export default Home;
onPress console log is not printed
Someone please help to solve this issue

Answer 1

Formik will manage the state of inputs for you so you don't need to declare it.
const validationSchema = yup.object().shape({
phoneNumber: yup
.string()
.label("Phone Number")
.required("Phone Number is required."),
password: yup.string().label("Password").required("Password is required."),
});
class Home extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<ScrollView>
<Formik
initialValues={{ phoneNumber: "", password: "" }}
onSubmit={(values, actions) => {
alert(JSON.stringify(values));
}}
validationSchema={validationSchema}
>
{({handleChange, values, handleSubmit, touched, errors, handleBlur}) => (
<React.Fragment>
<View>
<View>
<Text>Phone number</Text>
<TextInput
keyboardType="number-pad"
onChangeText={handleChange}
onChange={handleChange("phoneNumber")}
onBlur={handleBlur("phoneNumber")}
placeholder={""}
mask={"([000]) [000] [0000]"}
value={values.phoneNumber}
/>
<Text>
{touched.phoneNumber &&
errors.phoneNumber}
</Text>
</View>
<View>
<Text>Password</Text>
<TextInput
onChangeText={handleChange("password")}
onBlur={handleBlur("password")}
placeholder={""}
returnKeyType={"done"}
autoCapitalize={"none"}
autoCorrect={false}
value={values.password}
/>
<Text>
{touched.password &&
errors.password}
</Text>
</View>
</View>
<View >
<TouchableOpacity
onPress={() => handleSubmit()}
>
<Text> Login </Text>
</TouchableOpacity>
</View>
</React.Fragment>
)}
</Formik>
</ScrollView>
</View>
);
}
}
You can also manage the form with the useFormik hook instead of the Formik component
import { useFormik } from 'formik';
const validationSchema = yup.object().shape({
phoneNumber: yup
.string()
.label("Phone Number")
.required("Phone Number is required."),
password: yup.string().label("Password").required("Password is required."),
});
const Home = () => {
const { handleChange, values, handleSubmit, touched, errors, handleBlur } = useFormik({
initialValues: {
phoneNumber: "", password: ""
},
onSubmit: (values, actions) => {
alert(JSON.stringify(values));
},
validationSchema
});
console.log(values);
return (
<View>
<ScrollView>
<View>
<View>
<Text>Phone number</Text>
<TextInput
keyboardType="number-pad"
onChangeText={handleChange}
onChange={handleChange("phoneNumber")}
onBlur={handleBlur("phoneNumber")}
placeholder={""}
mask={"([000]) [000] [0000]"}
value={values.phoneNumber}
/>
<Text>
{touched.phoneNumber &&
errors.phoneNumber}
</Text>
</View>
<View>
<Text>Password</Text>
<TextInput
onChangeText={handleChange("password")}
onBlur={handleBlur("password")}
placeholder={""}
returnKeyType={"done"}
autoCapitalize={"none"}
autoCorrect={false}
value={values.password}
/>
<Text>
{touched.password &&
errors.password}
</Text>
</View>
</View>
<View >
<TouchableOpacity
onPress={() => handleSubmit()}
>
<Text> Login </Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
}
}
Let me know if I misunderstood something or if it helps you