React Native – TextInput
TextInput is used for accepting user input. It supports various keyboard types, auto-correction, secure text entry, and more.
Use Cases:
- Forms and user input fields.
- Search bars.
- Login and registration screens.
Example:
import React, { useState } from 'react';
import { View, TextInput, StyleSheet, Text } from 'react-native';
const App = () => {
const [text, setText] = useState('');
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Type here"
onChangeText={setText}
value={text}
/>
<Text style={styles.text}>{text}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginBottom: 10,
padding: 10,
width: '80%',
},
text: {
fontSize: 18,
},
});
export default App;