You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-native-floating-label-inputbox

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-floating-label-inputbox

It is a input box for react native included with validation

1.0.19
latest
Source
npmnpm
Version published
Weekly downloads
36
71.43%
Maintainers
1
Weekly downloads
 
Created
Source

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 StyleDefault styleRequired Field

Props

PropsTypeDescription
labelTextIt is a placeholder and label.
requiredbooleanDefault false, when it is true then required red star show.
isInvalidbooleanDefault false, when it is true then warning show.
alertTextTextSet text for warning.
customLabelStyleobjectFor Styling of label.
inputboxStyleobjectFor styling of inputbox .
warningStyleobjectFor Styling of warning.
inputOutlinebooleanDefault false,when it is true then Outline field show.
leftIconView ComponentsSet left Icon.
rightIconView ComponentsSet right Icon.
onChangeTextFuctionCallback function for set value of input box .
valuevariableset value of input box.
secureTextEntrybooleanDefault is false When it is true then create password inputbox.
passHideIconView Componentsset 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

Keywords

react-native-floating-label-inputbox

FAQs

Package last updated on 26 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts