React Native Formik

Forms are very verbose in React, and a lot of the time, you end up copy pasting a lot of boilerplate.

This repository is a set of high order components designed to help you take control again of your forms with React Native and Formik

Features

• Easily composable set of helpers
• Connects your React Native input to Formik with no boilerplate (See handleTextInput)
• Add a type prop on your TextInput to take care of the input options based on the type (See withInputTypeProps)
• Automatically focus the next input (See withNextInputAutoFocus)
• Component agnostic: Handle any other form component with any design with withFormikControl

The point is to make your forms easy to write and provide features your users will expect with code as small as:

<MyInputlabel="Email"name="email"type="email"/><MyInputlabel="Password"name="password"type="password"/><Switchlabel="Accept terms and conditions"name="accepted"/><DatePickerlabel="Birthday"name="birthday"/><ButtononPress={props.handleSubmit}title="SUBMIT"/>

Table of contents

• Installation
• Guides
  • The Gist
  • Custom components
  • Formatting inputs
  • Move form above keyboard
  • Step by step formik + react-native-formik integration
• API
  • handleTextInput
  • withErrorIfNeeded
  • withError
  • withFocus
  • withInputTypeProps
  • withNextInputAutoFocus
  • withTouched
  • withPickerValues

Installation

yarn add formik react-native-formik

Guides

The Gist See it in Snack

Use any Input component

We can use any Input component. It will receive an error prop in addition to the usual TextInput props.

For instance, we can use react-native-material-textfield for the material design.

Create our form logic

We can compose our input with handleTextInput to make it boilerplate free. It will:

• automatically manage its state in formik provided it has a name prop
• automatically set its error prop if input is touched or form has been submitted
• automatically adds the correct TextInput props dependending on its type (at the moment, email, password, digits, name are supported)

Let's add in withNextInputAutoFocusInput, which provides those awesome features:

• when an input is submitted, it will automatically focuses on the next or submit the form if it's the last one
• sets return key to "next" or "done" if input is the last one or not For withNextInputAutoFocus to work, the input component should be a class and implement a focus method.

import{compose}from"recompose";import{handleTextInput,withNextInputAutoFocusInput}from"react-native-formik";import{TextField}from"react-native-material-textfield";constMyInput=compose(handleTextInput,withNextInputAutoFocusInput)(TextField);

To complement withNextInputAutoFocusInput, we need to create a Form component, for instance:

import{View}from"react-native";import{withNextInputAutoFocusForm}from"react-native-formik";constForm=withNextInputAutoFocusForm(View);

We can also create a validation schema, with yup. It's of course possible to use other validation possibilities provided by Formik, but yup makes validation and error messaging painless.

import*asYupfrom"yup";constvalidationSchema=Yup.object().shape({email: Yup.string().required().email("well that's not an email"),password: Yup.string().required().min(2,"pretty sure this will be hacked")});

Then the form in itself becomes simple:

exportdefaultprops=>(<FormikonSubmit={values=>console.log(values)}validationSchema={validationSchema}render={props=>{return(<Form><MyInputlabel="Email"name="email"type="email"/><MyInputlabel="Password"name="password"type="password"/><MyInputlabel="First Name"name="firstName"type="name"/><MyInputlabel="Last Name"name="lastName"type="name"/><ButtononPress={props.handleSubmit}title="SUBMIT"/></Form>);}}/>);

Full code:

importReactfrom"react";import{Button,TextInput,View}from"react-native";import{compose}from"recompose";import{Formik}from"formik";import*asYupfrom"yup";import{handleTextInput,withNextInputAutoFocusForm,withNextInputAutoFocusInput}from"react-native-formik";import{TextField}from"react-native-material-textfield";constMyInput=compose(handleTextInput,withNextInputAutoFocusInput)(TextField);constForm=withNextInputAutoFocusForm(View);constvalidationSchema=Yup.object().shape({email: Yup.string().required("please! email?").email("well that's not an email"),password: Yup.string().required().min(2,"pretty sure this will be hacked")});exportdefaultprops=>(<FormikonSubmit={values=>console.log(values)}validationSchema={validationSchema}render={props=>{return(<Form><MyInputlabel="Email"name="email"type="email"/><MyInputlabel="Password"name="password"type="password"/><MyInputlabel="First Name"name="firstName"type="name"/><MyInputlabel="Last Name"name="lastName"type="name"/><ButtononPress={props.handleSubmit}title="SUBMIT"/></Form>);}}/>);

