iremlopsum · June 16, 2020 13:11 · Jun 16, 2020
diff --git a/useForm.ts b/useForm.ts
@@ -0,0 +1,75 @@
+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