TextInput example in react native

• Create Components folder under src folder
• Add TextInputEXP1.js file and add below Code

import React, { Component } from "react";

import {

  Text,

  View,

  TextInput,

  TouchableOpacity,

  StyleSheet

} from "react-native";

class TextInputEXP1 extends Component {

  state = {

    email: "",

    password: ""

  };

  handleEmail = text => {

    this.setState({ email: text });

  };

  handlePassword = text => {

    this.setState({ password: text });

  };

  login = (email, pass) => {

    alert("email: " + email + " password: " + pass);

  };

  render() {

    return (

      <View style={styles.container}>

        <TextInput

          style={styles.input}

          underlineColorAndroid="transparent"

          placeholder="Email"

          placeholderTextColor="#9a73ef"

          autoCapitalize="none"

          onChangeText={this.handleEmail}

        />

        <TextInput

          style={styles.input}

          underlineColorAndroid="transparent"

          placeholder="Password"

          placeholderTextColor="#9a73ef"

          autoCapitalize="none"

          onChangeText={this.handlePassword}

        />

        <TouchableOpacity

          style={styles.submitButton}

          onPress={() => this.login(this.state.email, this.state.password)}

        >

          <Text style={styles.submitButtonText}> Submit </Text>

        </TouchableOpacity>

      </View>

    );

  }

}

export default TextInputEXP1;

const styles = StyleSheet.create({

  container: {

    paddingTop: 23

  },

  input: {

    margin: 15,

    height: 40,

    borderColor: "#000000",

    borderWidth: 1

  },

  submitButton: {

    backgroundColor: "#7a42f4",

    padding: 10,

    margin: 15,

    height: 40

  },

  submitButtonText: {

    color: "white"

  }

});

• Open App.js file and update code as below

import React from 'react';

import { View,StyleSheet } from 'react-native';

import TextInputEXP1 from './src/Component/TextInputEXP1'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <TextInputEXP1/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output: