User Input and Forms

# CHAPTER 13

User Input and Forms #

1. Introduction #

2. Learning Objectives #

• Implement the <TextInput> component.

• Bind the input to React State to create a "Controlled Input."

• Customize keyboard types, secure text entry, and auto-capitalization.

• Implement basic form validation logic.

• Utilize KeyboardAvoidingView to prevent UI overlaps.

3. The TextInput Component #

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

export default function BasicInput() {
  return (
    <View style={styles.container}>
      <TextInput 
        style={styles.input} 
        placeholder="Enter your name..." // Hint text shown before typing
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 50 },
  input: {
    height: 50,
    borderColor: &#039;gray&#039;,
    borderWidth: 1,
    paddingHorizontal: 15,
    borderRadius: 8,
  }
});

4. Controlled Inputs (The React Way) #

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

export default function ControlledForm() {
  // 1. Create the State
  const [email, setEmail] = useState('');

  const handleSubmit = () => {
    console.log("Submitting email to server:", email);
  };

  return (
    <View style={{ padding: 50 }}>
      {/* 2. Bind the UI to the State! */}
      <TextInput
        style={{ borderWidth: 1, padding: 10, marginBottom: 20 }}
        placeholder="Email address"
        
        // As the user types, update the State instantly!
        onChangeText={(newText) => setEmail(newText)}
        
        // Force the text box to display whatever is currently in State!
        value={email} 
      />
      
      <Text>You are currently typing: {email}</Text>
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
}

5. Customizing the Keyboard #

<TextInput
  placeholder="Phone Number"
  keyboardType="phone-pad" // Opens the number pad! (Others: 'email-address', 'numeric')
/>

<TextInput
  placeholder="Password"
  secureTextEntry={true} // Hides the text! (Equivalent to type="password" on web)
/>

<TextInput
  placeholder="Email"
  keyboardType="email-address"
  autoCapitalize="none" // Stops the first letter from being capitalized!
  autoCorrect={false} // Stops autocomplete from ruining the email domain
/>

6. Form Validation Basics #

const [password, setPassword] = useState('');
const [errorMsg, setErrorMsg] = useState('');

const handleLogin = () => {
  if (password.length < 6) {
    setErrorMsg("Password must be at least 6 characters.");
    return; // Stop execution!
  }
  
  setErrorMsg(""); // Clear errors
  console.log("Logging in securely...");
};

// In JSX:
{errorMsg ? <Text style={{ color: &#039;red&#039; }}>{errorMsg}</Text> : null}

7. The Keyboard Trap (KeyboardAvoidingView) #

React Native provides the <KeyboardAvoidingView> wrapper to fix this. It detects the keyboard sliding up, and physically pushes your entire UI upward so the text box remains visible.

import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';

export default function ChatScreen() {
  return (
    // Wrap your screen in this!
    <KeyboardAvoidingView 
      style={{ flex: 1 }} 
      // iOS requires 'padding', Android usually handles it automatically if set to 'height'
      behavior={Platform.OS === &#039;ios&#039; ? &#039;padding&#039; : &#039;height&#039;} 
    >
      <View style={{ flex: 1, justifyContent: &#039;flex-end&#039; }}>
        <TextInput placeholder="Type a message..." />
      </View>
    </KeyboardAvoidingView>
  );
}

8. Visual Learning: The Controlled Flow #

[ USER PRESSES KEY 'A' ]
         |
    (onChangeText fires)
         v
    [ setEmail('A') ]
         |
    (React Re-Renders)
         v
[ <TextInput value={email} /> ] <-- Text box visually displays &#039;A'

9. Common Mistakes #

• Using onChange instead of onChangeText: In web React, you use onChange={(e) => setText(e.target.value)}. In React Native, the event architecture is completely different. ALWAYS use onChangeText={(text) => setText(text)}, which provides the raw string immediately without requiring you to dig through complex event targets.

10. Best Practices #

• Dismissing the Keyboard: Sometimes users tap outside the text box to cancel typing, but the keyboard stays stuck on the screen. Wrap your entire screen form in a <TouchableWithoutFeedback onPress={Keyboard.dismiss}>. This ensures that tapping anywhere in the empty background instantly hides the keyboard.

11. Practice Exercises #

1. 1. What prop must be set to true on a <TextInput> to obscure the user's input (like a password field)?

1. 2. Write the syntax to change the keyboard popup from a standard QWERTY layout to a specific email address layout (featuring an easy-access '@' symbol).

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the concept of a "Controlled Component" in React. Why is allowing the native UI element to manage its own internal state considered an anti-pattern?

• Q: Describe how you would utilize the KeyboardAvoidingView along with the Platform.OS module to create a cross-platform solution for keyboard overlap issues.

• Q: Explain the UX benefits of utilizing specific keyboardType and autoCapitalize props when designing a login flow. Give specific examples of bad defaults.

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #