📝 React Native TextInput ও Form Handling (TypeScript সহ)

React Native অ্যাপে TextInput ও Form Handling সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলোর একটি। লগইন, রেজিস্ট্রেশন, প্রোফাইল আপডেট, সার্চ — সবকিছুই ফর্মের উপর নির্ভরশীল। এই লেসনে আমরা TypeScript ব্যবহার করে ধাপে ধাপে Form Handling শিখবো।

📌 TextInput কী?

TextInput হলো React Native-এর একটি Core Component, যেটি ব্যবহারকারীর কাছ থেকে টেক্সট ইনপুট নেওয়ার জন্য ব্যবহার করা হয়।

• Name, Email, Password ইনপুট নেওয়া
• Search Box তৈরি করা
• Form তৈরি করা

📌 Basic TextInput Example (TypeScript)

প্রথমে একটি সাধারণ TextInput দেখি যেখানে আমরা একটি নাম ইনপুট নিচ্ছি।

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

const NameInput: React.FC = () => {
  const [name, setName] = useState<string>('');

  return (
    <View>
      <Text>আপনার নাম লিখুন:</Text>
      <TextInput
        value={name}
        onChangeText={setName}
        placeholder="নাম লিখুন"
      />
    </View>
  );
};

export default NameInput;
  

📌 Multiple TextInput দিয়ে Form তৈরি

এখন আমরা একটি Login Form তৈরি করবো যেখানে থাকবে:

• Email Input
• Password Input
• Submit Button

import React, { useState } from 'react';
import { View, Text, TextInput, Button, Alert } from 'react-native';

const LoginForm: React.FC = () => {
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');

  const handleSubmit = () => {
    Alert.alert('Login Data', `Email: ${email}\nPassword: ${password}`);
  };

  return (
    <View>
      <Text>Email</Text>
      <TextInput
        placeholder="Email লিখুন"
        keyboardType="email-address"
        value={email}
        onChangeText={setEmail}
      />

      <Text>Password</Text>
      <TextInput
        placeholder="Password লিখুন"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />

      <Button title="Login" onPress={handleSubmit} />
    </View>
  );
};

export default LoginForm;
  

📌 Form Validation (Basic)

ভালো অ্যাপের জন্য ইনপুট ভ্যালিডেশন অত্যন্ত গুরুত্বপূর্ণ।

const handleSubmit = () => {
  if (!email || !password) {
    Alert.alert('Error', 'সব ফিল্ড পূরণ করুন');
    return;
  }

  Alert.alert('Success', 'Login Successful');
};
  

📌 Useful TextInput Props

• placeholder – হিন্ট টেক্সট
• secureTextEntry – Password হাইড করতে
• keyboardType – numeric / email keyboard
• maxLength – টেক্সট সীমা
• multiline – বড় টেক্সট ইনপুট

✨ Summary

✅ এই লেসন শেষ করলে আপনি React Native এ যেকোনো Form সহজেই তৈরি করতে পারবেন।