useForm.ts

const FORM_INIT_STATE = {
  firstName: { value: '' },
  lastName: { value: '' },
  email: { value: '' },
}
const STATE_VALIDATOR_SCHEMA = {
  firstName: {
    required: true,
    validator: isLengthy,
    validateOn: 'submit',
  },
  lastName: {
    required: true,
    validator: isLengthy,
    validateOn: 'submit',
  },
  email: {
    required: true,
    validator: isValidEmail,
    validateOn: 'submit',
  },
}
const App = (): JSX.Element => {
  const onSubmit = useCallback(values => {
    console.log('hi', values)
    alert('Successs')
  }, [])
  const { handleOnChange, handleOnSubmit, values, errors } = useForm(
    FORM_INIT_STATE,
    STATE_VALIDATOR_SCHEMA,
    onSubmit,
  )
  const { firstName, lastName, email } = values
  return (
    <View style={styles.container}>
      {!!errors.firstName && (
        <Text type="smallBody" color={colors.ERROR_RED}>
          {errors.firstName}
        </Text>
      )}
      <TextInput
        style={styles.input}
        value={firstName}
        onChangeText={text => handleOnChange('firstName', text)}
      />
      {!!errors.lastName && (
        <Text type="smallBody" color={colors.ERROR_RED}>
          {errors.lastName}
        </Text>
      )}
      <TextInput
        style={styles.input}
        value={lastName}
        onChangeText={text => handleOnChange('lastName', text)}
      />
      {!!errors.email && (
        <Text type="smallBody" color={colors.ERROR_RED}>
          {errors.email}
        </Text>
      )}
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={text => handleOnChange('email', text)}
      />
      <Button
        label="submit"
        theme="dark"
        type="primary"
        onPress={handleOnSubmit}
      />
    </View>
  )
}
export default App