Handling user input in React Native involves using components like TextInput, Button, and TouchableOpacity to facilitate various interactions.
TextInput:Allows users to input text. Use onChangeText prop to capture input changes and value prop to control its value.
The TextInput component is used for allowing users to input text. It supports various props to handle text input and events.
import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';
const TextInputExample = () => {
const [text, setText] = useState('');
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Type here"
onChangeText={setText}
value={text}
/>
<Text>Typed text: {text}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
input: {
height: 40,
width: '100%',
borderColor: 'gray',
borderWidth: 1,
paddingHorizontal: 10,
marginBottom: 10,
},
});
export default TextInputExample;
Button: Provides a standard button triggering actions on press. Utilize onPress prop to define the action when pressed.
The Button component provides a standard button that triggers an action when pressed.
import React from 'react';
import { View, Button, Alert, StyleSheet } from 'react-native';
const ButtonExample = () => {
const handlePress = () => {
Alert.alert('Button pressed!');
};
return (
<View style={styles.container}>
<Button
title="Press me"
onPress={handlePress}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default ButtonExample;
Touchable Opacity:Offers touchable feedback by reducing opacity on press. It's customizable with styling and also uses onPress prop for defining actions.
The TouchableOpacity component provides a touchable container that reduces opacity when pressed, providing visual feedback.
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
const TouchableOpacityExample = () => {
const handlePress = () => {
console.log('TouchableOpacity pressed!');
};
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={handlePress}
>
<Text style={styles.buttonText}>Press me</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
width: 150,
marginBottom: 10,
},
buttonText: {
fontSize: 20,
},
});
export default TouchableOpacityExample;