npm install 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

Example of Default Inputbox

js

     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 (

                

                                      inputOutline

                    label={'Name'}

                    value={name}

                    onChangeText={(e)=>setName(e)}

                    />

                            

       )

       }

     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

js

     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 (

                

                

                                      inputOutline

                    label={'Password'}

                    value={password}

                    onChangeText={(e)=>setPassword(e)}

                    required

                    secureTextEntry

                    rightIcon={}

              passHideIcon={}

                    />

                    

                            

       )

       }

     export  default  App

Important

Rest of props are same as of InputText

---

Thank-you ☺️
Manish Kumar Choudhary & Nigar Naaz