13- Text Inputs & State Management

1. The TextInput Component

React Native provides a native <TextInput /> for user data entry. By default, it is completely unstyled, appearing as an invisible field unless you look closely at the placeholder.

• Placeholder: placeholder="Email" gives the user a hint of what to type.
• Keyboard Optimization: Use keyboardType="email-address" to show the @ symbol immediately, improving UX for login forms.
• Security: For passwords, the secureTextEntry={true} prop hides characters (replacing them with dots or stars).

2. Creating a Reusable "ThemedTextInput"

Since inputs are used throughout the app, we extract them into a custom component that automatically respects the user's Light/Dark mode.

File: ./components/ThemedTextInput.jsx

import { TextInput, useColorScheme } from "react-native";
import { Colors } from "../constants/Colors";

const ThemedTextInput = ({ style, ...props }) => {
  const colorScheme = useColorScheme();
  const theme = Colors[colorScheme] ?? Colors.light;

  return (
    <TextInput
      style={[
        {
          backgroundColor: theme.uiBackground,
          color: theme.text,
          padding: 20,
          borderRadius: 6,
        },
        style,
      ]}
      placeholderTextColor={theme.iconColor} // Helps visibility in both themes
      {...props}
    />
  );
};

export default ThemedTextInput;

3. State Management with useState

To capture what the user is typing, we use Two-Way Data Binding. This means the input shows the state value, and the state updates whenever the text changes.

• onChangeText: A prop that automatically receives the current string from the input.
• Value: Points back to the state variable, allowing the code to reset the form easily.

const [email, setEmail] = useState("");

<ThemedTextInput
  placeholder="Email"
  value={email}
  onChangeText={setEmail} // Automatically passes the text to the setter
  keyboardType="email-address"
/>

4. Improving UX: Dismissing the Keyboard

On mobile, the keyboard often stays open even if you click outside the input. To fix this, we wrap our screen in TouchableWithoutFeedback.

• The logic: If the user taps anywhere on the screen that isn't a button or input, we trigger Keyboard.dismiss().