formik-clean-code.example.tsx

import React from 'react'
import { StyleSheet, TextInput } from 'react-native'
import { Formik } from 'formik'
import Spinner from 'react-native-loading-spinner-overlay'

export interface IFormDataModel {
  field1: number
  field2: string
}

interface IFormViewModel {
  // Returns the data to the container where the container calls the controller to sets the
  // form value rather than capturing each input update
  onSubmit: (form: IFormDataModel) => void
}

const FormView: React.FC<IFormViewModel> = (props) => {
  const initialValues: IFormDataModel = {
    field1: 45,
    field2: 'any'
  }

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={async values => {
        await props.onSubmit(values)
      }}
    >
      {({ setFieldValue, handleSubmit, values, isSubmitting }) => {
        return (
          <>
            <Spinner
              visible={isSubmitting}
            />
            <TextInput
                value={values.field1}
                onBlur={handleBlur}
                onChangeText={handleChange('field1')}
            />
            <TextInput
              value={values.field2}
              onBlur={handleBlur}
              onChangeText={handleChange('field2')}
            />
            <Button onPress={handleSubmit} disabled={isSubmitting}>Submit</Button>
          </>
        )
      }}
    </Formik>
  )
}

export default FormView