Morioh
Login
Fethawi Nasih

Fethawi Nasih

3 years ago

20+ Best React Native Input Component Libraries

Explore the 20+ best React Native input component libraries and frameworks to help you build beautiful and user-friendly UIs. These libraries offer a wide range of features, including support for different input types, validation, and styling. 

React Native Confirmation Code Input

A react-native confirmation code input for both IOS and Android

Features

  • A user-friendly component for inputting confirmation code
  • Extended from component, so you can use its props
  • Built-in type of code input: underline, box, circle
  • Set position: center, left, right, full width
  • Set size and active color, inactive color
  • Easy to customize style, use base style from TextInput component
  • Check code on finish or return code for async checking
  • Clear code on fail
  • Use React Native ES6

"React Native Confirmation Code Input"

React Native Input Bar

Fully customizable, beautifully designed Input Bar for React Native https://paraboly.com

"React Native Input Bar"

Phoneinput

React Native component for international phone input with country phone code and flag.

"Phoneinput"

React Native Pincode Input

React Native Pincode Input is a iOS Lock Screen style pincode input.

"React Native Pincode Input"

Features

  • Pincode Input shake animation.
  • Supports Accessibility.

React Native Tags Input

Input component for React Native to add and remove tags.
Fully customizable React Native input-component to add tags to an array. The tags are displayed as chips that can be deleted.

"React Native Tags Input"

React Native Smooth Phone Input

react-native user friendly phone input (users may not like country codes when typing their phone number 😉)

"React Native Smooth Phone Input"

React Native Input Code

A code input field for React Native.

"React Native Input Code"

React Native Input Spinner

An extensible input number spinner component for react-native highly customizable. This component enhance a text input for entering numeric values, with increase and decrease buttons.

"React Native Input Spinner"

React Native Phone Input

Phone input box for React Native

"React Native Phone Input"

React Native Otp Input

@twotalltotems/react-native-otp-input is a tiny Javascript library which provides an elegant UI for the end user to input one time passcode (OTP). It handles the input suggestion on iOS when the OTP SMS is received. For Android, it will autofill when the user presses the copy button on the SMS notification bar. It also features a carefully crafted flow to handle edge cases for volatile user gestures. We provide default UI, but you can always customize the appearance as you like.

"React Native Otp Input"

React Native Autogrow Textinput

A helper component meant to be used as a drop-in replacement for RN TextInput to allow automatic expanding of a multi-line text input according to the number of lines.

"React Native Autogrow Textinput"

React Native Text Input Mask

Text input mask for React Native on iOS and Android.

"React Native Text Input Mask"

React Native Otp Inputs

react-native-otp-inputs is fully customizable, React-Native package, that provides solution for One-time password feature with user friendly events like moving to previous input with backspace or going to next when filled in. It supports pasting and otp code into inputs

"React Native Otp Inputs"

React Native Masked Text

A pure javascript masked text and input text component for React-Native.

"React Native Masked Text"

React Native Numeric Input

a cross platform stylish numeric input for react native

"React Native Numeric Input"

React Native Smooth Pincode Input

A cross-platform, smooth, lightweight, customizable PIN code input component for React Native.

Most PIN code inputs components implemented by combining several TextInputs. They works, however, not good enough. When user types fast, or system sluggish, characters may lost when component switching focus between TextInputs. User need to type over and over again to get a correct input, gave a frustrated user experience.

React Native Smooth Pincode Input implemented with a different approach - It’s based on single TextInput but only render it as seperated fields. In other words, it looks like a PIN code input, but works as smooth as a native TextInput.

React Native Smooth Pincode Input is also highly customizable. By exposing cells and text stylesheets, it can be fully customized to fit in your app design. Password mode also supported with customizable mask characters as well as placeholders.

"React Native Smooth Pincode Input"

Features

  • Smooth typing without losing inputs
  • Customizable cell style
  • Customizable text style
  • Password mode
  • Customizable password mask and placeholder characters
  • Built in animations (Credit to react-native-animatable)

React Native Tag Input

A simple React Native component that creates an input for tags, emails, etc.

"React Native Tag Input"

React Native Input List

A React Native library with components for Input Lists

"React Native Input List"

React Native Keyboard Input

Presents a React component as an input view which replaces the system keyboard. Can be used for creating custom input views such as an image gallery, stickers, etc.

Supports both iOS and Android.

"React Native Keyboard Input"

React Native Input Scroll View

Mainly to achieve the following functions：

When the keyboard pops up, the TextInput will automatically adjust to the top of the keyboard.
When the keyboard pops up, the content of the ScrollView will not be obscured by the keyboard.
When multiline TextInput gets focus, the selected cursor will be automatically adjusted to the top of the keyboard.
When the multiline TextInput create new line, the new line will automatically adjust to the top of the keyboard.
Put your finger on top of TextInput and slide ScrollView, when you lift your finger, the TextInput will not get focus.

"React Native Input Scroll View"

React Native Tags

A React Native component that allows you to input text and formats the text into a tag when a space or comma is entered. Tapping on the tag will remove it.

"React Native Tags"

Input Number

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

"Input Number"

React Native Textinput Effects

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

I’ve come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-native. Some of those text fields are now ready to use in iOS and android thanks to react-native.

There is also a native iOS library called TextFieldEffects which has built some of them in Swift.

"React Native Textinput Effects"

React Native Credit Card Input

Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

"React Native Credit Card Input"

Features

  • Skeuomorphic credit-card 💳 (inspired by: card, react-native-credit-card)
  • !!NEW!! Now you could scale the Credit Card for smaller screens
  • !!NEW!! Now you could use CardView as a Component. example use case: showing saved payment details, etc.
  • Lite version for smaller screens (or if skeuomorphic is not really your thing)
  • Credit-card input validations & formatting while you’re typing
  • Form is fully navigatable using keypad
  • Works on both Android and iOS

#react-native #react #mobile-apps

20+ Best React Native Input Component Libraries
82.40 GEEK