TextInput with password example in react native

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

import React from "react";

import { StyleSheet, TextInput, View, Text } from "react-native";

const TextInputWithPassword = () => {

  return (

    <View>

      <Text> TextInput Type Style for Password example </Text>

      <TextInput

        secureTextEntry={true}

        placeholder="Text Input For Password"

        underlineColorAndroid="transparent"

        style={styles.TextInputStyle}

      />

    </View>

  );

};

export default TextInputWithPassword;

const styles = StyleSheet.create({

  TextInputStyle: {

    marginBottom: 7,

    height: 40,

    borderWidth: 1,

    borderColor: "#FF0000",

    borderRadius: 6

  }

});

• Open App.js file and update code as below

import React from 'react';

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

import TextInputWithPassword from './src/Component/TextInputWithPassword'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <TextInputWithPassword/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

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:

Retrieve TextInput value on button click example in react native

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

import React, { useState } from "react";

import { Text, View, TextInput, Button } from "react-native";

const RetrieveTextboxValueOnButton = () => {

  const [data, setData] = useState("");

  const GetValueFunction = () => {

    alert(data);

    // console.log(data);

  };

  return (

    <View>

      <Text> Retrieve TextInput Data on Button Click example</Text>

      <TextInput

        placeholder="Enter Text here"

        onChangeText={text => setData(text)}

        value={data}

        style={{

          textAlign: "center",

          borderColor: "gray",

          borderWidth: 3,

          height: 50

        }}

      />

      <Button

        title="Get Text Input Value"

        color="#0000FF"

        onPress={GetValueFunction}

      />

    </View>

  );

};

export default RetrieveTextboxValueOnButton;

• Open App.js file and update code as below

import React from 'react';

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

import RetrieveTextboxValueOnButton from './src/Component/RetrieveTextboxValueOnButton'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <RetrieveTextboxValueOnButton/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Image icon inside TextInput example in react native

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

import React from "react";

import { StyleSheet, View, TextInput, Image } from "react-native";

const ImageIconInsideTextInput = () => {

  return (

    <View style={styles.container}>

      <View style={styles.SectionStyle}>

        <Image

          source={require("../Images/logo.png")}

          style={styles.ImageStyle}

        />

        <TextInput

          style={{ flex: 1 }}

          placeholder="Enter Your Name"

          underlineColorAndroid="transparent"

        />

      </View>

    </View>

  );

};

export default ImageIconInsideTextInput;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: "center",

    alignItems: "center",

    margin: 10

  },

  SectionStyle: {

    flexDirection: "row",

    justifyContent: "center",

    alignItems: "center",

    backgroundColor: "#fff",

    borderWidth: 0.5,

    borderColor: "#000",

    height: 40,

    borderRadius: 5,

    margin: 10

  },

  ImageStyle: {

    padding: 10,

    margin: 5,

    height: 25,

    width: 25,

    resizeMode: "stretch",

    alignItems: "center"

  }

});

• Open App.js file and update code as below

import React from 'react';

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

import ImageIconInsideTextInput from './src/Component/ImageIconInsideTextInput'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <ImageIconInsideTextInput/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output: