React Native Handling TextInput

Understanding the TextInput with Examples

This blog section will see different examples of using TextInput in react native. Before moving directly on the examples first we write the code for taking inputs:

import Inputs from './inputs.js'
import React from 'react';
const App = () => {
   return (
      <Inputs />
   )
}
export default App

Example 1

In the following example, we will use the onChangeText prop of react-native as we can change the text into something according to the user's need.

Code

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

 
const UserTranslator = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Enter your Text here"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && '').join(' ')}
      </Text>
    </View>
  );
}

 
export default UserTranslator;

Output

Example 2

In this example, we will handle two inputs one is email, and the other is a password. We will use the login() property to authenticate the user and use some additional properties to make the login process smooth.

Code

import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
import React, { Component } from 'react'

 
class Inputs extends Component {
   state = {
   
      password: '',
      email: ''
   }
   handlePassword = (text) => {
    this.setState({ password: text })
   handleEmail = (text) => {
      this.setState({ email: text })
   }
 
   }
   login = (email, pass) => {
      alert('email: ' + email + ' password: ' + pass)
   }
   render() {
      return (
         <View style = {styles.container}>
           

 
            <TouchableOpacity
               style = {styles.submitButton}
               onPress = {
                  () => this.login(this.state.email, this.state.password)
               }>
               <Text style = {styles.submitButtonText}> Submit </Text>
            </TouchableOpacity>

 
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Password"
             
               autoCapitalize = "none"
               onChangeText = {this.handlePassword}/>
           
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               placeholder = "Email"
               
               onChangeText = {this.handleEmail}/>
         </View>
      )
   }
}
export default Inputs

 
const styles = StyleSheet.create({
   container: {
      paddingTop: 23
   },
   submitButton: {
    backgroundColor: 'blue',
    padding: 5,
    margin: 5,
    height: 30,
 },
   input: {
      margin: 35,
      height: 40,
     
      borderWidth: 1
   },
 
   submitButtonText:{
      color: 'white'
   }
})

Output

You can enter the values as shown below:

Also see,  React Native Reanimated

Frequently Asked Questions

What do you understand by TextInput affix?

It is a component used to render a trailing/leading text in the TextInput.

Name some of the props used in FlatList.

Some of the props used in FlatList are data, renderItem, ListEmptyComponent, and ListFooterComponent.

What does extra data refer to in FlatList?

Extra data refers to the prop used to re-render the data dynamically.

What is the use of an inverted prop?

The inverted prop is used to reverse the FlatList in react native.

Conclusion

In this article, we have extensively discussed TextInput in react native with a proper introduction and a brief explanation of many props, and good examples of different props using different props with code and output.

We hope this blog has helped you enhance your knowledge of TextInput in react native.

And if you want to learn more about flexbox and its properties, you must refer to this blog there. You will understand every property of flex with explanation and with examples.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, React, JavaScript, System Design, etc. Enrol in our courses and refer to the mock test and problems available; take a look at the interview experiences and interview bundle for placement preparations. Do upvote our blog to help other ninjas grow.

 “Happy Coding!”