TextInput — یہ کیا ہے، ٹیکسٹ ان پٹ اور React Native

React Native میں TextInput کیا ہے

TextInput ایک React Native جزو ہے جو صارفین کو ڈیوائس کی بورڈ استعمال کرکے ٹیکسٹ داخل کرنے کی اجازت دیتا ہے۔ یہ رجسٹریشن فارمز، سرچ بارز، میسج ان پٹ فیلڈز اور صارف کے ان پٹ کی ضرورت والے کسی بھی منظر نامے کے لیے بنیادی تعمیراتی بلاک ہے۔ ویب ڈویلپمنٹ کے برعکس، جہاں علیحدہ ان پٹ اقسام (text، email، password، search) موجود ہیں، React Native میں یہ تمام مختلف شکلیں مختلف props کے ساتھ ایک ہی TextInput جزو کے ذریعے لاگو کی جاتی ہیں۔

TextInput آپریشن کے دو طریقوں کو سپورٹ کرتا ہے: کنٹرول شدہ (React حالت کے ذریعے منظم) اور غیر کنٹرول شدہ (ref استعمال کرتے ہوئے)۔ کنٹرول شدہ موڈ میں، فیلڈ کی قیمت جزو کی حالت میں محفوظ ہوتی ہے اور onChangeText کال بیک کے ذریعے اپ ڈیٹ ہوتی ہے۔ یہ نقطہ نظر زیادہ تر ایپلی کیشنز کے لیے تجویز کیا جاتا ہے کیونکہ یہ سچائی کا ایک ذریعہ فراہم کرتا ہے اور توثیق کو آسان بناتا ہے۔

React Native Handling Text Input، 2024 کے مطابق، TextInput خود بخود پلیٹ فارم کے مطابق ڈھل جاتا ہے: iOS پر یہ مقامی UITextField استعمال کرتا ہے، Android پر — EditText۔ یہ اضافی ترتیب کے بغیر آٹوکمپلیٹ، آٹوکریکشن اور سسٹم مینیو (کٹ/کاپی/پیسٹ) کے مناسب کام کو یقینی بناتا ہے۔

TextInput کی خصوصیات اور API

TextInput ان پٹ، ظاہری شکل اور رویے کو کنٹرول کرنے کے لیے props کا ایک وسیع سیٹ فراہم کرتا ہے۔ تمام props کئی زمروں میں تقسیم ہیں: قیمت کا انتظام، کی بورڈ کی قسم، اسٹائلنگ، واقعات اور پلیٹ فارم کے لیے مخصوص خصوصیات۔

قیمت کے انتظام کے props

value — فیلڈ کی موجودہ قیمت (کنٹرول شدہ موڈ کے لیے)۔ onChangeText — ہر ٹیکسٹ تبدیلی پر بلایا جانے والا کال بیک۔ placeholder — فیلڈ خالی ہونے پر دکھایا جانے والا اشارہ متن۔ defaultValue — غیر کنٹرول شدہ موڈ کے لیے ابتدائی قیمت۔ maxLength صارف کے داخل کردہ حروف کی زیادہ سے زیادہ تعداد کو محدود کرتا ہے۔

TextInput کے واقعات

جزو onFocus (فیلڈ کو فوکس ملا)، onBlur (فیلڈ نے فوکس کھو دیا)، onSubmitEditing (صارف نے Enter/Return دبایا)، onKeyPress (کی دبائی) کو سپورٹ کرتا ہے۔ onEndEditing واقعہ فوکس کھونے پر تدوین مکمل ہونے کے بعد بلایا جاتا ہے۔ یہ کال بیکس پیچیدہ توثیق اور فارم جمع کرانے کی منطق کو لاگو کرنے کی اجازت دیتے ہیں۔

پلیٹ فارم کے لیے مخصوص props

