Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/julianocomg/react-native-form

A simple react-native component to wrap your form fields and get their values with just one single method.
https://github.com/julianocomg/react-native-form

android form ios react-native

Last synced: about 1 month ago
JSON representation

A simple react-native component to wrap your form fields and get their values with just one single method.

Awesome Lists containing this project

README 

        
# react-native-form

A simple react-native component to wrap your form fields and get their values without attaching listeners everywhere.



## Installation

```

npm install --save react-native-form

```



## Usage

Just put your fields inside the form, with 2 props: 



***`name`*** => Your key to retrieve the value (required)



***`type`*** => The field type (required)



***`key`*** => Required for fields with the same name



```javascript

import Form from 'react-native-form'



  

    

       // Yes, it doesn't matter how deep they are :)

    

  

  

  

  

  

  

  

   // Yes, we support form serialization, like the web



```



And then you can call ***`this.refs.form.getValues()`***. 

You will get an object with all the values serialized. Simple as that.



## Do you want to use custom fields?



Just pass the prop ***`customFields`*** to the form. Check out the example below using the [react-native-radio-buttons](https://github.com/ArnaudRinquin/react-native-radio-buttons) field:



```javascript

var customFields = {

  'RadioButtons': {

    controlled: true,

    valueProp: 'selectedOption',

    callbackProp: 'onSelection',

  }

}



  



```



## Support for Accordion



If you have form fields under an Accordion component, add:



```javascript

type="Accordion"

```



to the Accordion component to have Form include the Accordion children.



## License

react-native-form is licensed under the [MIT license](LICENSE).