react-native-floating-label-inputbox

React Native Floating Label Input

In this TextInput included many functionality like floating placeholder, validation warning with custom alert text and also added Left or Right icon set in Inputbox.

Instalation

To install just input the following command:

 npm i react-native-floating-label-inputbox

or

 yarn add react-native-floating-label-inputbox

Screenshot

inputOutline Style	Default style	Required Field

Props

Props	Type	Description
label	Text	It is a placeholder and label.
required	boolean	Default false, when it is true then required red star show.
isInvalid	boolean	Default false, when it is true then warning show.
alertText	Text	Set text for warning
customLabelStyle	object	For Styling of label
inputboxStyle	object	For styling of inputbox
warningStyle	object	For Styling of warning
inputOutline	boolean	Default false,when it is true then Outline field show
leftIcon	View	Set left Icon
rightIcon	View	Set right Icon
onChangeText	Fuction	Callback function for set value of input box
value	variable	set value of input box

Example

    import  React,{useState} from  'react'
    import {View,Text} from  'react-native'
    import InputBox from 'react-native-floating-label-inputbox'
    
    const App = () => {
         const [name,setName]=useState("")
    
       return (
               <View style={{padding:10}}>
                 <InputBox
                   inputOutline
                   label={'Name'}
                   value={name}
                   onChangeText={(e)=>setName(e)}
                   />
               </View>            
      )
      }
    export  default  App

Important

Rest of props are same as of InputText

Thank-you ☺️ Manish Kumar Choudhary