Реагировать на нативную анимацию при отправке редактирования

может кто-нибудь сказать мне, почему эта анимация будет запускаться только после второго нажатия кнопки «Далее»?

Я знаю, что это связано с моими проверками if, но если setTocuhed срабатывает правильно (делает все красным), почему анимация не срабатывает?

Я уже пробовал пару вещей, но ничего не сработало

import React from 'react';
import { Animated, Text, View, Easing } from 'react-native';

import { withNavigationFocus } from 'react-navigation';
import Input from '../../components/UI/Input';
import registerStyles from './registerStyles';

type props = {
  navigation: {
    navigate: (arg: string) => void;
  };
};

const validation = (input: string) => {
  if (input.length < 6) {
    return 'min length 6';
  }

  if (input.length > 30) {
    return 'max length: 30';
  }

  return null;
};

const FullName = (props: props) => {
  const [input, setInput] = React.useState<string>('');
  const [touched, setTouched] = React.useState<boolean>(false);
  const [errorMessage, setErrorMessage] = React.useState<string | null>('');

  const viewRef = new Animated.Value(10);

  const animate = () => {
    return Animated.timing(viewRef, {
      toValue: 22,
      easing: Easing.elastic(100),
      duration: 200,
      useNativeDriver: false
    }).start(() => {
      Animated.timing(viewRef, {
        toValue: 10,
        duration: 0,
        useNativeDriver: false
      }).start();
    });
  };

  return (
    <Animated.View style = {[registerStyles.screen, { paddingLeft: viewRef }]}>
      <Input
        touched = {touched}
        value = {input}
        onChange = {(value) => setInput(value)}
        autoFocus = {true}
        returnKeyType='next'
        label='Full name'
        onSubmitEditing = {() => {
          const validate = validation(input);
          setErrorMessage(() => validate);

          if (validate === null) {
            setInput(() => '');
            setTouched(() => false);
            props.navigation.navigate('Email');
            return;
          }
          if (validate !== null) {
            animate();
            setTouched(() => true);
          }
        }}
      />
      <Text style = {registerStyles.error}>{touched && errorMessage}</Text>
    </Animated.View>
  );
};

export default withNavigationFocus(FullName);

это компонент ввода, если необходимо:

const Input = (props: IInput) => {
  const errorColor = props.touched ? colors.red : colors.black;
  const errorStyles = {
    textField: {
      borderBottomColor: errorColor
    },
    label: {
      color: errorColor
    }
  };

  return (
    <View style = {styles.inputContainer}>
      <Text style = {[styles.label, errorStyles.label]}>{props.label}</Text>
      <TextInput
        autoCapitalize = {props.autoCapitalize}
        onChangeText = {(value) => props.onChange(value)}
        value = {props.value}
        autoFocus = {props.autoFocus}
        ref = {(input) => {
          if (props.inputRef) {
            return props.inputRef(input);
          }
        }}
        style = {[styles.textField, errorStyles.textField]}
        onSubmitEditing = {props.onSubmitEditing}
        returnKeyType = {props.returnKeyType}
        blurOnSubmit = {false}
      />
    </View>
  );
};

🤔 А знаете ли вы, что...
Синтаксис JavaScript схож с синтаксисом языка программирования Java, но они не связаны.