?️ Controlled Components in React Native

? Quick Overview

Controlled components are form elements whose values are fully managed by React state. In React Native, inputs like TextInput, Switch, and CheckBox become predictable when their value comes directly from state.

? Key Concepts

• Component state is the single source of truth
• User input updates state using handlers
• UI always reflects the latest state value
• Easier validation and debugging

? Syntax / Theory

A controlled component binds its value prop to state and updates that state on every change event. In React Native, this is commonly done using useState with onChangeText.

? Code Example(s)

// Controlled TextInput example in React Native
import React, { useState } from "react";
import { View, Text, TextInput } from "react-native";

export default function App() {
  const [name, setName] = useState("");

  return (
    <View>
      <Text>Enter your name:</Text>
      <TextInput
        value={name}
        onChangeText={setName}
        placeholder="Type here"
      />
      <Text>You typed: {name}</Text>
    </View>
  );
}

? Live Output / Explanation

? Interactive Example / Visual Flow

State flow in a controlled component:

• User types text
• onChangeText fires
• State updates via setter
• UI re-renders with new value

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

// Current State Data:
{
  "email": ""
}

? Use Cases

• Login and signup forms
• Search inputs
• Settings toggles
• Real-time validation