Boilerplate-free, hassle-free, our form is awesome with minimum code required.

Custom components See it in Snack

withFormikControl usage

Thanks to withFormikControl, formik and react-native-formik can handle any custom component just like TextInputs, granted that the component takes as props:

{value: ValueType,setFieldValue: (value: ValueType)=>void,error: ?string,setFieldTouched: ()=>void}

If you want to use withNextInputAutoFocus, your component should be a class and have a focus method. Below is a simple example, a full example is available on ./src/Example/DatePicker.js.

Simple Example: using a Switch

A very simple example would be handling a Switch component in your form:

importReactfrom"react";import{Text,SwitchasRNSwitch}from"react-native";import{withFormikControl}from"react-native-formik";classSwitchextendsReact.PureComponent{render(){const{ error, value, setFieldValue, label }=this.props;return(<React.Fragment><RNSwitchvalue={value}ios_backgroundColor={error ? "red" : "transparent"}onValueChange={setFieldValue}/><Text>{label}</Text></React.Fragment>);}}exportdefaultwithFormikControl(Switch);

You can now use it in your form just like any other input:

<Switchlabel="Accept terms and conditions"name="termsAndConditionsAccepted"/>

Formatting inputs

You may need to format inputs as the user types in. For instance, adding spaces in a telephone number (0612345678 -> 06 12 34 56 78). Here's how you would do it:

constformatPhoneNumber: string=>string=(unformattedPhoneNumber)=> ...;
...
<Formikrender={({ values })=>{return(<Form><MyInputname="phoneNumber"value={formatPhoneNumber(values.phoneNumber)}/></Form>);}}/>

Move form above keyboard

The purpose of this section is to give you a solution to create a bottom form which will go up when the keyboard appears, and the content at the top at the page will disappear.

You have to:

• Create a form like you learnt above ;
• Use react-native-keyboard-spacer: it will create view with the keyboard's size when the keyboard will opened;
• Use react-native-hide-with-keyboard: it will hide component when the keyboard will opened.

importReact,{PureComponent}from"react";import{Image,Platform,ScrollView}from"react-native";importHidefrom"react-native-hide-with-keyboard";importKeyboardSpacerfrom"react-native-keyboard-spacer";import{Formik}from"formik";import{Button,FormFormik,TextInputFormik}from"./components";constcat=require("./cat.jpg");classAdoptACatextendsPureComponent<{}>{render(){return(<ScrollViewstyle={styles.container}contentContainerStyle={styles.contentContainer}keyboardShouldPersistTaps="handled"><Hide><Imagesource={cat}style={styles.image}/></Hide><Viewstyle={styles.fillContainer}/><FormikonSubmit={()=>{}}render={props=>(<FormFormik><TextInputFormikname="catName"placeholder={"His name"}returnKeyType="next"type="name"/><TextInputFormikname="humanName"placeholder={"Your name"}returnKeyType="done"type="name"/><Buttontext={"Adopt him ..."}/></FormFormik>)}/>{Platform.OS==="ios"&&<KeyboardSpacer/>}</ScrollView>);}}conststyles={container: {backgroundColor: "white",flex: 1,padding: 20},contentContainer: {flex: 1},fillContainer: {flex: 1},image: {alignSelf: "center",resizeMode: "contain"}};exportdefaultAdoptACat;

For Android, we don't have to use react-native-keyboard-spacer because android:windowSoftInputMode is in adjustResize mode. Indeed, the view is automatically resize and you don't have to fill it like on iOS.

Enjoy your life :

API

withFormikControl

See usage

handleTextInput

A set of default HOC to manage TextInputs. Includes withErrorIfNeeded, withInputTypeProps and withFormikControl remapped for specifically for the React Native TextInput

withErrorIfNeeded

Pass in the Formik error for the input as a prop, only if input has been touched or the form has been submitted

withError

Pass in the Formik error for the input as a prop.

withFocus

Add a focused prop to the input depending on its focus state.

withInputTypeProps

Let's face it, you'll always want to remove auto-capitalization for email inputs and use the email keyboard.

