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 (SeewithInputTypeProps
) - 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:
<MyInput label="Email" name="email" type="email" /><MyInput label="Password" name="password" type="password" /><Switch label="Accept terms and conditions" name="accepted" /><DatePicker label="Birthday" name="birthday" /><Button onPress=propshandleSubmit title="SUBMIT" />
Table of contents
Installation
yarn add formik react-native-formik
Guides
See it in Snack
The GistUse 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 afocus
method.
;;; const MyInput = TextField;
To complement withNextInputAutoFocusInput
, we need to create a Form
component, for instance:
;; const Form = ;
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.
; const validationSchema = Yupobjectshape email: Yup password: Yup ;
Then the form in itself becomes simple:
<Formik onSubmit= console validationSchema=validationSchema render= { return <Form> <MyInput label="Email" name="email" type="email" /> <MyInput label="Password" name="password" type="password" /> <MyInput label="First Name" name="firstName" type="name" /> <MyInput label="Last Name" name="lastName" type="name" /> <Button onPress=propshandleSubmit title="SUBMIT" /> </Form> ; } />;
Full code:
;;;;;;; const MyInput = TextField;const Form = ; const validationSchema = Yupobjectshape email: Yup password: Yup ; <Formik onSubmit= console validationSchema=validationSchema render= { return <Form> <MyInput label="Email" name="email" type="email" /> <MyInput label="Password" name="password" type="password" /> <MyInput label="First Name" name="firstName" type="name" /> <MyInput label="Last Name" name="lastName" type="name" /> <Button onPress=propshandleSubmit title="SUBMIT" /> </Form> ; } />;
Boilerplate-free, hassle-free, our form is awesome with minimum code required.
See it in Snack
Custom componentswithFormikControl 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 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:
;;; PureComponent { const error value setFieldValue label = thisprops; return <ReactFragment> <RNSwitch value=value ios_backgroundColor=error ? "red" : "transparent" onValueChange=setFieldValue /> <Text>label</Text> </ReactFragment> ; } Switch;
You can now use it in your form just like any other input:
<Switch label="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:
const formatPhoneNumber: string => ...; ... <Formik render= { return <Form> <MyInput name="phoneNumber" value= /> </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.
;;;;;;const cat = ; <{}> { return <ScrollView style=stylescontainer contentContainerStyle=stylescontentContainer keyboardShouldPersistTaps="handled" > <Hide> <Image source=cat style=stylesimage /> </Hide> <View style=stylesfillContainer /> <Formik onSubmit= {} render= <FormFormik> <TextInputFormik name="catName" placeholder="His name" returnKeyType="next" type="name" /> <TextInputFormik name="humanName" placeholder="Your name" returnKeyType="done" type="name" /> <Button text="Adopt him ..." /> </FormFormik> /> PlatformOS === "ios" && <KeyboardSpacer /> </ScrollView> ; } const styles = container: backgroundColor: "white" flex: 1 padding: 20 contentContainer: flex: 1 fillContainer: flex: 1 image: alignSelf: "center" resizeMode: "contain" ; ;
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.
;; const MyInput = ; const emailInput = <MyInput type="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!
See example in Snack
withNextInputAutoFocus- 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 inwithNextInputAutoFocusForm
.
;; PureComponent // Implement a focus function that focused whatever needs to be focused { thisinput; } { return <TextField ref= thisinput = input ...thisprops /> ; } const MyInput = ;const Form = ; <Formik onSubmit= console validationSchema=validationSchema render= { return <Form> <MyInput label="Email" name="email" type="email" /> <MyInput label="Password" name="password" type="password" /> <MyInput label="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.
;;; const MyPicker = TextInput; <Formik onSubmit= { KeyboardModal; console; } validationSchema=validationSchema render= { return <View> <MyPicker name="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.
;;;;;;const cat = ; <{}> { return <ScrollView style=stylescontainer contentContainerStyle=stylescontentContainer keyboardShouldPersistTaps="handled" > <Hide> <Image source=cat style=stylesimage /> </Hide> <View style=stylesfillContainer /> <Formik onSubmit= {} render= <FormFormik> <TextInputFormik name="catName" placeholder="His name" returnKeyType="next" type="name" /> <TextInputFormik name="humanName" placeholder="Your name" returnKeyType="done" type="name" /> <Button text="Adopt him ..." /> </FormFormik> /> PlatformOS === "ios" && <KeyboardSpacer /> </ScrollView> ; } const styles = container: backgroundColor: "white" flex: 1 padding: 20 contentContainer: flex: 1 fillContainer: flex: 1 image: alignSelf: "center" resizeMode: "contain" ; ;
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 :