{"id":13787300,"url":"https://github.com/bamlab/react-native-formik","last_synced_at":"2025-06-26T03:05:00.433Z","repository":{"id":30394603,"uuid":"124428023","full_name":"bamlab/react-native-formik","owner":"bamlab","description":"Set of helpers to make form awesome with React Native and Formik","archived":false,"fork":false,"pushed_at":"2023-01-03T17:00:13.000Z","size":4927,"stargazers_count":400,"open_issues_count":57,"forks_count":50,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-27T04:48:44.858Z","etag":null,"topics":["form","formik","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bamlab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-08T17:52:16.000Z","updated_at":"2025-03-14T02:41:05.000Z","dependencies_parsed_at":"2023-01-14T17:00:40.775Z","dependency_job_id":null,"html_url":"https://github.com/bamlab/react-native-formik","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/bamlab/react-native-formik","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bamlab%2Freact-native-formik","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bamlab%2Freact-native-formik/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bamlab%2Freact-native-formik/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bamlab%2Freact-native-formik/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bamlab","download_url":"https://codeload.github.com/bamlab/react-native-formik/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bamlab%2Freact-native-formik/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261990349,"owners_count":23241188,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","formik","react","react-native"],"created_at":"2024-08-03T20:00:32.576Z","updated_at":"2025-06-26T03:05:00.400Z","avatar_url":"https://github.com/bamlab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Formik [![Coverage Status](https://coveralls.io/repos/github/bamlab/react-native-formik/badge.svg?branch=master)](https://coveralls.io/github/bamlab/react-native-formik?branch=master) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![NPM downloads](https://img.shields.io/npm/dm/react-native-formik.svg)](https://www.npmjs.com/package/react-native-formik) [![NPM downloads](https://img.shields.io/npm/dt/react-native-formik.svg)](https://www.npmjs.com/package/react-native-formik)\n\nForms are very verbose in React, and a lot of the time, you end up copy pasting a lot of boilerplate.\n\nThis repository is a set of high order components designed to help you take control again of your forms with React Native and [Formik](https://github.com/jaredpalmer/formik)\n\n**Features**\n\n- Easily composable set of helpers\n- Connects your React Native input to Formik with no boilerplate (See `handleTextInput`)\n- Add a `type` prop on your TextInput to take care of the input options based on the type (See `withInputTypeProps`)\n- Automatically focus the next input (See `withNextInputAutoFocus`)\n- Component agnostic: Handle any other form component with any design with `withFormikControl`\n\nThe point is to make your forms easy to write and provide features your users will expect with code as small as:\n\n```javascript\n\u003cMyInput label=\"Email\" name=\"email\" type=\"email\" /\u003e\n\u003cMyInput label=\"Password\" name=\"password\" type=\"password\" /\u003e\n\u003cSwitch label=\"Accept terms and conditions\" name=\"accepted\" /\u003e\n\u003cDatePicker label=\"Birthday\" name=\"birthday\" /\u003e\n\u003cButton onPress={props.handleSubmit} title=\"SUBMIT\" /\u003e\n```\n\n**Table of contents**\n\n- [Installation](#installation)\n- [Guides](#guides)\n  - [The Gist](#the-gist-see-it-in-snack)\n  - [Custom components](#custom-components-see-it-in-snack)\n  - [Formatting inputs](#formatting-inputs)\n  - [Move form above keyboard](#move-form-above-keyboard)\n  - [Step by step formik + react-native-formik integration](./doc/formik_step_by_step.md)\n- [API](#api)\n  - [handleTextInput](#handleTextInput)\n  - [withErrorIfNeeded](#withErrorIfNeeded)\n  - [withError](#witherror)\n  - [withFocus](#withfocus)\n  - [withInputTypeProps](#withinputtypeprops)\n  - [withNextInputAutoFocus](#withnextinputautofocus)\n  - [withTouched](#withtouched)\n  - [withPickerValues](#withpickervalues)\n\n## Installation\n\n```shell\nyarn add formik react-native-formik\n```\n\n## Guides\n\n### The Gist [See it in Snack](https://snack.expo.io/@almouro/react-native-formik-gist)\n\n#### Use any Input component\n\nWe can use any `Input` component. It will receive an `error` prop in addition to the usual `TextInput` props.\n\nFor instance, we can use [react-native-material-textfield](https://github.com/n4kz/react-native-material-textfield) for the material design.\n\n#### Create our form logic\n\nWe can compose our input with `handleTextInput` to make it boilerplate free. It will:\n\n- automatically manage its state in formik provided it has a `name` prop\n- automatically set its `error` prop if input is touched or form has been submitted\n- automatically adds the correct `TextInput` props dependending on its type (at the moment, `email`, `password`, `digits`, `name` are supported)\n\nLet's add in `withNextInputAutoFocusInput`, which provides those awesome features:\n\n- when an input is submitted, it will automatically focuses on the next or submit the form if it's the last one\n- sets return key to \"next\" or \"done\" if input is the last one or not\n  For `withNextInputAutoFocus` to work, the input component should be a class and implement a `focus` method.\n\n```javascript\nimport { compose } from \"recompose\";\nimport {\n  handleTextInput,\n  withNextInputAutoFocusInput\n} from \"react-native-formik\";\nimport { TextField } from \"react-native-material-textfield\";\n\nconst MyInput = compose(\n  handleTextInput,\n  withNextInputAutoFocusInput\n)(TextField);\n```\n\nTo complement `withNextInputAutoFocusInput`, we need to create a `Form` component, for instance:\n\n```javascript\nimport { View } from \"react-native\";\nimport { withNextInputAutoFocusForm } from \"react-native-formik\";\n\nconst Form = withNextInputAutoFocusForm(View);\n```\n\nWe 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.\n\n```javascript\nimport * as Yup from \"yup\";\n\nconst validationSchema = Yup.object().shape({\n  email: Yup.string()\n    .required()\n    .email(\"well that's not an email\"),\n  password: Yup.string()\n    .required()\n    .min(2, \"pretty sure this will be hacked\")\n});\n```\n\nThen the form in itself becomes simple:\n\n```javascript\nexport default props =\u003e (\n  \u003cFormik\n    onSubmit={values =\u003e console.log(values)}\n    validationSchema={validationSchema}\n    render={props =\u003e {\n      return (\n        \u003cForm\u003e\n          \u003cMyInput label=\"Email\" name=\"email\" type=\"email\" /\u003e\n          \u003cMyInput label=\"Password\" name=\"password\" type=\"password\" /\u003e\n          \u003cMyInput label=\"First Name\" name=\"firstName\" type=\"name\" /\u003e\n          \u003cMyInput label=\"Last Name\" name=\"lastName\" type=\"name\" /\u003e\n          \u003cButton onPress={props.handleSubmit} title=\"SUBMIT\" /\u003e\n        \u003c/Form\u003e\n      );\n    }}\n  /\u003e\n);\n```\n\nFull code:\n\n```javascript\nimport React from \"react\";\nimport { Button, TextInput, View } from \"react-native\";\nimport { compose } from \"recompose\";\nimport { Formik } from \"formik\";\nimport * as Yup from \"yup\";\nimport {\n  handleTextInput,\n  withNextInputAutoFocusForm,\n  withNextInputAutoFocusInput\n} from \"react-native-formik\";\nimport { TextField } from \"react-native-material-textfield\";\n\nconst MyInput = compose(\n  handleTextInput,\n  withNextInputAutoFocusInput\n)(TextField);\nconst Form = withNextInputAutoFocusForm(View);\n\nconst validationSchema = Yup.object().shape({\n  email: Yup.string()\n    .required(\"please! email?\")\n    .email(\"well that's not an email\"),\n  password: Yup.string()\n    .required()\n    .min(2, \"pretty sure this will be hacked\")\n});\n\nexport default props =\u003e (\n  \u003cFormik\n    onSubmit={values =\u003e console.log(values)}\n    validationSchema={validationSchema}\n    render={props =\u003e {\n      return (\n        \u003cForm\u003e\n          \u003cMyInput label=\"Email\" name=\"email\" type=\"email\" /\u003e\n          \u003cMyInput label=\"Password\" name=\"password\" type=\"password\" /\u003e\n          \u003cMyInput label=\"First Name\" name=\"firstName\" type=\"name\" /\u003e\n          \u003cMyInput label=\"Last Name\" name=\"lastName\" type=\"name\" /\u003e\n          \u003cButton onPress={props.handleSubmit} title=\"SUBMIT\" /\u003e\n        \u003c/Form\u003e\n      );\n    }}\n  /\u003e\n);\n```\n\nBoilerplate-free, hassle-free, our form is awesome with minimum code required.\n\n### Custom components [See it in Snack](https://snack.expo.io/@almouro/react-native-formik-gist)\n\n#### withFormikControl usage\n\nThanks to `withFormikControl`, `formik` and `react-native-formik` can handle any custom component just like TextInputs, granted that the component takes as props:\n\n```javascript\n{\n  value: ValueType,\n  setFieldValue: (value: ValueType) =\u003e void,\n  error: ?string,\n  setFieldTouched: () =\u003e void\n}\n```\n\nIf you want to use `withNextInputAutoFocus`, your component should be a class and have a `focus` method.\nBelow is a simple example, a full example is available on `./src/Example/DatePicker.js`.\n\n#### Simple Example: using a Switch\n\nA very simple example would be handling a `Switch` component in your form:\n\n```javascript\nimport React from \"react\";\nimport { Text, Switch as RNSwitch } from \"react-native\";\nimport { withFormikControl } from \"react-native-formik\";\n\nclass Switch extends React.PureComponent {\n  render() {\n    const { error, value, setFieldValue, label } = this.props;\n\n    return (\n      \u003cReact.Fragment\u003e\n        \u003cRNSwitch\n          value={value}\n          ios_backgroundColor={error ? \"red\" : \"transparent\"}\n          onValueChange={setFieldValue}\n        /\u003e\n        \u003cText\u003e{label}\u003c/Text\u003e\n      \u003c/React.Fragment\u003e\n    );\n  }\n}\n\nexport default withFormikControl(Switch);\n```\n\nYou can now use it in your form just like any other input:\n\n```javascript\n\u003cSwitch label=\"Accept terms and conditions\" name=\"termsAndConditionsAccepted\" /\u003e\n```\n\n### Formatting inputs\n\nYou may need to format inputs as the user types in. For instance, adding spaces in a telephone number (`0612345678` -\u003e `06 12 34 56 78`).\nHere's how you would do it:\n\n```javascript\nconst formatPhoneNumber: string =\u003e string = (unformattedPhoneNumber) =\u003e ...;\n\n...\n\n\u003cFormik\n    render={({ values }) =\u003e {\n      return (\n        \u003cForm\u003e\n          \u003cMyInput name=\"phoneNumber\" value={formatPhoneNumber(values.phoneNumber)} /\u003e\n        \u003c/Form\u003e\n      );\n    }}\n/\u003e\n```\n\n### Move form above keyboard\n\nThe 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.\n\nYou have to:\n\n- Create a form like you learnt above ;\n- Use [react-native-keyboard-spacer](https://github.com/Andr3wHur5t/react-native-keyboard-spacer): it will create view with the keyboard's size when the keyboard will opened;\n- Use [react-native-hide-with-keyboard](https://github.com/bamlab/react-native-hide-with-keyboard): it will hide component when the keyboard will opened.\n\n```javascript\nimport React, { PureComponent } from \"react\";\nimport { Image, Platform, ScrollView } from \"react-native\";\nimport Hide from \"react-native-hide-with-keyboard\";\nimport KeyboardSpacer from \"react-native-keyboard-spacer\";\nimport { Formik } from \"formik\";\nimport { Button, FormFormik, TextInputFormik } from \"./components\";\nconst cat = require(\"./cat.jpg\");\n\nclass AdoptACat extends PureComponent\u003c{}\u003e {\n  render() {\n    return (\n      \u003cScrollView\n        style={styles.container}\n        contentContainerStyle={styles.contentContainer}\n        keyboardShouldPersistTaps=\"handled\"\n      \u003e\n        \u003cHide\u003e\n          \u003cImage source={cat} style={styles.image} /\u003e\n        \u003c/Hide\u003e\n        \u003cView style={styles.fillContainer} /\u003e\n        \u003cFormik\n          onSubmit={() =\u003e {}}\n          render={props =\u003e (\n            \u003cFormFormik\u003e\n              \u003cTextInputFormik\n                name=\"catName\"\n                placeholder={\"His name\"}\n                returnKeyType=\"next\"\n                type=\"name\"\n              /\u003e\n              \u003cTextInputFormik\n                name=\"humanName\"\n                placeholder={\"Your name\"}\n                returnKeyType=\"done\"\n                type=\"name\"\n              /\u003e\n              \u003cButton text={\"Adopt him ...\"} /\u003e\n            \u003c/FormFormik\u003e\n          )}\n        /\u003e\n        {Platform.OS === \"ios\" \u0026\u0026 \u003cKeyboardSpacer /\u003e}\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    backgroundColor: \"white\",\n    flex: 1,\n    padding: 20\n  },\n  contentContainer: {\n    flex: 1\n  },\n  fillContainer: {\n    flex: 1\n  },\n  image: {\n    alignSelf: \"center\",\n    resizeMode: \"contain\"\n  }\n};\n\nexport default AdoptACat;\n```\n\nFor 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.\n\nEnjoy your life :\n\n![iOS](https://github.com/bamlab/react-native-formik/blob/master/doc/images/bottomForm.gif)\n\n## API\n\n### withFormikControl\n\nSee [usage](#Custom-components)\n\n### handleTextInput\n\nA set of default HOC to manage TextInputs.\nIncludes `withErrorIfNeeded`, `withInputTypeProps` and `withFormikControl` remapped for specifically for the React Native `TextInput`\n\n### withErrorIfNeeded\n\nPass in the Formik error for the input as a prop, only if input has been touched or the form has been submitted\n\n### withError\n\nPass in the Formik error for the input as a prop.\n\n### withFocus\n\nAdd a `focused` prop to the input depending on its focus state.\n\n### withInputTypeProps\n\nLet's face it, you'll always want to remove auto-capitalization for email inputs and use the email keyboard.\n\nUsing `withInputTypeProps` and passing a `type`, you'll always get the correct props for you input.\n\n```javascript\nimport { TextInput } from \"react-native\";\nimport { withInputTypeProps } from \"react-native-formik\";\n\nconst MyInput = withInputTypeProps(TextInput);\n\nconst emailInput = () =\u003e \u003cMyInput type=\"email\" /\u003e;\n```\n\nAuthorized types as of now are `email`, `password`, `digits` and `name`. Setting another type has no consequence.\n\nCheck [the props set by the type](./src/withInputTypeProps) in the source!\n\n### withNextInputAutoFocus [See example in Snack](https://snack.expo.io/@almouro/Z3JlYX)\n\n- when an input is submitted, it will automatically focuses on the next or submit the form if it's the last one\n- sets return key to \"next\" or \"done\" if input is the last one or not\n- :warning: your input component needs to be a class and needs to implement a `focus` function\n- :warning: Inputs need to be wrapped by `withNextInputAutoFocusInput` and the container of the inputs need to be wrapped in `withNextInputAutoFocusForm`.\n\n```javascript\nimport { TextInput, View } from \"react-native\";\nimport {\n  withNextInputAutoFocusForm,\n  withNextInputAutoFocusInput\n} from \"react-native-formik\";\n\nclass CustomInput extends React.PureComponent {\n  // Implement a focus function that focused whatever needs to be focused\n  focus = () =\u003e { this.input.focus(); }\n\n  render() {\n    return (\n      \u003cTextField ref={input =\u003e this.input = input} {...this.props} /\u003e\n    );\n  }\n}\n\nconst MyInput = withNextInputAutoFocusInput(CustomInput);\nconst Form = withNextInputAutoFocusForm(View);\n\nexport default props =\u003e (\n  \u003cFormik\n    onSubmit={values =\u003e console.log(values)}\n    validationSchema={validationSchema}\n    render={props =\u003e {\n      return (\n        \u003cForm\u003e\n          \u003cMyInput label=\"Email\" name=\"email\" type=\"email\" /\u003e\n          \u003cMyInput label=\"Password\" name=\"password\" type=\"password\" /\u003e\n          \u003cMyInput label=\"First Name\" name=\"firstName\" type=\"name\" /\u003e\n        \u003c/Form\u003e\n      );\n    }}\n  /\u003e\n);\n```\n\n### withTouched\n\nPass in the Formik touched value for the input as a prop.\n\n### withPickerValues\n\nWraps your component into a `TouchableOpacity` which, when pressed, opens a dialog to pick a value.\nYou need to provide a `values` props with the pickable items.\n\nIf you need to dismiss the picker's \"Keyboard\", you can use `KeyboardModal.dismiss()` like below.\n\n```javascript\nimport { TextInput, View } from \"react-native\";\nimport { compose } from \"recompose\";\nimport makeInput, {\n  KeyboardModal,\n  withPickerValues\n} from \"react-native-formik\";\n\nconst MyPicker = compose(\n  makeInput,\n  withPickerValues\n)(TextInput);\n\nexport default props =\u003e (\n  \u003cFormik\n    onSubmit={values =\u003e {\n      KeyboardModal.dismiss();\n      console.log(values);\n    }}\n    validationSchema={validationSchema}\n    render={props =\u003e {\n      return (\n        \u003cView\u003e\n          \u003cMyPicker\n            name=\"gender\"\n            values={[\n              { label: \"male\", value: \"Mr\" },\n              { label: \"female\", value: \"Mrs\" }\n            ]}\n          /\u003e\n        \u003c/View\u003e\n      );\n    }}\n  /\u003e\n);\n```\n\n## Guide\n\n### Move form above keyboard\n\nThe 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.\n\nYou have to:\n\n- Create a form like you learnt above ;\n- Use [react-native-keyboard-spacer](https://github.com/Andr3wHur5t/react-native-keyboard-spacer): it will create view with the keyboard's size when the keyboard will opened;\n- Use [react-native-hide-with-keyboard](https://github.com/bamlab/react-native-hide-with-keyboard): it will hide component when the keyboard will opened.\n\n```javascript\nimport React, { PureComponent } from \"react\";\nimport { Image, Platform, ScrollView } from \"react-native\";\nimport Hide from \"react-native-hide-with-keyboard\";\nimport KeyboardSpacer from \"react-native-keyboard-spacer\";\nimport { Formik } from \"formik\";\nimport { Button, FormFormik, TextInputFormik } from \"./components\";\nconst cat = require(\"./cat.jpg\");\n\nclass AdoptACat extends PureComponent\u003c{}\u003e {\n  render() {\n    return (\n      \u003cScrollView\n        style={styles.container}\n        contentContainerStyle={styles.contentContainer}\n        keyboardShouldPersistTaps=\"handled\"\n      \u003e\n        \u003cHide\u003e\n          \u003cImage source={cat} style={styles.image} /\u003e\n        \u003c/Hide\u003e\n        \u003cView style={styles.fillContainer} /\u003e\n        \u003cFormik\n          onSubmit={() =\u003e {}}\n          render={props =\u003e (\n            \u003cFormFormik\u003e\n              \u003cTextInputFormik\n                name=\"catName\"\n                placeholder={\"His name\"}\n                returnKeyType=\"next\"\n                type=\"name\"\n              /\u003e\n              \u003cTextInputFormik\n                name=\"humanName\"\n                placeholder={\"Your name\"}\n                returnKeyType=\"done\"\n                type=\"name\"\n              /\u003e\n              \u003cButton text={\"Adopt him ...\"} /\u003e\n            \u003c/FormFormik\u003e\n          )}\n        /\u003e\n        {Platform.OS === \"ios\" \u0026\u0026 \u003cKeyboardSpacer /\u003e}\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    backgroundColor: \"white\",\n    flex: 1,\n    padding: 20\n  },\n  contentContainer: {\n    flex: 1\n  },\n  fillContainer: {\n    flex: 1\n  },\n  image: {\n    alignSelf: \"center\",\n    resizeMode: \"contain\"\n  }\n};\n\nexport default AdoptACat;\n```\n\nFor 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.\n\nEnjoy your life :\n\n![iOS](https://github.com/bamlab/react-native-formik/blob/master/doc/images/bottomForm.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbamlab%2Freact-native-formik","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbamlab%2Freact-native-formik","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbamlab%2Freact-native-formik/lists"}