Chapter 5: Handling User Input

1. Using TextInput for User Input

Description:

The TextInput component in React Native is used to handle user input, such as text fields for entering data like names, emails, or passwords.

Basic Usage:

Example:

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

const App = () => {
  const [inputText, setInputText] = useState('');

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          paddingLeft: 8,
        }}
        placeholder="Enter text"
        value={inputText}
        onChangeText={(text) => setInputText(text)}
      />
      <Text style={{ marginTop: 20 }}>You typed: {inputText}</Text>
    </View>
  );
};

export default App;

Explanation: This example uses a TextInput component to capture user input and displays the entered text below it. The onChangeText prop is used to update the state with the current input value.

Password Input:

Example:

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

const App = () => {
  const [password, setPassword] = useState('');

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          paddingLeft: 8,
        }}
        placeholder="Enter password"
        secureTextEntry
        value={password}
        onChangeText={(text) => setPassword(text)}
      />
      <Text style={{ marginTop: 20 }}>Password: {password}</Text>
    </View>
  );
};

export default App;

Explanation: The secureTextEntry prop is used to hide the input text, making it suitable for password fields.

2. Handling Button Presses

Description:

Buttons in React Native are used to trigger actions or submit forms when pressed. The Button component provides a simple way to handle these actions.

Basic Button Usage:

Example:

import React from 'react';
import { Button, View, Alert } from 'react-native';

const App = () => {
  return (
    <View style={{ padding: 20 }}>
      <Button title="Press Me" onPress={() => Alert.alert('Button Pressed!')} />
    </View>
  );
};

export default App;

Explanation: The Button component in this example triggers an alert when pressed, displaying the message "Button Pressed!".

Custom Button with Styling:

Example:

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

const App = () => {
  return (
    <View style={{ padding: 20 }}>
      <TouchableOpacity
        style={{
          backgroundColor: '#6C49FF',
          padding: 10,
          borderRadius: 5,
        }}
        onPress={() => alert('Custom Button Pressed!')}
      >
        <Text style={{ color: '#fff', textAlign: 'center' }}>Press Me</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Explanation: This example uses TouchableOpacity to create a custom button with a background color and rounded corners. The button triggers an alert when pressed.

3. Touchable Components (TouchableOpacity, TouchableHighlight)

Description:

Touchable components in React Native are used to handle touch interactions. Common components include TouchableOpacity and TouchableHighlight.

TouchableOpacity:

Example:

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

const App = () => {
  return (
    <View style={{ padding: 20 }}>
      <TouchableOpacity
        style={{
          backgroundColor: '#6C49FF',
          padding: 10,
          borderRadius: 5,
        }}
        onPress={() => alert('TouchableOpacity Pressed!')}
      >
        <Text style={{ color: '#fff', textAlign: 'center' }}>Tap Me</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Explanation: TouchableOpacity provides a way to handle presses with a visual feedback effect by reducing the component's opacity.

TouchableHighlight:

Example:

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

const App = () => {
  return (
    <View style={{ padding: 20 }}>
      <TouchableHighlight
        style={{
          backgroundColor: '#6C49FF',
          padding: 10,
          borderRadius: 5,
        }}
        underlayColor="#5A38FF"
        onPress={() => alert('TouchableHighlight Pressed!')}
      >
        <Text style={{ color: '#fff', textAlign: 'center' }}>Press Me</Text>
      </TouchableHighlight>
    </View>
  );
};

export default App;

Explanation: TouchableHighlight changes the background color to a specified underlayColor when pressed, providing a different visual feedback effect.

4. Customizing Input Elements

Description:

React Native allows extensive customization of input elements, including styling and behavior modifications.

Custom TextInput with Icon:

Example:

import React, { useState } from 'react';
import { TextInput, View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

const App = () => {
  const [inputText, setInputText] = useState('');

  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
      <Ionicons name="ios-search" size={20} color="gray" />
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          marginLeft: 10,
          flex: 1,
          paddingLeft: 8,
        }}
        placeholder="Search"
        value={inputText}
        onChangeText={(text) => setInputText(text)}
      />
    </View>
  );
};

export default App;

Explanation: This example customizes a TextInput component by adding an icon using the Ionicons library. The input field is styled to appear as a search bar.

Custom Button with Loading Spinner:

Example:

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

const App = () => {
  const [loading, setLoading] = useState(false);

  const handlePress = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      alert('Button Pressed!');
    }, 2000);
  };

  return (
    <View style={{ padding: 20 }}>
      <TouchableOpacity
        style={{
          backgroundColor: '#6C49FF',
          padding: 10,
          borderRadius: 5,
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        onPress={handlePress}
      >
        {loading ? (
          <ActivityIndicator color="#fff" />
        ) : (
          <Text style={{ color: '#fff' }}>Press Me</Text>
        )}
      </TouchableOpacity>
    </View>
  );
};

export default App;

Explanation: The example shows how to create a custom button with a loading spinner. When the button is pressed, the spinner appears, and after a delay, the button returns to its original state.

These notes on handling user input in React Native cover essential topics such as using TextInput for user input, handling button presses, utilizing touchable components, and customizing input elements. Each example is designed to demonstrate practical implementation techniques that can be directly applied to your React Native projects.