iOS پر: clearButtonMode (صاف بٹن)، keyboardAppearance (ہلکا/گہرا کی بورڈ)، returnKeyType (Return بٹن کی قسم)، enablesReturnKeyAutomatically۔ Android پر: textContentType (آٹو فل)، underlineColorAndroid، inlineImageLeft۔ secureTextEntry پاس ورڈ کے ان پٹ کے لیے دونوں پلیٹ فارمز پر کام کرتا ہے۔

کنٹرول شدہ اور غیر کنٹرول شدہ ان پٹ

React Native میں، TextInput دو طریقوں میں کام کر سکتا ہے۔ کنٹرول شدہ موڈ میں، React فیلڈ کی قیمت کا انتظام کرتا ہے: آپ حالت سے قیمت منتقل کرتے ہیں اور اسے onChangeText کے ذریعے اپ ڈیٹ کرتے ہیں۔ غیر کنٹرول شدہ موڈ میں، React صرف فیلڈ کو شروع کرتا ہے، اور DOM جیسی قیمت مقامی جزو کے اندر محفوظ ہوتی ہے۔

کنٹرول شدہ TextInput

کنٹرول شدہ موڈ ان تمام فارمز کے لیے تجویز کیا جاتا ہے جنہیں ان پٹ ڈیٹا کی توثیق، فلٹرنگ یا فارمیٹنگ کی ضرورت ہوتی ہے۔ فیلڈ کی حالت React جزو کی حالت کے ساتھ مطابقت رکھتی ہے، جو قیمت پر مکمل کنٹرول دیتی ہے۔

const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    return (
        <View>
            <TextInput
                placeholder="Email"
                value={email}
                onChangeText={setEmail}
                keyboardType="email-address"
                autoCapitalize="none"
            />
            <TextInput
                placeholder="Password"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
                maxLength={32}
            />
        </View>
    );
};

اس مثال میں، دونوں فیلڈز کنٹرول شدہ موڈ استعمال کرتے ہیں۔ ای میل فیلڈ میں email-address کی بورڈ کی قسم ہے اور خودکار کیپیٹلائزیشن غیر فعال ہے۔ پاس ورڈ فیلڈ ان پٹ حروف کو چھپانے کے لیے secureTextEntry استعمال کرتا ہے اور maxLength کے ذریعے 32 حروف تک محدود ہے۔

غیر کنٹرول شدہ TextInput

غیر کنٹرول شدہ موڈ سادہ فیلڈز کے لیے موزوں ہے جنہیں توثیق یا ان پٹ پر فوری ردعمل کی ضرورت نہیں ہوتی۔ فیلڈ کی قیمت فارم جمع کرانے کے وقت ref کے ذریعے حاصل کی جاتی ہے۔

const SimpleSearch = () => {
    const inputRef = useRef(null);

    const handleSearch = () => {
        console.log(inputRef.current.value());
    };

    return (
        <TextInput
            ref={inputRef}
            placeholder="Search..."
            onSubmitEditing={handleSearch}
        />
    );
};

غیر کنٹرول شدہ موڈ میں، جزو تیزی سے رینڈر ہوتا ہے کیونکہ اسے ہر ٹیکسٹ تبدیلی پر حالت کی مطابقت پذیری کی ضرورت نہیں ہوتی۔ تاہم، آپ ریئل ٹائم میں ان پٹ کو فلٹر، فارمیٹ یا توثیق کرنے کی صلاحیت کھو دیتے ہیں۔

کی بورڈ اقسام اور پلیٹ فارم کی خصوصیات

TextInput مختلف کی بورڈ اقسام کو سپورٹ کرتا ہے جو متوقع ان پٹ فارمیٹ کے مطابق ترتیب کو ڈھال لیتے ہیں۔ صحیح کی بورڈ کی قسم کا انتخاب صارف کے تجربے کو بہتر بناتا ہے اور موبائل آلات پر ان پٹ کی غلطیوں کو کم کرتا ہے۔

