React Native - Text Input

React Native - Text Input

This chapter demonstrates how to work with TextInput components in React Native, allowing users to enter text into your application. We’ll build a simple login form example.

We’ll create a component, LoginForm.js, that handles user input for email and password.

LoginForm.js Example

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

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    if (!email || !password) {
      Alert.alert('Error', 'Please enter both email and password.');
      return;
    }
    Alert.alert('Login Info', `Email: ${email}\nPassword: ${password}`);
    // In a real app, you would typically send this to a server for authentication.
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Login</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your Email"
        placeholderTextColor="#9a9a9a"
        value={email}
        onChangeText={setEmail} // Directly use the setter from useState
        keyboardType="email-address"
        autoCapitalize="none"
        autoCorrect={false}
      />
      <TextInput
        style={styles.input}
        placeholder="Enter your Password"
        placeholderTextColor="#9a9a9a"
        value={password}
        onChangeText={setPassword} // Directly use the setter from useState
        secureTextEntry={true} // Hides password characters
        autoCapitalize="none"
      />
      <TouchableOpacity style={styles.submitButton} onPress={handleLogin}>
        <Text style={styles.submitButtonText}>Submit</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
  },
  input: {
    height: 50,
    borderColor: '#cccccc',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 15,
    marginBottom: 15,
    backgroundColor: '#ffffff',
    fontSize: 16,
  },
  submitButton: {
    backgroundColor: '#007bff',
    paddingVertical: 15,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 10,
  },
  submitButtonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default LoginForm;

Explanation

• State Management: We use useState to manage the email and password input values.
• TextInput Props:
  • value: Binds the input field’s value to our state variable.
  • onChangeText: A callback that receives the new text whenever the input changes. We directly pass the state setter function (e.g., setEmail).
  • placeholder: Text displayed before the user types.
  • placeholderTextColor: Color of the placeholder text.
  • keyboardType: Specifies the type of keyboard to display (e.g., "email-address", "numeric").
  • autoCapitalize: Controls automatic capitalization (e.g., "none", "sentences").
  • secureTextEntry: If true, masks the text entered (useful for passwords).
  • autoCorrect: Disables or enables autocorrect.
• Handling Submission: The handleLogin function is called when the TouchableOpacity (acting as a button) is pressed. It displays an alert with the entered email and password. In a real application, this is where you’d implement logic for authentication or data submission.

When you run this component, you will see two input fields for email and password, and a submit button. As you type, the state updates. Pressing ‘Submit’ will show an alert with the entered values.

Best Practices for Text Inputs

• Controlled Components: By using the value and onChangeText props, our TextInput components are ‘controlled components’. This means React state is the single source of truth for the input’s value.
• User Experience: Provide clear placeholders, appropriate keyboardType, and consider autoFocus for the first input field in a form.
• Validation: Implement input validation to guide users and prevent errors. This can be done within the onChangeText handlers or upon submission.

For more details on TextInput props, refer to the official React Native documentation: https://reactnative.dev/docs/textinput