21 React Native UI Forms Libraries

Lonare
7 min readJul 28, 2021

React Hook Form

Performant, flexible and extensible forms with easy-to-use validation. Reducing the amount of code you need to write, and removing unnecessary re-renders are some of the primary goals of React Hook Form.

How to install

React Native Select Picker

Customized select picker (just like <select> in html) that renders the same on iOS and Android

View on GitHub

React Native Form4u

A React Native form builder, simple, light and fast !

  • Define fields using a simple json file. Any kind of react-native field or valid component is accepted;
  • Define field validation with the flexibility of using a JavaScript function to return the erros;
  • Define your own callback function to handle form submission;
  • Package comes with a full Sign Up login screen example.

Features

  • Prevents submit dirty forms
  • Initialize fields with default values
  • Default mask types for most common field types, like datetime, only number, zip code, currency, Brazilian CPF/CNPJ
  • Use custom masks with help of react-native-masked-text
  • Supports custom validations
  • Implements default validations for common field types (email)
  • Define your own Form style
  • Define your own Field style
  • Uses Nativebase components

View on GitHub

Expo Data Forms

Create beautiful forms that submit data to redux, a graphql mutation, or an api in many different input types
Create beautiful forms that submit data to redux, a graphql mutation, or an api in many different input types. The goal of this repo is to seperate semantics (form fields) from the API from User Interface of showing editable and savable database data from any mutation, where data can have any type.

View on GitHub

React Native Form Validator

React native form validator is a simple library to validate your form fiels with React Native. The library is voluntarily easy to use. You juste have to extends the “ValidationComponent” class on your desired React native form component.

View on GitHub

React Cross Forms

Forms with validation for your ReactJS apps!

View on GitHub

React Native Image Picker Form

A React Native component factory to use with tcomb-form-native library. Currently using react-native-image-crop-picker to provide image selection.

View on GitHub

React Native Checkbox Form

react-native-checkbox-form is a simple checkbox’s component, it works on Android and iOS, The Icon is used in the checkbox-form depends on react-native-vector-icons,

View on GitHub

Tcomb Form Native

tcomb-form-native is looking for maintainers. If you’re interested in helping, a great way to get started would just be to start weighing-in on GitHub issues, reviewing and testing some PRs.

View on GitHub

React Native Form Builder

If you’re looking for a better form management library with more advanced features, Please check out React Reactive Form.

Features

  • Generate Form Fields UI
  • Manage, track state & values of fields
  • Automatically manages focus to next field on submit (TextInput)
  • Handle all keyboard related problems smartly
  • Supports custom validations & nested forms
  • Uses Nativebase components

View on GitHub

React Reactive Form

Angular like reactive forms in React.
It’s a library inspired by the Angular’s Reactive Forms, which allows to create a tree of form control objects in the component class and bind them with native form control elements.

Features

  • UI independent.
  • Zero dependencies.
  • Nested forms.
  • Subscribers for value & status changes of controls.
  • Provides a set of validators & also supports custom sync & async validators.
  • FormGenerator api to create large forms with less code.
  • Better form management with FormGroup & FormArray apis.
  • Customizable update strategy for better performace with large forms.

View on GitHub

React Native Instagram Login

a react native instagram login component (support android & ios). Pull requests are welcome!

View on GitHub

React Native Advanced Forms

Flexible React Native architecture for building and managing forms

Features:

  • Cross-platform (iOS, Android)
  • Allow for flexible form layouts
  • Easily manage and validate field input values
  • Auto-focussing of next field for better user experience
  • Easily integrate your own custom components
  • Component-based — use with or without Redux
  • Compatible with React Native 0.40+
  • Successfully used in production apps

View on GitHub

Input Number

React Input Number http://react-component.github.io/input-number/

View on GitHub

Redux Form

A Higher Order Component using react-redux to keep form state in a Redux store https://redux-form.com

View on GitHub

React Native Gifted Form

One React-Native form component to rule them all

View on GitHub

Tcomb Form Native

tcomb-form-native is looking for maintainers. If you’re interested in helping, a great way to get started would just be to start weighing-in on GitHub issues, reviewing and testing some PRs.

View on GitHub

React Native Foect

Simple form validation library for React Native.

View on GitHub

React Native Formik

Build forms in React, without the tears 😭 https://jaredpalmer.com/formik

Let’s face it, forms are really verbose in React. To make matters worse, most form helpers do wayyyy too much magic and often have a significant performance cost associated with them. Formik is a small library that helps you with the 3 most annoying parts:

Getting values in and out of form state
Validation and error messages
Handling form submission
By colocating all of the above in one place, Formik will keep things organized–making testing, refactoring, and reasoning about your forms a breeze.

View on GitHub

React Native Form Generator

Features

  • Android and IOS support, Yeah Baby!
  • Pleasant Defaults, totally overridable
  • Doesn’t have dependencies
  • Use your own icon pack
  • Easy to use and clean, react style syntax
  • Automatic events handling
  • Supports custom fields and styles without adding any weird syntax (just create a react component)
  • Applies by default the current OS style
  • Inspired by tcomb, the good parts
  • Performances: just the field changed gets a setState
  • You don’t need to create a ‘Model’ or a ‘Struct’ that contains your data, just create a form component (the React’s way)
  • Validate InputFields based on keyboardType (can be overridden using validationFunction)
  • Multiple validators
  • Reset/Set Fields programmatically (setValue, setDate, setTime, focus)
  • Custom Wrapper for Picker & DatePicker Components (iOS Only)

View on GitHub

React Native Forms

[Deprecated] A simple, declarative API for creating cross-platform, native-appearing forms with React Native
I wrote this library two years ago for a use-case at work, when React Native was still quite young, comparatively. I open sourced it in the general spirit of sharing code that had been useful to me, but with the vicissitudes of life being what they are, I didn’t have the opportunity to keep it up to date, and it’s become very antiquated. If you want to use it, go for it! But because I no longer use React Native at work, I don’t have time to update this or add features, though I will take PRs and potentially give an active contributor maintenance rights over the repo, if they find it useful to work on. For similiar UI functionality within a much larger and better-maintained project, I’d recommend checking out React Native Elements. There are plenty of other better alternatives as well. Thanks for stopping by!

View on GitHub

React Native Fm Form

FM Form is a module for React Native to fast generate pages with a form. It works like Backbone forms. Using this module you can generate a page in 5 minutes!

Currently only support iOS!!!

I build this module because I am lazy… The original purpose of this project is for me to develop an app faster. I believe there are many bugs and design issue. If you are interesting in this project please help me improve it!

View on GitHub

React Native Clean Form

Easy react-native forms using bootstrap-like syntax with redux-form+immutablejs integration. Styled using styled-components http://esbenp.github.io/2017/01/06/react-native-redux-form-immutable-styled-components/

View on GitHub

#react-native #react #mobile-apps

--

--

Lonare

Imagination is the key to unlock the world. I am trying to unlock mine.