TextInput — nedir, metin girişi ve React Native

React Native'de TextInput Nedir

TextInput, kullanıcıların cihaz klavyesini kullanarak metin girmesini sağlayan bir React Native bileşenidir. Kayıt formları, arama çubukları, mesaj giriş alanları ve kullanıcı girişi gerektiren diğer tüm senaryolar için temel yapı taşıdır. Web geliştirmede ayrı input türleri (text, email, password, search) bulunurken, React Native'de tüm bu varyantlar farklı propslara sahip tek bir TextInput bileşeni aracılığıyla uygulanır.

TextInput iki çalışma modunu destekler: kontrollü (React durumu aracılığıyla yönetilen) ve kontrolsüz (ref kullanarak). Kontrollü modda, alan değeri bileşen durumunda saklanır ve onChangeText geri çağrısı aracılığıyla güncellenir. Bu yaklaşım, tek bir doğruluk kaynağı sağladığı ve doğrulamayı basitleştirdiği için çoğu uygulama için önerilir.

React Native Handling Text Input, 2024'e göre TextInput, platforma otomatik olarak uyum sağlar: iOS'ta yerel UITextField, Android'de EditText kullanır. Bu, ek yapılandırma gerektirmeden otomatik tamamlama, otomatik düzeltme ve sistem menülerinin (kes/kopyala/yapıştır) doğru şekilde çalışmasını sağlar.

TextInput Özellikleri ve API

TextInput, girişi, görünümü ve davranışı kontrol etmek için kapsamlı bir props seti sağlar. Tüm propslar birkaç kategoriye ayrılır: değer yönetimi, klavye türü, stil oluşturma, olaylar ve platforma özgü özellikler.

Değer Yönetimi Propsları

value — alanın mevcut değeri (kontrollü mod için). onChangeText — her metin değişikliğinde çağrılan geri çağrı. placeholder — alan boşken gösterilen ipucu metni. defaultValue — kontrolsüz mod için başlangıç değeri. maxLength, kullanıcının girebileceği maksimum karakter sayısını sınırlar.

TextInput Olayları

Bileşen onFocus (alan odağı aldı), onBlur (alan odağı kaybetti), onSubmitEditing (kullanıcı Enter/Return tuşuna bastı), onKeyPress (tuşa basma) destekler. onEndEditing olayı, odak kaybedildiğinde düzenleme tamamlandıktan sonra çağrılır. Bu geri çağrılar, karmaşık doğrulama ve form gönderme mantığının uygulanmasına olanak tanır.

Platforma Özgü Propslar

iOS'ta: clearButtonMode (temizleme düğmesi), keyboardAppearance (açık/koyu klavye), returnKeyType (Return düğmesi türü), enablesReturnKeyAutomatically. Android'te: textContentType (otomatik doldurma), underlineColorAndroid, inlineImageLeft. secureTextEntry, şifre girişi için her iki platformda da çalışır.

Kontrollü ve Kontrolsüz Giriş

React Native'de TextInput iki modda çalışabilir. Kontrollü modda, React alan değerini yönetir: durumdan değer aktarır ve onChangeText aracılığıyla güncellersiniz. Kontrolsüz modda, React yalnızca alanı başlatır ve DOM benzeri değer yerel bileşenin içinde saklanır.

Kontrollü TextInput

Kontrollü mod, giriş verilerinin doğrulanması, filtrelenmesi veya biçimlendirilmesi gereken tüm formlar için önerilir. Alan durumu, React bileşen durumuyla senkronize edilir ve değer üzerinde tam kontrol sağlar.

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>
    );
};

Bu örnekte, her iki alan da kontrollü modu kullanır. E-posta alanı, email-address klavye türüne sahiptir ve otomatik büyük harf kullanımı devre dışı bırakılmıştır. Şifre alanı, giriş karakterlerini gizlemek için secureTextEntry kullanır ve maxLength ile 32 karakterle sınırlandırılmıştır.

Kontrolsüz TextInput

Kontrolsüz mod, doğrulama veya girişe anında tepki gerektirmeyen basit alanlar için uygundur. Alan değeri, form gönderimi sırasında bir ref aracılığıyla alınır.

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

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

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

Kontrolsüz modda, bileşen daha hızlı işlenir çünkü her metin değişikliğinde durum senkronizasyonu gerektirmez. Ancak, gerçek zamanlı olarak girişi filtreleme, biçimlendirme veya doğrulama yeteneğini kaybedersiniz.

Klavye Türleri ve Platform Özellikleri

TextInput, düzeni beklenen giriş biçimine göre uyarlayan çeşitli klavye türlerini destekler. Doğru klavye türünü seçmek, kullanıcı deneyimini iyileştirir ve mobil cihazlarda giriş hatalarını azaltır.

iOS'ta ek türler mevcuttur: numbers-and-punctuation, twitter, web-search (sesli arama ile). Android'te visible-password da mevcuttur (şifreyi gösterir). Doğru keyboardType seçimi, mobil uygulama UX'inin önemli bir yönüdür.

Platform özellikleri ayrıca autoCapitalize (ilk kelimenin otomatik büyük harfle başlaması), autoCorrect (otomatik düzeltme), spellCheck (yazım denetimi), textContentType (iOS'ta otomatik doldurma) içerir. Bu propslar her platformda farklı çalışır ve test gerektirir.

TextInput ile Pratik Örnekler

İki gerçek senaryoyu ele alalım: mesaj girişi için çok satırlı alan ve maskelenmiş telefon numarası giriş alanı. Her ikisi de istenen davranışı elde etmek için farklı propslarla TextInput kullanır.

Örnek 1: Mesaj için Çok Satırlı Alan

Uzun metin (yorumlar, açıklamalar) girmek için TextInput, multiline propu aracılığıyla çok satırlı moda geçer. Bu modda alan dikey olarak büyür ve satır sonlarını destekler.

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 propu çok satırlı modu etkinleştirir, numberOfLines satır cinsinden başlangıç yüksekliğini ayarlar. textAlignVertical: 'top' metni üste hizalar (varsayılan olarak, Android çok satırlı TextInput metni dikey olarak ortalar).

Örnek 2: Telefon Numarası Biçimlendirme Alanı

Telefon numarası girmek için genellikle gerçek zamanlı biçimlendirme gerekir. onChangeText'i düzenli ifadelerle birleştirerek bir giriş maskesi uygulayabilirsiniz.

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 işlevi, rakam olmayan tüm karakterleri kaldırır ve numarayı standart uluslararası biçime dönüştürür. keyboardType: 'phone-pad' telefon klavyesini gösterir. Bu yaklaşım, telefon numarası girişi için UX'i iyileştirir ve biçimlendirme hatalarını önler.