? Handling Input Value in React Native

? Quick Overview

In React Native, user input is commonly handled using the TextInput component. To read and update values entered by the user, state management is used along with the onChangeText event.

? Key Concepts

• TextInput component for user input
• useState hook for storing input value
• onChangeText for tracking changes
• value prop for controlled inputs

? Syntax / Theory

React Native follows the concept of controlled components. The input value is stored in state, and the same state is passed back to the input. This ensures full control over user data.

? Code Example

// Import required hooks and components
import React, { useState } from "react";
import { View, Text, TextInput } from "react-native";

const App = () => {
  const [name, setName] = useState("");

  return (
    <View>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
      />
      <Text>Hello {name}</Text>
    </View>
  );
};

export default App;

? Interactive Simulator

Interact with the simulation below to understand how the Input field communicates with the State variable.

? Live Output / Explanation

? Interactive Explanation

Think of TextInput as a pipe:

• User types text
• onChangeText captures the value
• State updates
• UI re-renders automatically

? Use Cases

• Login and signup forms
• Search bars
• Profile editing screens
• Chat message inputs