⌨️ React Native TextInput

? Quick Overview

TextInput is a core React Native component used to accept user input through the keyboard. It supports text, numbers, passwords, email inputs, and more across Android and iOS.

? Key Concepts

• Controlled component using useState
• Supports multiple keyboard types
• Can be styled like any other component
• Handles secure and multiline input

? Syntax / Theory

The TextInput component works by binding its value to a state variable and updating that value using onChangeText.

// Import TextInput and useState hook
import React, { useState } from "react";
import { TextInput, View } from "react-native";

const App = () => {
  const [text, setText] = useState("");

  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="Enter text here"
      />
    </View>
  );
};

export default App;

? Live Output / Explanation

? Interactive Example / Visual Explanation

Use the simulator below to understand how secureTextEntry and State binding work in React Native. Notice that even if the text is hidden (dots), the State variable holds the real data.

// TextInput with secure password entry
<TextInput
  secureTextEntry={true}
  placeholder="Enter password"
/>

? Use Cases

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