📌 TextInput কী?

TextInput হলো React Native-এর একটি মূল কম্পোনেন্ট, যা ব্যবহারকারীকে ডেটা ইনপুট করার সুযোগ দেয়। এটি সাধারণ input field এর মতো কাজ করে—যেমন: নাম, ইমেইল, পাসওয়ার্ড, সার্চ টেক্সট ইত্যাদি।

🧩 Basic TextInput Example

import { View, TextInput, Text } from "react-native";
import { useState } from "react";

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

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="আপনার নাম লিখুন"
        style={{ 
          borderWidth: 1, 
          borderColor: "#008080", 
          padding: 10, 
          borderRadius: 5 
        }}
        onChangeText={(text) => setName(text)}
      />

      <Text style={{ marginTop: 15, fontSize: 18 }}>
        আপনার নাম: {name}
      </Text>
    </View>
  );
}

    

📘 Form Handling কীভাবে কাজ করে?

React Native-এ ফর্ম হ্যান্ডলিং বলতে TextInput-এর ভ্যালুগুলো স্টেট-এ সেভ করে সেগুলো ব্যবহার করা বোঝায়। সাধারণত useState() ব্যবহার করা হয় ইনপুটের মান সংরক্ষণের জন্য।

📝 একটি Simple Form Example (Name + Email)

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

export default function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = () => {
    setSubmitted(true);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="নাম লিখুন"
        style={{
          borderWidth: 1,
          borderColor: "#008080",
          padding: 10,
          borderRadius: 5,
          marginBottom: 15,
        }}
        onChangeText={(value) => setName(value)}
      />

      <TextInput
        placeholder="ইমেইল লিখুন"
        style={{
          borderWidth: 1,
          borderColor: "#008080",
          padding: 10,
          borderRadius: 5,
          marginBottom: 15,
        }}
        keyboardType="email-address"
        onChangeText={(value) => setEmail(value)}
      />

      <Button title="Submit" color="#008080" onPress={handleSubmit} />

      {submitted && (
        <View style={{ marginTop: 20 }}>
          <Text style={{ fontSize: 18 }}>নাম: {name}</Text>
          <Text style={{ fontSize: 18 }}>ইমেইল: {email}</Text>
        </View>
      )}
    </View>
  );
}

    

💡 Form Handling Best Practices

• TextInput-এর জন্য `placeholder` ব্যবহার করুন যাতে ব্যবহারকারীরা বুঝতে পারে কী লিখতে হবে।
• ইমেইল/পাসওয়ার্ডের জন্য keyboardType পরিবর্তন করুন।
• স্টেট-এ ভ্যালু সংরক্ষণ করে Validation ব্যবহার করুন।
• Button প্রেসে ফর্ম সাবমিট করার ব্যবস্থা করুন।
• ভুল ইনপুট হলে Error Message দেখান।