In React Native, the TextInput component is used to allow users to enter text input in your application. It provides a way to capture user input, whether it's single-line or multi-line text. Here’s an explanation of how to use TextInput along with an example:
The TextInput component in React Native handles text input from the user. It supports various features such as placeholder text, secure text entry (for passwords), keyboard types (numeric, email address, etc.), and more.
Basic Usage:You can place TextInput anywhere in your component tree where you want to collect user input.
Handling Input:You can capture input using the onChangeText prop to update state or perform actions based on user input.
Keyboard Types:Different keyboardType props allow you to specify what type of keyboard should be displayed (numeric, email, phone pad, etc.).
Here's an example demonstrating the usage of TextInput in React Native:
import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';
const MyTextInput = () => {
const [text, setText] = useState('');
return (
<View style={styles.container}>
<Text>Enter your name:</Text>
<TextInput
style={styles.input}
placeholder="Type your name here"
onChangeText={(value) => setText(value)}
value={text}
/>
<Text>You entered: {text}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
paddingHorizontal: 10,
marginTop: 10,
marginBottom: 20,
},
});
export default MyTextInput;
useState Hook: Manages the state of the text input using the text state variable and setText function.
TextInput Component: Accepts various props such as style, placeholder, onChangeText, and value.
Text Component: Displays the entered text below the input box.