React Native + Formik hooks example

ReactNativeFormikExample.tsx

import React from 'react'
import { FormikProvider, useFormik } from 'formik'
import * as yup from 'yup'

import TextInputFormik from './TextInputFormik'

const ReactNativeFormikExample: React.FC<unknown> = (props) => {
  const formik = useFormik({
    initialValues: {
      name: '',
    },
    // @TODO - render errors
    validationSchema: yup.object().shape({
      name: yup.string().required('Name is required'),
    }),
    onSubmit: (values) => {
      // do whatever you want with form values
    },
  })

  return (
    <>
      <FormikProvider value={formik}>
        <TextInputFormik
          name="name"
          placeholder={'Name'}
        />
      </FormikProvider>
      <TouchableOpacity onPress={formik.handleSubmit} disabled={!formik.isValid || Object.keys(formik.errors).length > 0} />
    </>
  )
}

export default ReactNativeFormikExample;

TextInputFormik.tsx

import React from 'react';
import { TextInput } from 'react-native';
import { useField } from 'formik';

const TextInputFormik = (props: React.ComponentProps<typeof TextInput>): React.ReactElement => {
  const [field] = useField(props.name)
  return <TextInput {...props} value={field.value} />
}

export default TextInputFormik;

Thanks