iOS پر اضافی اقسام دستیاب ہیں: numbers-and-punctuation، twitter، web-search (صوتی تلاش کے ساتھ)۔ Android پر visible-password بھی دستیاب ہے (پاس ورڈ دکھاتا ہے)۔ صحیح keyboardType کا انتخاب موبائل ایپلی کیشن UX کا ایک اہم پہلو ہے۔

پلیٹ فارم کی خصوصیات میں autoCapitalize (پہلے لفظ کا خودکار بڑا حرف)، autoCorrect (خودکار تصحیح)، spellCheck (ہجے کی جانچ)، textContentType (iOS پر آٹو فل) بھی شامل ہیں۔ یہ props ہر پلیٹ فارم پر مختلف طریقے سے کام کرتے ہیں اور جانچ کی ضرورت ہوتی ہے۔

TextInput کے ساتھ عملی مثالیں

آئیے دو حقیقی منظرناموں پر غور کریں: پیغام کے ان پٹ کے لیے کثیر السطری فیلڈ اور ماسک شدہ فون نمبر ان پٹ فیلڈ۔ دونوں مطلوبہ رویہ حاصل کرنے کے لیے مختلف props کے ساتھ TextInput استعمال کرتے ہیں۔

مثال 1: پیغام کے لیے کثیر السطری فیلڈ

لمبا متن (تبصرے، وضاحتیں) درج کرنے کے لیے، TextInput multiline prop کے ذریعے کثیر السطری موڈ میں تبدیل ہوتا ہے۔ اس موڈ میں، فیلڈ عمودی طور پر بڑھتا ہے اور لائن بریک کو سپورٹ کرتا ہے۔

const MessageInput = ({ onSend }) => {
    const [text, setText] = useState('');

    return (
        <TextInput
            style={styles.input}
            multiline
            numberOfLines={4}
            placeholder="Write a message..."
            value={text}
            onChangeText={setText}
            textAlignVertical="top"
        />
    );
};

multiline prop کثیر السطری موڈ کو فعال کرتا ہے، numberOfLines لائنوں میں ابتدائی اونچائی مقرر کرتا ہے۔ textAlignVertical: 'top' متن کو اوپر سیدھ میں لاتا ہے (پہلے سے طے شدہ طور پر، Android کثیر السطری TextInput متن کو عمودی طور پر مرکز کرتا ہے)۔

مثال 2: فون نمبر فارمیٹنگ فیلڈ

فون نمبر درج کرنے کے لیے، اکثر ریئل ٹائم فارمیٹنگ کی ضرورت ہوتی ہے۔ onChangeText کو ریگولر ایکسپریشنز کے ساتھ ملا کر، آپ ایک ان پٹ ماسک لاگو کر سکتے ہیں۔

const PhoneInput = () => {
    const [phone, setPhone] = useState('');

    const formatPhone = (text) => {
        const cleaned = text.replace(/\D/g, '');
        if (cleaned.length <= 11) {
            return cleaned.replace(
                /(\d{1})(\d{3})(\d{3})(\d{2})(\d{2})/,
                '+$1 ($2) $3 $4 $5'
            );
        }
        return cleaned;
    };

    return (
        <TextInput
            keyboardType="phone-pad"
            value={phone}
            onChangeText={(t) => setPhone(formatPhone(t))}
            placeholder="+7 (999) 123 45 67"
            maxLength={20}
        />
    );
};

formatPhone فنکشن تمام غیر ہندسوں والے حروف کو ہٹاتا ہے اور نمبر کو معیاری بین الاقوامی فارمیٹ میں فارمیٹ کرتا ہے۔ keyboardType: 'phone-pad' فون کی بورڈ دکھاتا ہے۔ یہ نقطہ نظر فون نمبر کے ان پٹ کے لیے UX کو بہتر بناتا ہے اور فارمیٹنگ کی غلطیوں کو روکتا ہے۔