TextInput is a Core Component that allows the user to enter text. In this Chapter we are going to learn how to work with TextInput in ReactNative.

Simple InputText Example

import React, {Component} from 'react';

import {View, TextInput, Text, StyleSheet, Alert, Keyboard} from 'react-native';

 

export default class TextFileds extends React.Component {

  state = {name: ''};

  render() {

    return (

      <View style={ss.container}>

        <View style={ss.header}>

          <Text>Text Inputs</Text>

        </View>

        <View style={ss.body}>

          <Text>Enter Name</Text>

          <TextInput

            placeholder="Enter Name"

            style={ss.textinputs}

            placeholderTextColor="white"

            onChangeText={value => {

              this.setState({name: value});

            }}

          />

          <Text style={{margin: 20, fontSize: 22}}>

            Enter Name is :{' '}

            <Text style={{color: 'white'}}>{this.state.name}</Text>

          </Text>

        </View>

      </View>

    );

  }

}

const ss = StyleSheet.create({

  container: {

    backgroundColor: '#FAFAFA',

    flex: 1,

  },

  header: {

    alignItems: 'center',

    padding: 10,

    backgroundColor: 'cyan',

  },

  body: {

    backgroundColor: 'grey',

    padding: 16,

    flex: 1,

  },

  textinputs: {

    color: 'white',

    borderBottomColor: 'white',

    borderBottomWidth: 2,

    fontSize: 22,

  },

});

 

In the above example we have taken simple Inputtext to write something on screen.

We can set Placholder text by placeholder property.

To get the Text from InputText by using onChangeText property.

Handling Text Input

 onChangeText={value => {

              this.setState({name: value});

            }}

 

Output

Other Properties

Editable

  <TextInput

            placeholder="Enter Email"

            style={ss.textinputs}

            editable={false}

            placeholderTextColor="white"

            onChangeText={value => {

              this.setState({email: value});

            }}

          />

 

Keyboard Type 

  • default
  • number-pad
  • decimal-pad
  • numeric
  • email-address
  • phone-pad

 <TextInput

            placeholder="Enter Phone number"

            style={ss.textinputs}

            keyboardType="numeric"

            maxLength={10}

            placeholderTextColor="white"

            onChangeText={value => {

              this.setState({name: value});

            }}

          />

 

Password TextInput

<TextInput

            autoCapitalize={'words'}

            autoFocus={true}

            caretHidden={false}

            style={ss.textinputs}

            placeholderTextColor={'white'}

            placeholder="Password"

            returnKeyType={'send'}

            secureTextEntry={true}

            selectTextOnFocus={false}

            inlineImageLeft="user"

          />

 


Subscribe For Daily Updates