{"id":4492,"url":"https://github.com/MichaelCereda/react-native-form-generator","last_synced_at":"2025-08-04T01:32:31.177Z","repository":{"id":57337121,"uuid":"50011102","full_name":"MichaelCereda/react-native-form-generator","owner":"MichaelCereda","description":"Generate forms with native look and feel in a breeze","archived":false,"fork":false,"pushed_at":"2020-02-21T03:30:04.000Z","size":605,"stargazers_count":376,"open_issues_count":68,"forks_count":105,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-07-05T05:06:44.197Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/MichaelCereda.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":"2016-01-20T06:56:26.000Z","updated_at":"2025-02-14T11:40:08.000Z","dependencies_parsed_at":"2022-09-12T13:13:01.950Z","dependency_job_id":null,"html_url":"https://github.com/MichaelCereda/react-native-form-generator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MichaelCereda/react-native-form-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCereda%2Freact-native-form-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCereda%2Freact-native-form-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCereda%2Freact-native-form-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCereda%2Freact-native-form-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MichaelCereda","download_url":"https://codeload.github.com/MichaelCereda/react-native-form-generator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCereda%2Freact-native-form-generator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268636395,"owners_count":24282084,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-01-05T20:17:14.242Z","updated_at":"2025-08-04T01:32:30.852Z","avatar_url":"https://github.com/MichaelCereda.png","language":"JavaScript","readme":"React Native Form Generator\n================\n\nGenerate forms with native look and feel in a breeze\n\n[![NPM](https://nodei.co/npm/react-native-form-generator.png)](https://nodei.co/npm/react-native-form-generator/)\n\n\n![rnformgendatetimefields](https://cloud.githubusercontent.com/assets/107390/16767512/1dfbf33c-4840-11e6-8085-1521b6d0c3ce.gif)\n\n![react-native-form-generator](https://cloud.githubusercontent.com/assets/107390/12499709/edc1c298-c07a-11e5-916c-394de83ebe51.gif)\n\n## Components\n* Picker\n* DatePicker\n* TimePicker\n* Input\n* Link\n* Separator\n* Switch\n\n## Features\n* Android and IOS support, Yeah Baby!\n* Pleasant Defaults, totally overridable\n* Doesn't have dependencies\n* Use your own icon pack\n* Easy to use and clean, react style syntax\n* Automatic events handling\n* Supports custom fields and styles without adding any weird syntax (just create a react component)\n* Applies by default the current OS style\n* Inspired by tcomb, the good parts\n* Performances: just the field changed gets a setState\n* You don't need to create a 'Model' or a 'Struct' that contains your data, just create a form component (the React's way)\n* Validate InputFields based on keyboardType (can be overridden using validationFunction)\n* Multiple validators\n* Reset/Set Fields programmatically (setValue, setDate, setTime, focus)\n* Custom Wrapper for Picker \u0026 DatePicker Components (iOS Only)\n\n[My blogpost about React Native Form Generator](https://medium.com/@michaelcereda/react-native-forms-the-right-way-315802f989d6#.p9oj79vt3)\n\n## Installation\n```\n    npm install --save react-native-form-generator\n```\n## I'm actively working on this project\n\n* Pull requests are very very welcome. They make my day ;).\n* Master should be considered 'unstable' even if I do my best to keep it nice and safe.\n* Every release has its own branch.\n* Slider hasn't been created.\n* I have to document the code properly and do some housekeeping, i apologize in advance.\n\n## Example\n\nPlease check the folder _examples_ for an always up to date use case.\n\nthe example below generates the form you see in the animation\n```javascript\n\n/*\nThis is a view i use in a test app,\nvery useful to list all the use cases\n*/\n\nimport React from 'react';\n\nimport {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View,ScrollView,\n} from 'react-native';\n\n\nimport { Form,\n  Separator,InputField, LinkField,\n  SwitchField, PickerField,DatePickerField,TimePickerField\n} from 'react-native-form-generator';\n\nexport class FormView extends React.Component{\n  constructor(props){\n    super(props);\n    this.state = {\n      formData:{}\n    }\n  }\n  handleFormChange(formData){\n    /*\n    formData will contain all the values of the form,\n    in this example.\n\n    formData = {\n    first_name:\"\",\n    last_name:\"\",\n    gender: '',\n    birthday: Date,\n    has_accepted_conditions: bool\n    }\n    */\n\n    this.setState({formData:formData})\n    this.props.onFormChange \u0026\u0026 this.props.onFormChange(formData);\n  }\n  handleFormFocus(e, component){\n    //console.log(e, component);\n  }\n  openTermsAndConditionsURL(){\n\n  }\n  render(){\n    return (\u003cScrollView keyboardShouldPersistTaps={true} style={{paddingLeft:10,paddingRight:10, height:200}}\u003e\n      \u003cForm\n        ref='registrationForm'\n        onFocus={this.handleFormFocus.bind(this)}\n        onChange={this.handleFormChange.bind(this)}\n        label=\"Personal Information\"\u003e\n        \u003cSeparator /\u003e\n        \u003cInputField\n          ref='first_name'\n          label='First Name'\n          placeholder='First Name'\n          helpText={((self)=\u003e{\n\n            if(Object.keys(self.refs).length !== 0){\n              if(!self.refs.registrationForm.refs.first_name.valid){\n                return self.refs.registrationForm.refs.first_name.validationErrors.join(\"\\n\");\n              }\n\n            }\n            // if(!!(self.refs \u0026\u0026 self.refs.first_name.valid)){\n            // }\n          })(this)}\n          validationFunction={[(value)=\u003e{\n            /*\n            you can have multiple validators in a single function or an array of functions\n             */\n\n            if(value == '') return \"Required\";\n            //Initial state is null/undefined\n            if(!value) return true;\n            // Check if First Name Contains Numbers\n            var matches = value.match(/\\d+/g);\n            if (matches != null) {\n                return \"First Name can't contain numbers\";\n            }\n\n            return true;\n          }, (value)=\u003e{\n            ///Initial state is null/undefined\n            if(!value) return true;\n            if(value.indexOf('4')!=-1){\n              return \"I can't stand number 4\";\n            }\n            return true;\n          }]}\n          /\u003e\n        \u003cInputField ref='last_name' placeholder='Last Name'/\u003e\n        \u003cInputField\n          multiline={true}\n          ref='other_input'\n          placeholder='Other Input'\n          helpText='this is an helpful text it can be also very very long and it will wrap' /\u003e\n        \u003cSeparator /\u003e\n        \u003cLinkField label=\"test test test\" onPress={()=\u003e{}}/\u003e\n        \u003cSwitchField label='I accept Terms \u0026 Conditions'\n          ref=\"has_accepted_conditions\"\n          helpText='Please read carefully the terms \u0026 conditions'/\u003e\n        \u003cPickerField ref='gender'\n          label='Gender'\n          options={{\n            \"\": '',\n            male: 'Male',\n            female: 'Female'\n          }}/\u003e\n          \u003cDatePickerField ref='birthday'\n          minimumDate={new Date('1/1/1900')}\n          maximumDate={new Date()}\n          placeholder='Birthday'/\u003e\n        \u003cTimePickerField ref='alarm_time'\n      placeholder='Set Alarm'/\u003e\n        \u003cDatePickerField ref='meeting'\n          minimumDate={new Date('1/1/1900')}\n          maximumDate={new Date()} mode=\"datetime\" placeholder='Meeting'/\u003e\n        \u003c/Form\u003e\n        \u003cText\u003e{JSON.stringify(this.state.formData)}\u003c/Text\u003e\n\n      \u003c/ScrollView\u003e);\n    }\n  }\n\n```\n\n## Form\nForm automatically attaches on change events so you just have to attach an handle to the onFocus attibute of Form to monitor all the changes.\n\nIt's just a wrapper that allows you to attach onFocus (used to track focus events and keyboard events) and onChange (used to track changes in every field)\n\n## Fields\n#### Common Rules\n* __Every__ field that has to propagate its value in the form __MUST__ have a ref attribute. (Separator and LinkField don't have a ref).\nCheck the example to understand the use of the ref attribute.\n* All the components provided use _Field_ as wrapper in order to have the following props.\n\n| Prop (parameters) | Description |\n| --- | --- |\n| helpText | String shown as text under the component |\n| helpTextComponent | Custom component that replaces the one provided |\n| onPress | onPress method |\n\n\n### Separator\n```javascript\n  \u003cSeparator\n    label=\"Example\" // optional: if present it will show the text\n    /\u003e\n```\n\n### InputField\nInput fields can be used to receive text, you can add icons (a react component) to the left and the right side of the field.\n\nInputField can validate values based on keyboardType property, validation is not \"aggressive\", just changes a value inside the class, you can access the value using the ref (ex. this.ref.example_input_field.valid).  \nInputField automatically provides the attibutes _valid_ and _validationErrors_ to guarantee full control to the developer.\n\nyou can customize your validation function by adding a _validationFunction_ prop to the component. _validationFunction_ supports also an array of validators.\n\n#### Creating a validator\nValidators are simple functions have one paramenter (value) and that return true or a string containing an error.\n\n```javascript\nlet workingValidator = (value)=\u003e{\n  if(value == '') return \"Required\";\n  //Initial state is null/undefined\n  if(!value) return true;\n  var matches = value.match(/\\d+/g);\n  if (matches != null) {\n    return \"First Name can't contain numbers\";\n  }\n\n  return true;\n}\n```\n\n_react-native-form-generator_ doesn't depend on any icon library, that gives you freedom of adding any icon or react component you want.\n\nlook at the example here.\n\n![react-native-form-generator-inputfield](https://cloud.githubusercontent.com/assets/107390/12533401/1f6d1e7c-c1fd-11e5-96d0-aeba9a313ab9.gif)\n\n```javascript\n  \u003cInputField\n    label='Example' // if label is present the field is rendered with the value on the left (see First Name example in the gif), otherwise its rendered with textinput at full width (second name in the gif).\n    ref='example_input_field' // used in onChange event to collect the value\n    value='default_value' // used as initial value\n    keyboardType = '' // undefined, 'email-address',\n    validationFunction = {(value)=\u003e{return true;}}\n    iconRight={\n      \u003cIcon name='checkmark-circled'\n        size={30}\n        style={[\n          {marginTop:7, color:\"#61d062\" },\n          ((self)=\u003e{\n            //i can change the style of the component related to the attibute of example_input_field\n            if(!!(self.refs \u0026\u0026 self.refs.example_input_field)){\n              if(!self.refs.example_input_field.valid) return {color:'#d52222'}\n            }\n            }\n          )(this)]}\n        /\u003e\n    }  //React Component\n    /\u003e\n```\nAll the props are passed down to the underlying TextInput Component\n\n| Prop (parameters) | Description |\n| --- | --- |\n| label | Text to show in the field, if exists will move the textinput on the right, providing also the right alignment |\n| iconLeft | React component, shown on the left of the field, the component needs to have a prop size to allow the inputText to resize properly  |\n| iconRight | React component, shown on the right of the field, the component needs to have a prop size to allow the inputText to resize properly  |\n| validationFunction | Function or array of functions, used to pass custom validators to the component|\n| keyboardType | possible values: __undefined__, __email-address__|\n\n| ref methods | Description |\n| --- | --- |\n| setValue | Sets the value programmatically |\n| focus | Focus the textinput component |\n\n\n### SwitchField\n\n| Prop (parameters) | Description |\n| --- | --- |\n| onValueChange(value) | triggered at every value change, returns the new value of the field|\n| value | Initial value of the component (Boolean)|\n\n\n### PickerField\n| Prop (parameters) | Description |\n| --- | --- |\n| onValueChange(value) | triggered at every value change, returns the new value of the field|\n| value | Initial value of the component|\n| options=[{label:\"test\",value=\"Test\"},...] | All the possible options, array of objects|\n| iconRight | React component, shown on the left of the text field (i suggest Ionicons 'ios-arrow-right' for a nice iOS effect)  |\n| pickerWrapper | Optional, Custom wrapper of the picker, check the example  |\n\n### DatePickerField\nEvery prop is passed down to the underlying DatePickerIOS/DatePickerAndroid component.\n\n| Prop (parameters) | Description |\n| --- | --- |\n| onValueChange(date) | triggered at every value change, returns the new value of the field|\n| date | Initial date of the component, defaults to (new Date()) |\n| iconRight | React component, shown on the left of the text field (i suggest Ionicons 'ios-arrow-right' for a nice iOS effect)  |\n| dateTimeFormat | Optional, Custom date formatter |\n| pickerWrapper | Optional, Custom wrapper of the picker, check the example  |\n| prettyPrint | Boolean, if true the component returns a string formatted using dateTimeFormat, if false a Date object is returned |\n| placeholderComponent | Substitutes the component used to render the placeholder |\n| placeholderStyle | Used to style the placeholder |\n| valueStyle | Used to style the field's value |\n\n### TimePickerField\nEvery prop is passed down to the underlying DatePickerIOS/DatePickerAndroid component.\nMode is set to 'time'\n\n| Prop (parameters) | Description |\n| --- | --- |\n| onValueChange(date) | triggered at every value change, returns the new value of the field|\n| date | Initial date of the component, defaults to (new Date()) |\n| iconRight | React component, shown on the left of the text field (i suggest Ionicons 'ios-arrow-right' for a nice iOS effect)  |\n| dateTimeFormat | Optional, Custom date formatter |\n| pickerWrapper | Optional, Custom wrapper of the picker, check the example  |\n| prettyPrint | Boolean, if true the component returns a string formatted using dateTimeFormat, if false a Date object is returned |\n| placeholderComponent | Substitutes the component used to render the placeholder |\n| placeholderStyle | Used to style the placeholder |\n| valueStyle | Used to style the field's value |\n\n### LinkField\nEvery prop is passed down to the underlying DatePickerIOS component.\n\n| Prop (parameters) | Description |\n| --- | --- |\n| label | Text to show in the field |\n| iconLeft | React component, shown on the left of the text field  |\n| iconRight | React component, shown on the left of the text field (i suggest Ionicons 'ios-arrow-right' for a nice iOS effect)  |\n\n### KeyboardEvents\nreact-native-form-generator ships with an implementation ok KeyboardAwareScrollView that make handling keyboard events a breeze.\ncheck here https://medium.com/@michaelcereda/react-native-forms-the-right-way-315802f989d6#.p9oj79vt3\n\n![react-native-form-generator-keyevents](https://cloud.githubusercontent.com/assets/107390/12499708/edb63838-c07a-11e5-9fe4-87979285ccc0.gif)\n\n### Custom Fields\nWith react-native-form-generator is extremely easy to create your own custom fields.\nYou just need to know that:\n1. Every field is a react component\n2. Evey field will receive 3 props from the Form object:\n   - fieldRef: contains the reference of the field (workaround on a react-native bug).\n   - onChange: must be called every time i want to update the values inside the form component. (required)\n   - onValueChange: can be used whenever you prefer to pass the values to another component.\n\nExample\n```javascript\n'use strict';\nimport {Field} from '../lib/Field';\n\nexport class SimpleInputField extends React.Component{\n  constructor(props){\n    super();\n    }\n  }\n\n  handleChange(event){\n    var value = event.nativeEvent.text;\n\n    this.setState({value:value});\n\n    // This updates values in form everytime i update\n    if(this.props.onChange)      this.props.onChange(this.props.fieldRef, value);\n    if(this.props.onValueChange) this.props.onValueChange(value);\n  }\n\n  render(){\n    return(\u003cField\u003e\n        \u003cTextInput\n          {...this.props}\n          ref='inputBox'\n\n          onChange={this.handleChange.bind(this)}\n\n          placeholder={this.props.placeholder}\n          value={this.state.value}\n          /\u003e\n    \u003c/Field\u003e\n  )\n}\n\n}\n```\n### Wrapping fields\nYou can decide to wrap every field in a component to mantain design uniformity and avoid repetitions (ex. Icons ?!).\n\nBattle tested example\n```javascript\nimport {PickerField, LinkField} from 'react-native-form-generator';\nimport Icon from 'react-native-vector-icons/Ionicons';\n\nlet {\n  StyleSheet\n} = React;\n\nexport class WrappedLinkField extends React.Component{\n  render(){\n\n    return \u003cLinkField\n      label={this.props.label}\n      onPress={this.props.onPress}\n      iconRight={\u003cIcon name='ios-arrow-right'\n      size={30}\n        /\u003e\n    }\n}\n\nexport class WrappedPickerField extends React.Component{\n    render(){\n\n      return \u003cPickerField\n        fieldRef = {this.props.fieldRef}\n        value={this.props.value}\n        placeholder={this.props.placeholder}\n        options={this.props.options}\n        onChange={this.props.onChange}\n        onValueChange={this.props.onValueChange}\n        iconRight={\n          \u003cIcon name='ios-arrow-right'\n          size={30}\n\n          style={[\n            formStyles.alignRight,{color: '#C7C7CC'},\n            this.props.iconStyle]}/\u003e\n      }\n      /\u003e\n  }\n}\n\nlet formStyles = StyleSheet.create({\n    alignRight:{\n      marginTop: 7, position:'absolute', right: 10\n    }\n  });\n```\n","funding_links":[],"categories":["Components"],"sub_categories":["Forms","UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMichaelCereda%2Freact-native-form-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMichaelCereda%2Freact-native-form-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMichaelCereda%2Freact-native-form-generator/lists"}