How to make the Formik call a function when the form is invalid - react-native

Question

I have a login form, and when the user/password are not correct I call a function to make a animation in a component, but this function is only called when I pass the user/password to my api and it does not match with the information in the database. I want to call the function when the form is not valid too (before go to my api).
I'm using the formik lib to validate my form, and with that I show the message error, but I don't know how to make it call my animation function. My code is below:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { login } from '../../store/actions/user'
import {
View,
Text,
Animated,
Easing
} from 'react-native'
import { Formik } from 'formik'
import AuthContainer from '../../components/Auth/AuthContainer'
import AuthTitle from '../../components/Auth/AuthTitle'
import AuthButton from '../../components/Auth/AuthButton'
import AuthInput from '../../components/Auth/AuthInput'
import AuthHeader from '../../components/Auth/AuthHeader'
import SpeechBubble from '../../components/Auth/SpeechBubble'
import { validationSchema } from './validationSchema'
import styles from '../../assets/css/styles'
class Login extends Component {
state = {
email: '',
password: '',
shakeAnimation: new Animated.Value(0)
}
componentDidUpdate = prevProps => {
if(prevProps.isLoading && !this.props.isLoading && this.props.token){
this.props.navigation.navigate('Main')
}
else if(this.props.loginError && this.props.isLoading){
this.handleAnimation()
}
}
login = () => {
this.props.onLogin({ ...this.state })
}
navigateToRegister = () => {
this.props.navigation.navigate('Register')
}
handleAnimation = () => {
Animated.sequence([
Animated.timing(this.state.shakeAnimation, { toValue: 10, duration: 80, useNativeDriver: true }),
Animated.timing(this.state.shakeAnimation, { toValue: -10, duration: 80, useNativeDriver: true }),
Animated.timing(this.state.shakeAnimation, { toValue: 10, duration: 80, useNativeDriver: true }),
Animated.timing(this.state.shakeAnimation, { toValue: 0, duration: 80, useNativeDriver: true })
]).start()
}
render(){
return (
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values) => {
this.setState({ email: values.email, password: values.password })
this.login()
}}
validationSchema={validationSchema}
validateOnBlur={false}
validateOnChange={false} >
{formikProps => (
<AuthContainer>
<AuthHeader />
<SpeechBubble>
<Animated.View
style={{ transform: [{translateX: this.state.shakeAnimation}] }}>
<AuthTitle
text={
formikProps.errors.email ?
formikProps.errors.email :
formikProps.errors.password ?
formikProps.errors.password :
!this.props.loginError ?
'Olá! Cadastrou sua conta usando e-mail e senha? Insira-os aqui:' :
this.props.loginError}
styleTitle={!this.props.loginError && formikProps.isValid ? styles.bodyText :
[styles.bodyText, styles.bodyTextError]}/>
</Animated.View>
<AuthInput
placeholder='Seu e-mail'
keyboardType='email-address'
autoFocus={true}
autoCorrect={false}
autoCapitalize='none'
returnKeyType='next'
value={formikProps.values.email}
onChangeText={formikProps.handleChange('email')}
onBlur={formikProps.handleBlur('email')}
blurOnSubmit={false} />
<AuthInput
placeholder='Sua senha'
secureTextEntry={true}
returnKeyType='go'
value={formikProps.values.password}
onBlur={formikProps.handleBlur('password')}
onChangeText={formikProps.handleChange('password')} />
<AuthButton title='Entrar' onPress={formikProps.handleSubmit} />
<View style={styles.bodyBottom}>
<Text style={styles.bodyLink}>Esqueci minha senha</Text>
<Text style={styles.bodyLink} onPress={this.navigateToRegister}>
Ainda não cadastrei uma conta
</Text>
</View>
</SpeechBubble>
</AuthContainer>
)}
</Formik>
)
}
}
const mapStateToProps = ({ user }) => {
return {
isLoading: user.isLoading,
token: user.token,
loginError: user.loginError,
}
}
const mapDispatchToProps = dispatch => {
return {
onLogin: user => dispatch(login(user))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)

Answer 1

The place where you pass formikProps.handleSubmit, just pass a function that calls you api and after calls formikProps.handleSubmit
<AuthButton
title='Entrar'
onPress={() => {
// call what you want
// call formik handleSubmit after
formikProps.handleSubmit()
}}
/>