Synchronous validation with React Native TextInput

SyncTextInputValidation.tsx

import { TextInput } from 'react-native';
import Animated, {
  useAnimatedRef,
  useHandler,
  dispatchCommand,
  useEvent,
} from 'react-native-reanimated';

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

function ReanimatedTextInput() {
  const animatedRef = useAnimatedRef();

  const handlers = {
    onChange: (event: any) => {
      'worklet';
      console.log('event', event);
    },
  };
  const { doDependenciesDiffer } = useHandler(handlers);

  const textInputHandler = useEvent(
    (event: any) => {
      'worklet';
      const { onChange } = handlers;
      if (onChange) {
        const textWithoutSpecialCharacters = event.text.replace(/[^a-zA-Z]+/g, '');
        if (textWithoutSpecialCharacters !== event.text) {
          dispatchCommand(animatedRef, 'setTextAndSelection', [
            event.eventCount,
            textWithoutSpecialCharacters,
            -1,
            -1,
          ]);
        }
        onChange(event);
      }
    },
    ['onChange'],
    doDependenciesDiffer
  );

  return (
    <AnimatedTextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginTop: 100 }}
      onChange={textInputHandler}
      ref={animatedRef}
    />
  );
}