Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Easy

React Native Handling TextInput

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

For the developers who are learning react native or planning to get started with react native, TextInput is a very vital topic. This is the essential requirement for learning other issues in react native.

Whenever you are doing a project, or anywhere else, you will need to enter text and process it in reacts native, and then, you are going to need the TextInput feature. 

We will learn all about TextInput while moving further in the blog, so let's get on with our topic without wasting any time.

Click on the following link to read further: Hooks in React JS

TextInput and its Prop

TextInput allows the user to enter the data, and it is a Core Component of react-native.

There are many props of TextInput available that can be sued for different functions and can make some tasks very easy.

Props of TextInput

Props are particular features or keywords that can be used for different functions to perform efficiently.

  • OnChangeText is a prop that takes a function and calls every time the text is changed.
  • onSubmitEditing takes the text every time when the text is submitted.
  • textInputLeabel is used in text or components for the floating label.
  • SelectionColor is used for selecting the color of the input text.
  • OnBlur callback when the text is blurred.
  • Render takes the entered text and renders it into the required form as sometimes the input text may need not be the default text.
  • Style modifies the input text's height, font size, and other features according to the given value.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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!”

Topics covered
1.
Introduction
2.
TextInput and its Prop
2.1.
Props of TextInput
3.
Understanding the TextInput with Examples
3.1.
Example 1
3.1.1.
Code
3.1.2.
Output
3.2.
Example 2
3.2.1.
Code
3.2.2.
Output
4.
Frequently Asked Questions
4.1.
What do you understand by TextInput affix?
4.2.
Name some of the props used in FlatList.
4.3.
What does extra data refer to in FlatList?
4.4.
What is the use of an inverted prop?
5.
Conclusion