The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Handling User Input

Next ►
►

Handling user input is a fundamental aspect of building interactive applications in React Native. This topic will cover how to capture and manage user input using various components and techniques.

Key Concepts

  1. TextInput Component: The primary component for capturing text input from the user.
  2. Managing State: Using state to store and update the input values.
  3. Handling Events: Capturing and responding to user actions such as typing or submitting a form.
  4. Keyboard Handling: Managing the on-screen keyboard behavior.

TextInput Component

The TextInput component is used to capture text input from the user. It is similar to the HTML <input> element.

Basic Usage

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

const UserInputExample = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type here..."
        onChangeText={newText => setText(newText)}
        value={text}
      />
      <Text style={styles.text}>You typed: {text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  text: {
    fontSize: 18,
  },
});

export default UserInputExample;

Explanation

  • State Management: We use the useState hook to manage the text input state.
  • TextInput Component: The TextInput component captures user input. The onChangeText prop updates the state whenever the user types.
  • Displaying Input: The Text component displays the current value of the input.

Handling Events

React Native provides several events to handle user interactions with the TextInput component.

Common Events

  • onChangeText: Triggered when the text changes.
  • onSubmitEditing: Triggered when the user submits the text (e.g., pressing the return key).
  • onFocus: Triggered when the input gains focus.
  • onBlur: Triggered when the input loses focus.

Example with Events

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

const UserInputEventsExample = () => {
  const [text, setText] = useState('');

  const handleSubmit = () => {
    Alert.alert('Submitted', `You submitted: ${text}`);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type here..."
        onChangeText={newText => setText(newText)}
        value={text}
        onSubmitEditing={handleSubmit}
        onFocus={() => console.log('Input focused')}
        onBlur={() => console.log('Input blurred')}
      />
      <Text style={styles.text}>You typed: {text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  text: {
    fontSize: 18,
  },
});

export default UserInputEventsExample;

Explanation

  • onSubmitEditing: Calls the handleSubmit function when the user submits the text.
  • onFocus and onBlur: Logs messages to the console when the input gains or loses focus.

Keyboard Handling

Managing the on-screen keyboard is crucial for a good user experience. React Native provides several ways to handle the keyboard.

KeyboardAvoidingView

The KeyboardAvoidingView component automatically adjusts the position of the input fields when the keyboard appears.

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

const KeyboardHandlingExample = () => {
  const [text, setText] = useState('');

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}
    >
      <TextInput
        style={styles.input}
        placeholder="Type here..."
        onChangeText={newText => setText(newText)}
        value={text}
      />
      <Text style={styles.text}>You typed: {text}</Text>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  text: {
    fontSize: 18,
  },
});

export default KeyboardHandlingExample;

Explanation

  • KeyboardAvoidingView: Adjusts the position of the input fields to avoid being covered by the keyboard.
  • Behavior Prop: The behavior prop determines how the view should adjust. It is set to padding for iOS and height for Android.

Practical Exercise

Task

Create a simple login form with two TextInput fields for the username and password. Display an alert with the entered username and password when the user submits the form.

Solution

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

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    Alert.alert('Login Info', `Username: ${username}\nPassword: ${password}`);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Username"
        onChangeText={setUsername}
        value={username}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        secureTextEntry
        onChangeText={setPassword}
        value={password}
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

export default LoginForm;

Explanation

  • Username and Password Fields: Two TextInput fields capture the username and password.
  • Secure Text Entry: The secureTextEntry prop is used for the password field to hide the input.
  • Button: A Button component triggers the handleLogin function, displaying an alert with the entered username and password.

Conclusion

In this section, we covered the basics of handling user input in React Native. We learned how to use the TextInput component, manage state, handle events, and manage the on-screen keyboard. These skills are essential for creating interactive and user-friendly applications. In the next module, we will explore more advanced components and styling techniques.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved