@wezyy1/rn-floating-label-input v1.0.2

@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