1.0.5 • Published 4 years ago
rn-easy-forms v1.0.5
React Native Easy Forms
This module allows you to create React Native forms by declaring your form as a Javascript object.
Features
- Automatically validates fields for being empty or not
- Supports auto-completion
- Support auto completing places using Google Places Autocomplete API
- Supports displaying a checkbox for toggling the display of secure text fields
- Fully customizable appearance
Usage
yarn add rn-easy-forms
npm i --save rn-easy-formsExample
import { Form } from 'rn-easy-forms'
import { View, Button } from 'react-native'
const signInFields = [
{
name: EMAIL_FIELD_NAME,
placeholder: EMAIL_PLACEHOLDER
},
{
name: PASSWORD_FIELD_NAME,
placeholder: PASSWORD_PLACEHOLDER,
secure: true
}]
class SignInForm extends React.Component {
_signInAsync = async () => {
let validateResult = this.formRef.validate()
if (validateResult) {
//proceed to next page
}
}
render() {
return (
<View>
<Form
ref={(el) => {this.formRef = el}}
fieldList={signInFields}
/>
<Button title="Sign In" onPress={this._signInAsync} />
</View>
)
}
}Usage
Props
| Name | Type | Description | Required |
|---|---|---|---|
| fieldList | Array\<Object> | Array of objects describing each field in the form | Y |
| suggestionProviders | Object | Key value pairs of String -> SuggestionProvider | N |
| fieldWithCheckboxStyle | Object | Styles for the container holding a field and a secure text entry checkbox | N |
Spec
Field Object Keys
| Key | Value | Description | Required |
|---|---|---|---|
| name | String | unique name of the field | Y |
| placeholder | String | placeholder for field input | N |
| autocompleteType | String | type of SuggestionProvider to use, a key with this SuggestionProvider must exist in the suggestionProviders prop passed to the form | N |
| additionalDataForSuggestionsProvider | Object | additional data used by the SuggestionsProvider for providing autocomplete suggestions | N |
| allowEmpty | Boolean | allows the field to be empty, default is false | N |
| secure | Boolean | makes the text entry secure | N |
| showSecureCheckbox | Boolean | if set, a checkbox will be displayed below the field toggling the display between hidden and plain text | N |
| keyboardType | String | set the keyboard type of the field | N |
Suggestion Providers Example
{ "Google" : new GoogleSuggestionProvider("YOUR_API_KEY") }For custom suggestion providers, your class can use have these methods(Typescript interface coming soon):
| Method | args | description | required |
|---|---|---|---|
| async getSuggestions | input(String), sessionToken(String), additionalData(Object) | fetches autocomplete suggestions. uses an optional sessionToken, used to group autocomplete requests and accepts an arbitrary object defining any additional data used for the autocomplete request | Y |
| async onSelectSuggestion | item(Object), setAdditionalFields(Function), additionalData(Object), sessionToken(String) | Additional logic to be executed when an autocomplete suggestion is selected | N |
| renderFooter | returns a footer component to render at the bottom of the autocomplete suggestions | N |
API
| Method | args | description | return type |
|---|---|---|---|
| validate | validates the form, returns undefined if validation fails or an Object with key value pairs of {name: value} where the name is the unique name for the field | Object |