@wezyy1/rn-floating-label-input

This is a React-Native floating label input component, that visually combines an input label and the input itself into a single element. The floating label switches from placeholder mode to label when input is focused or has content in it.

Error message is included.

Installation

Installation can be done by using the npm install command:

$ npm install @wezyy1/rn-floating-label-input

Demo (Default Style)

Basic Usage

import React from 'react';
import { View } from 'react-native';
import FloatingInput from '@wezyy1/rn-floating-label-input'

export default class App extends React.Component{

    state = {
        isInvalid:false,
        email:'',

    }

    emailChange = (text) => {
        this.setState({
            email: text,
            isInvalid: !this.isEmailRightFormat(text)
        })
    }

    isEmailRightFormat = (text) => {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(text)){
            return true
        }
            return false
    }

    render(){
        return (
            <View style={{width:'100%'}}>
                <FloatingInput 
                    label="E-mail*" 
                    floatColor = "#187FC0" 
                    isInvalid={this.state.isInvalid} 
                    keyboardType="email-address" 
                    errorText="Please enter a correct email."
                    onChangeText={this.emailChange} 
                    value={this.state.email}
                />
            </View>
        )
    }
}

Try this example on Snack

API

Props

|Property|Description|Type|Default| |-|:-:|:-:|-:| |label|The text of the input label.|String| | |floatColor|The color when the input field is focused.|String|'#187FC0'| |isInvalid|If true, the label will be displayed in an error state and show error message(if has).|bool|false| |keyboardType|keyboard type popup when the input is focused.|'default', 'number-pad', 'decimal-pad', 'numeric', 'email-address', 'phone-pad'|'default'| |errorText| The error message shows up when the input is invalid. | String | | |value| The value displayed the input field. | String | | |onChangeText| Callback fired when the value is changed. This function will get the value of the input. | Function | | |labelStyle| The style of the lable. | Style Object | | |inputStyle| The style of the text input. | Style Object | | |containerStyle| The style of the container. | Style Object | |