React Native Floating Label Textinput

Run the following command with your project directory

        npm i react-native-floating-label-input

Code for Floating  Label Text input in React Native

Open App.js in any code editor and replace the code with the following code

App.js

import React,{Component} from 'react';

import {

  StyleSheet,

  View,

  Button,

  Image,

  Text

} from 'react-native';

import { FloatingLabelInput } from 'react-native-floating-label-input';

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      email: ' ',

      password: ' ' 

    };

  }

  render() {

    const {

        email,

        password

    } = this.state;

    return (

      <View style={styles.container}>

         <FloatingLabelInput

            label="Email"

            containerStyle={{margin: 5}}

            value={email}

            onChangeText={text => this.setState({email: text})}

          />

          <FloatingLabelInput

            label="Password"

            containerStyle={{margin: 5}}

            value={password}

            isPassword={true}

            darkTheme={true}

            onChangeText={text => this.setState({password: text})}

          />

        <Button title="Submit" onPress={()=> console.log('data',email,password)}/>

      </View>

    );

  }

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    padding: 10

  },

});    

To Run the App

react-native run-andriod