Using withInputTypeProps and passing a type, you'll always get the correct props for you input.

import{TextInput}from"react-native";import{withInputTypeProps}from"react-native-formik";constMyInput=withInputTypeProps(TextInput);constemailInput=()=><MyInputtype="email"/>;

Authorized types as of now are email, password, digits and name. Setting another type has no consequence.

Check the props set by the type in the source!

withNextInputAutoFocus See example in Snack

• when an input is submitted, it will automatically focuses on the next or submit the form if it's the last one
• sets return key to "next" or "done" if input is the last one or not
• ⚠️ your input component needs to be a class and needs to implement a focus function
• ⚠️ Inputs need to be wrapped by withNextInputAutoFocusInput and the container of the inputs need to be wrapped in withNextInputAutoFocusForm.

import{TextInput,View}from"react-native";import{withNextInputAutoFocusForm,withNextInputAutoFocusInput}from"react-native-formik";classCustomInputextendsReact.PureComponent{// Implement a focus function that focused whatever needs to be focusedfocus=()=>{this.input.focus();}render(){return(<TextFieldref={input=>this.input=input}{...this.props}/>);}}constMyInput=withNextInputAutoFocusInput(CustomInput);constForm=withNextInputAutoFocusForm(View);exportdefaultprops=>(<FormikonSubmit={values=>console.log(values)}validationSchema={validationSchema}render={props=>{return(<Form><MyInputlabel="Email"name="email"type="email"/><MyInputlabel="Password"name="password"type="password"/><MyInputlabel="First Name"name="firstName"type="name"/></Form>);}}/>);

withTouched

Pass in the Formik touched value for the input as a prop.

withPickerValues

Wraps your component into a TouchableOpacity which, when pressed, opens a dialog to pick a value. You need to provide a values props with the pickable items.

If you need to dismiss the picker's "Keyboard", you can use KeyboardModal.dismiss() like below.

import{TextInput,View}from"react-native";import{compose}from"recompose";importmakeInput,{KeyboardModal,withPickerValues}from"react-native-formik";constMyPicker=compose(makeInput,withPickerValues)(TextInput);exportdefaultprops=>(<FormikonSubmit={values=>{KeyboardModal.dismiss();console.log(values);}}validationSchema={validationSchema}render={props=>{return(<View><MyPickername="gender"values={[{label: "male",value: "Mr"},{label: "female",value: "Mrs"}]}/></View>);}}/>);

Guide

Move form above keyboard

The purpose of this section is to give you a solution to create a bottom form which will go up when the keyboard appears, and the content at the top at the page will disappear.

You have to:

• Create a form like you learnt above ;
• Use react-native-keyboard-spacer: it will create view with the keyboard's size when the keyboard will opened;
• Use react-native-hide-with-keyboard: it will hide component when the keyboard will opened.

importReact,{PureComponent}from"react";import{Image,Platform,ScrollView}from"react-native";importHidefrom"react-native-hide-with-keyboard";importKeyboardSpacerfrom"react-native-keyboard-spacer";import{Formik}from"formik";import{Button,FormFormik,TextInputFormik}from"./components";constcat=require("./cat.jpg");classAdoptACatextendsPureComponent<{}>{render(){return(<ScrollViewstyle={styles.container}contentContainerStyle={styles.contentContainer}keyboardShouldPersistTaps="handled"><Hide><Imagesource={cat}style={styles.image}/></Hide><Viewstyle={styles.fillContainer}/><FormikonSubmit={()=>{}}render={props=>(<FormFormik><TextInputFormikname="catName"placeholder={"His name"}returnKeyType="next"type="name"/><TextInputFormikname="humanName"placeholder={"Your name"}returnKeyType="done"type="name"/><Buttontext={"Adopt him ..."}/></FormFormik>)}/>{Platform.OS==="ios"&&<KeyboardSpacer/>}</ScrollView>);}}conststyles={container: {backgroundColor: "white",flex: 1,padding: 20},contentContainer: {flex: 1},fillContainer: {flex: 1},image: {alignSelf: "center",resizeMode: "contain"}};exportdefaultAdoptACat;

For Android, we don't have to use react-native-keyboard-spacer because android:windowSoftInputMode is in adjustResize mode. Indeed, the view is automatically resize and you don't have to fill it like on iOS.

Enjoy your life :