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-forms

Example

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