A simple React Native form component with TextInput (including multiline), DropDown, Image and Date fields.

Usage no npm install needed!

<script type="module">
  import reactNativeBasicForms from '';


React Native Basic Form

forked from here

A simple React Native Form component with TextInput (including multiline), DropDown and Image fields.",


$ npm install --save react-native-basic-forms

#dependencies (Reat Native CLI only)
npm i --save react-native-vector-icons  
react-native link react-native-vector-icon
$ yarn add react-native-basic-forms

#dependencies (Reat Native CLI only < v0.16)
yarn add react-native-vector-icons  
react-native link react-native-vector-icon


Shows a form

import React from 'react';
import {View} from 'react-native';
import Form, {TYPES} from 'react-native-basic-form';

export default function Example(props) {
    const [loading, setLoading] = useState(false);

    const options = [
        {label:"Basic", value:1},
        {label:"Premium", value:2}
    const initialData = {
        "image": ""
        "email": "",
        "password": "thispasswordisencrypted",
        "account_type": 1, //Basic account, see options
        "price": 20,
        "about_me": "Blah blah blah.....",
        "start_date": "2020-04-17T21:00:00.000Z",
        "end_date": "2020-04-17T21:00:00.000Z",

    const fields = [
        {name: 'image', label: 'Profile Image', required: true, type: TYPES.Image},
        {name: 'username', label: 'Username', required: true, autoCapitalize: "none", autoCorrect: false},
        {name: 'email', label: 'Email Address', required: true, type: TYPES.Email},
        {name: 'password', label: 'Password', required: true, secure: true},
        {name: 'account_type', label: 'Account Type', required: true, type: TYPES.Dropdown, options: options},
        {name: 'price', label: 'ENTRANCE FEE', required: true, type:TYPES.Number},
        {name: 'about_me', label: 'About Me', required: true, multiline: true},
            //group to appear side by side
            {name: 'start_date', label: 'START DATE', required: true, type: TYPES.Date},
            {name: 'end_date', label: 'END DATE', required: true, type: TYPES.Date}

    async function onSubmit(data) {

    async function showImagePicker() {
            //return - cancelled or error or uri
            //return {cancelled:true}
            //return {error:"error message}
            //return {uri:...}
            return {error:e}

    render() {
        return (
                    title={"Register"} //this is the button title
                    initialData={initialData} //used in edit mode

Field Types

Type Notes
Text Default
Email Sets the keyboard to display email-address type


Prop Value Required/Optional Description Default
title string optional The button title "Submit"
fields object required the fields to show []
initialData object option the initial data, can be used in EDIT mode, the keys should match the fields key []
onSubmit function required the function to call when the submit button is pressed null
showImagePicker function optional the function to call when the image is tapped null
loading boolean optional if true, button is disabled and shows a loading icon false
style object optional the style for the container {}
buttonStyle object optional the style for the button {}
keyboardShouldPersistTaps string optional Determines when the keyboard should stay visible after a tap. 'handled'

Field Props

Prop Value Required/Optional Description Default
name string optional The field title ""
label string optional The field label ""
required bool optional Whether the field is required false
value string optional The field value ""
autoCapitalize string optional The field auto capitalize setting "sentences"
autoCorrect bool optional The field auto correct setting true
secure bool optional Whether the value should be masked false
type string optional The field type TYPES.Text (see above)