{"id":4497,"url":"https://github.com/bietkul/react-native-form-builder","last_synced_at":"2025-04-09T11:11:31.682Z","repository":{"id":49327474,"uuid":"83707505","full_name":"bietkul/react-native-form-builder","owner":"bietkul","description":"Handle your forms in a smart way","archived":false,"fork":false,"pushed_at":"2019-10-30T22:15:12.000Z","size":99,"stargazers_count":120,"open_issues_count":20,"forks_count":68,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-01T15:13:36.792Z","etag":null,"topics":["form","form-builder","nested-forms","picker","react-native","textinput","theme"],"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/bietkul.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":"2017-03-02T17:47:22.000Z","updated_at":"2025-01-04T22:10:38.000Z","dependencies_parsed_at":"2022-09-16T19:00:40.477Z","dependency_job_id":null,"html_url":"https://github.com/bietkul/react-native-form-builder","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bietkul%2Freact-native-form-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bietkul%2Freact-native-form-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bietkul%2Freact-native-form-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bietkul%2Freact-native-form-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bietkul","download_url":"https://codeload.github.com/bietkul/react-native-form-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027411,"owners_count":21035594,"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","form-builder","nested-forms","picker","react-native","textinput","theme"],"created_at":"2024-01-05T20:17:14.393Z","updated_at":"2025-04-09T11:11:31.655Z","avatar_url":"https://github.com/bietkul.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Forms"],"readme":"[![NPM Version](https://img.shields.io/npm/v/react-native-form-builder.svg?style=flat)](https://www.npmjs.com/package/react-native-form-builder)\n# react-native-form-builder\n![alt text](http://g.recordit.co/7PqX8Ft7VO.gif)\n  ![alt text](http://g.recordit.co/RWFvqi5tXG.gif)\n# Note: \nIf you're looking for a better form management library with more advanced features, Please check out [React Reactive Form](https://github.com/bietkul/react-reactive-form).\n## Features\n- Generate Form Fields UI\n- Manage, track state \u0026 values of fields\n- Automatically manages focus to next field on submit (TextInput)\n- Handle all keyboard related problems smartly\n- Supports custom validations \u0026 nested forms\n- Uses \u003ca href=\"https://github.com/GeekyAnts/NativeBase\"\u003eNativebase\u003c/a\u003e components\n\n## Getting Started\n\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [Properties](#properties)\n  + [Basic](#basic)\n  + [Methods](#methods)\n  - [Form Fields](#form-fields)\n    + [Field Structure](#field-structure)\n    + [Common Properties to all Fields](#common-properties-to-all-fields)\n    - [Field Types](#field-types)\n      + [TextInput](#textinput)\n      + [Picker](#picker)\n      + [Switch](#switch)\n      + [Date](#date)\n      + [Select](#select)\n   + [Nested Forms](#nested-forms)\n   + [Prefilling Form's Values](#prefill-form-values)\n   + [Add Custom Validations](#add-custom-validations)\n   + [Customize Your Form](#customize-your-form)\n   + [Add custom components](#add-custom-components)\n   + [Add custome error component](#add-custom-error-component)\n- [Example](#example)\n\n## Installation\n\n`react-native-form-builder`  requires a peer of [`native-base`](https://github.com/GeekyAnts/NativeBase)\n\n\nTo Install the peer dependecy\n```\n$ npm i native-base --save\n\n``` \nlink the peer dependecy using \n\n```\nreact-native link\n```\nand then insteall `react-native-form-builder`\n\n```bash\n$ npm i react-native-form-builder --save\n```\n\n## Basic Usage\n\n- Install `react-native` first\n\n```bash\n$ npm i react-native -g\n```\n- Initialization of a react-native project\n\n```bash\n$ react-native init myproject\n```\n\n- Then, edit `myproject/index.ios.js`, like this:  \nExample: Login Form consisting of three fields (username, password, country)\n\n```jsx\nimport React, { Component } from 'react';\nimport { AppRegistry } from 'react-native';\nimport { View, Text, Button } from 'native-base';\nimport GenerateForm from 'react-native-form-builder';\n\nconst styles = {\n  wrapper: {\n    flex: 1,\n    marginTop: 150,\n  },\n  submitButton: {\n    paddingHorizontal: 10,\n    paddingTop: 20,\n  },\n};\n// These Fields will create a login form with three fields\nconst fields = [\n  {\n    type: 'text',\n    name: 'user_name',\n    required: true,\n    icon: 'ios-person',\n    label: 'Username',\n  },\n  {\n    type: 'password',\n    name: 'password',\n    icon: 'ios-lock',\n    required: true,\n    label: 'Password',\n  },\n  {\n    type: 'picker',\n    name: 'country',\n    mode: 'dialog',\n    label: 'Select Country',\n    defaultValue: 'INDIA',\n    options: ['US', 'INDIA', 'UK', 'CHINA', 'FRANCE'],\n  },\n];\nexport default class FormGenerator extends Component {\n  login() {\n    const formValues = this.formGenerator.getValues();\n    console.log('FORM VALUES', formValues);\n  }\n  render() {\n    return (\n      \u003cView style={styles.wrapper}\u003e\n        \u003cView\u003e\n          \u003cGenerateForm\n            ref={(c) =\u003e {\n              this.formGenerator = c;\n            }}\n            fields={fields}\n          /\u003e\n        \u003c/View\u003e\n        \u003cView style={styles.submitButton}\u003e\n          \u003cButton block onPress={() =\u003e this.login()}\u003e\n            \u003cText\u003eLogin\u003c/Text\u003e\n          \u003c/Button\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nAppRegistry.registerComponent('FormGenerator', () =\u003e FormGenerator);\n```\n## Properties\n### Basic\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| autoValidation | true | `bool` | if `false` then auto validation script will not run i.e formBuilder will not validate form data automatically. |\n| onValueChange | N/A | `function` | Invoked every time after a field changes it's value |\n| customValidation | N/A | `function` | This function will be triggered everytime before a field changes it's value, here you can write your custom validation script \u0026 set error accordingly. |\n| customComponents | N/A | `object` | To define your custom type of components.|\n| formData | N/A | `object` | To prefill the form values.|\n| fields | `required` | `array` | Array of form fields. |\n| scrollViewProps | N/A | `object` | Scrollview custom props. |\n| errorComponent | N/A | `React Component` | Custom error display component. |\n\n### Methods:\nCurrently, these methods are available in FormBuilder, you can access them by using ref property.\n\n### getValues\nTo extract the values of form fields.  \nReturns: An object consisting of field values (fieldName: value).  \nfor e.g    \n```\n{\n  username: 'bietkul'\n  password: 'bietkul@git'\n}\n```\n### setValues\nForcefully set values for particular fields.\u003cbr/\u003e\nParameters: An object of key value pairs(`name: value`).\u003cbr/\u003e\nname: Field name for which value has to be set.\u003cbr/\u003e\nvalue: Value for that particular field  \nFor e.g\n```\n{ name1: value1, name2: value2, .....}\n```\n### resetForm\nReset Form values as well as errors.\n### setToDefault\nForcefully set values to default for particular fields.  \nParameters: An array of strings, where every string is the name of a field for which value has to be set as default value.  \nFor e.g\n```\n[fieldName1, fieldName2, fieldName3 .....]\n```\n\n### Form Fields\n### Field Structure\nA field is an object which has the properties required to generate it.\nIt looks something like that :\n```jsx\n{\n  type: 'text',\n  name: 'user_name',\n  label: 'Username'\n}\n```\n\n### Common Properties to all Fields\nThese properties are applicable on all fields.\n\n| Property  | Required  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| type | `yes` | `enum` only possible values are : { text, password, group, email, number, url, select, switch, date } | To define type of field. |\n| name | `yes` | `string` | Every field should has a name which works as an unique identifier for that field. |\n| label | `yes` | `string` | Field label to display. |\n| editable | `No` | `bool` | To decide that whether a field is editable or not. |\n| required | `No` | `bool` | Helps to decide if a field can has empty value or not. Doesn't work in case of `autoValidation = false` . |\n| defaultValue | `No` | `Depends on field's type` | Sets the intial value for that field before the form initialization. |\n| hidden | `No` | `bool` | If `true` then a field will not be displayed. |\n\n### Field Types\n### TextInput\nSupports all these kind of types :-\ntext,\npassword,\nemail,\nurl,\nnumber\n\n#### Extra Properties\n| Props  | Default | Type | Description |\n| :------------ |:--------------- |:---------------| :-----|\n| iconName | N/A | `string` | Sets the icon, you can use any icon name which is available in `react-native-vector-icons`|  \n| iconOrientaion | `left (default)` or `right` | `string` | Adjust icon orientation |\n| props | N/A | `object` | Here you can define extra props which are applicable for react native TextInput Component. For e.g. { multiline: true, secureTextEntry : true .... }\n\n#### Value Type : `String` ( Except for type `number` )\n\n### Picker\n`type: picker`\nUses native picker\n\n#### Extra Properties\n| Props  | Default | Type | Description |\n| :------------ |:--------------- |:---------------| :-----|\n| options (required) | N/A | `array` | An array of strings to define available options for e.g. ['CAR', 'BIKE', 'BICYCLE'] |\n| props | N/A | `object` | Here you can define extra props which are applicable of react native Picker Component for e.g. { mode: 'dropdown', .... }\n\n#### Value Type : `String`\n\n#### Default Value Type :\nYou can set default value as a string which must be present in available options.\nFor e.g If options are ['CAR', 'BIKE', 'BICYCLE'] then you can define `defaultValue = 'BIKE'`\n\n### Switch\n`(type: switch)`\nIt's an implement of React Native `switch` component.\n\n#### Value Type : `Boolean`\n\n### Date\n`(type: string)`\n\n#### Extra Properties\n| Props  | Default | Type | Description |\n| :------------ |:--------------- |:---------------| :-----|\n| mode | `datetime` | `string` | To define type of date picker, available values are `date, time, datetime` |\n| maxDate | N/A | `string` or `JS Date object` | To define the maximum date can be select in date picker  |\n| minDate | N/A | `string` or `JS Date object` | To define the minimum date can be select in date picker  |\n\n\n#### Value Type : `String`\n#### Default Value Type : `string` or `JS Date object`\n\n### Select\n\n#### Extra Properties\n| Props | Required | Default | Type | Description |\n| :------------| :------------ |:--------------- |:---------------| :-----|\n| multiple | `No` | `false` | `bool` | To define that the field can accept multple values or not i.e user can select multiple values at a time or not. |\n| objectType | `No` |  `false` | `string` | To define that the values can be of object or not.If `true`, then you need to specify `labelKey` \u0026 `primaryKey`  |\n| labelKey | `Yes` if `objectType = true` | `N/A` | `string` | To define the key which value need to be used as label. |\n| primaryKey | `Yes` if `objectType = true` |  `N/A` | `string` | To define the key which is unique in all objects.  |\n| options | `Yes` |  `N/A` | array of `objects` or `strings` | An array of `objects` or `strings` containing all available options.|\n\n#### Value Type : Array of `Strings` or `Objects`\n#### Array of Strings\nFor e.g. `options = ['CAR', 'BIKE', 'BICYCLE']`\n#### Array of Objects\nIf you're using array of objects then please don't forget to define these properties:\n```jsx\nobjectType: true,\nlabelKey: 'name', // For Below example\nprimaryKey: 'id',  // For Below example\n```\nFor e.g.\n```\noptions: [\n        {\n          id: 1,\n          name: 'CAR',\n        },\n        {\n          id: 2,\n          name: 'BIKE',\n        },\n        {\n          id: 3,\n          name: 'BICYCLE',\n        },\n      ]\n```\n#### Default Value Type : `string` or `JS Date object`\nIn case of object values:\n```\ndefaultValue: [{\n        id: 3,\n        name: 'kuldeep2',\n        title: 'saxena2',\n      }],\n ```\nIn case of string values:\n```\ndefaultValue: ['CAR', 'BIKE'],\n```\n\n## Nested Forms\n`(type: group)`\nForm Builder also supports nested forms, some times you need to wrap all of your form values in an object or we can say that you have some nested fields, in this case you can define `group` fields.\nAn example will better explain it:\n\n```\n{\n      type: 'group',\n      name: 'address',\n      label: 'Address',\n      fields: [\n        {\n          type: 'text',\n          name: 'city',\n          label: 'City',\n        },\n        {\n          type: 'picker',\n          name: 'country',\n          label: 'Country',\n          defaultValue: 'INDIA',\n          options: ['US', 'INDIA', 'UK', 'CHINA', 'FRANCE'],\n        },\n      ],\n    },\n```\n#### Value Type : `Object`\n\nFor above example the return value object will be something like that:\n```\n{ city: 'Bangalore', country: 'INDIA' }\n```\n#### Default Value Type : `Object`\n\nYou can set default value for above example like that:\n```\n{ city: 'Newyork', country: 'US' }\n```\n## Prefill Form Values\nThis feature of formBuilder is very helpful in case of edit mode i.e if you want to edit the values of a form then you can easily prefill the form by using `formData` prop.\u003cbr/\u003e\nFor e.g\n```\nformData = {\n  first_name : 'Jon',\n  last_name: 'Snow',\n  house: 'Winterfell',\n  status: 'Sad'\n}\n```\n \n## Add Custom Validations\n\nIt's very easy to add your custom validations \u0026 error messages with FormBuilder.All you need to do is define a function \u0026 pass it as `customValidation` prop.\n\nFor e.g.\n```\n function validate(field) {\n   let error = false;\n   let errorMsg = '';\n   if (field.name === 'username' \u0026\u0026 !(field.value \u0026\u0026 field.value.trim())) {\n     error = true;\n     errorMsg = 'Username is required';\n   }\n   if (field.name === 'password' \u0026\u0026 !(field.value \u0026\u0026 field.value.trim())) {\n     error = true;\n     errorMsg = 'Password is required';\n   }\n   return { error, errorMsg };\n }\n```\nNote: Always return an object which will have two entities `error` type of `boolean` \u0026 `errorMsg` type of `string`.\n\n## Customize your form\n- Eject Theme by running this command\n```bash\nnode node_modules/react-native-form-builder/ejectTheme.js\n```\nIt will create a file named `form-theme.js` in your project's root folder.\n\nCustomize your theme.\n\nImport theme from `form-them`.\n\nUse it by passing as `theme` prop.\n```\nimport theme from '../form-theme';\n....\n \u003cGenerateForm\n  ref={(c) =\u003e { this.formGenerator = c; }}\n  theme = {theme}\n  ....\n  /\u003e\n```\n## Add Custom Components \nBuild your custom type's components \u0026 handle them easily with the help of form builder.\nUse the `customComponents` prop of form builder.\n### Prototype\nIt's an object of key value pair where key will be the `type` of the component \u0026 value will be your custom Component.\u003cbr/\u003e\u003cbr/\u003e\n```customComponents = { type1: {component: ComponentName1, props: Props }, type2: {component: ComponentName2} .....}```\n\n### How To Use\n- Define your custom `type` in field's object.\n- Form builder extends the props of your component by adding some extra props.\n- You can also pass some extra props in your custom components.\n- In your component you can access these props to handle the state of the field.\n\n| Props | Type | Description |\n| :------------| :------| :-----|\n| attributes | `object` | In this prop you can access the field's attributes (value, error, errorMsg ....). |\n| updateValue(fieldName, Value) | `function` | You need to use this method to update the value of the field |\n| onSummitTextInput(fieldName) | `function`| If you're using TextInput then you can use this function to automatically manage the text input focus.For example you can define it in the `onSubmitEditing` prop of TextInput\n| theme | `object` | Use the theme variables to style your component\n\n## Add Custom Error Component\n- Now you can use your custom error component to display error messages.\n- In your custom component you will receive two props `attributes` \u0026 `theme` variables.\n- You can access the error \u0026 error message as a property of the attributes object.\n\n\n## Example\nThe form in second gif is generated by these \u003ca href=\"https://github.com/bietkul/react-native-form-builder/blob/master/src/utils/config.js\"\u003efields\u003c/a\u003e\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbietkul%2Freact-native-form-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbietkul%2Freact-native-form-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbietkul%2Freact-native-form-builder/lists"}