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

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 Components	Set left Icon.
rightIcon	View Components	Set right Icon.
onChangeText	Fuction	Callback function for set value of input box .
value	variable	set value of input box.
secureTextEntry	boolean	Default is false When it is true then create password inputbox.
passHideIcon	View Components	set Password Hide icon.

Example of Default Inputbox

    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

Example of Password Inputbox with Show/Hide Password

When set icons in inputbox firstly install react-native-vector-icons or other Libraries and configure it .

  npm i react-native-vector-icons

After that you can import that library

    import  React,{useState} from  'react'
    import {View,Text} from  'react-native'
    import InputBox from 'react-native-floating-label-inputbox'
    import  FontAwesome  from  'react-native-vector-icons/FontAwesome'
    
    const App = () => {
         const [password,setPassword]=useState("")
    
       return (
               <View style={{padding:10}}>
               
                 <InputBox
                   inputOutline
                   label={'Password'}
                   value={password}
                   onChangeText={(e)=>setPassword(e)}
                   required
                   secureTextEntry
                   rightIcon={<FontAwesome  name={'eye'}  size={20}/>}
             passHideIcon={<FontAwesome  name={'eye-slash'} size{20}/>}
                   />
                   
               </View>            
      )
      }
    export  default  App

Important

Rest of props are same as of InputText

Thank-you ☺️ Manish Kumar Choudhary & Nigar Naaz