TextInput — шта је то, унос текста и React Native

Шта је TextInput у React Native-у

TextInput је React Native компонента која омогућава кориснику да уноси текст са тастатуре уређаја. Она је основни градивни блок за формуларе за регистрацију, траке за претрагу, поља за унос порука и све друге сценарије где је потребан кориснички унос. За разлику од веб развоја, где постоје одвојени типови input (text, email, password, search), у React Native-у се све ове варијанте реализују кроз једну компоненту TextInput са различитим својствима.

TextInput подржава два режима рада: контролисани (управљан преко React стања) и неконтролисани (са референцом). У контролисаном режиму, вредност поља се чува у стању компоненте и ажурира се преко callback-а onChangeText. Овај приступ се препоручује за већину апликација, јер обезбеђује јединствени извор истине и поједностављује валидацију.

Према React Native Handling Text Input, 2024, TextInput се аутоматски прилагођава платформи: на iOS-у се користи изворни UITextField, на Android-у — EditText. Ово обезбеђује исправан рад аутоматске замене, аутоматске корекције и системских менија (исеци/копирај/налепи) без додатног подешавања.

Својства и API компоненте TextInput

TextInput пружа опсежан скуп својстава за управљање уносом, изгледом и понашањем. Сва својства су подељена у неколико категорија: управљање вредношћу, тип тастатуре, стилизовање, догађаји и платформске карактеристике.

Својства за управљање вредношћу

value — тренутна вредност поља (за контролисани режим). onChangeText — callback који се позива при свакој промени текста. placeholder — текст-савет који се приказује када је поље празно. defaultValue — почетна вредност за неконтролисани режим. maxLength ограничава максималан број карактера које корисник може да унесе.

Догађаји TextInput-а

Компонента подржава onFocus (поље је добило фокус), onBlur (поље је изгубило фокус), onSubmitEditing (корисник је притиснуо Enter/Return), onKeyPress (притисак на тастер). Догађај onEndEditing се позива након завршетка уређивања при губитку фокуса. Ови callback-ови омогућавају имплементацију сложене логике валидације и слања формулара.

Платформска својства

На iOS-у су доступни: clearButtonMode (дугме за чишћење), keyboardAppearance (светла/тамна тастатура), returnKeyType (тип дугмета Return), enablesReturnKeyAutomatically. На Android-у су доступни: textContentType (аутоматско попуњавање), underlineColorAndroid, inlineImageLeft. secureTextEntry ради на обе платформе за унос лозинки.

Контролисани и неконтролисани унос

У React Native-у, TextInput може да ради у два режима. У контролисаном режиму, React управља вредношћу поља: прослеђујете value из стања и ажурирате га преко 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 има тип тастатуре email-address и искључену аутоматску капитализацију. Лозинка користи secureTextEntry за скривање унетих карактера и ограничена је на 32 карактера преко maxLength.

Неконтролисани TextInput

Неконтролисани режим је погодан за једноставна поља где није потребна валидација или тренутна реакција на унос. Вредност поља се добија преко референце у тренутку слања формулара.

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-у). Ова својства раде различито на свакој платформи и захтевају тестирање.

Практични примери са TextInput-ом

Размотримо два реална сценарија: вишелинијско поље за унос поруке и поље са маскираним уносом броја телефона. Оба користе TextInput са различитим својствима за постизање жељеног понашања.

Пример 1: вишелинијско поље за поруку

За унос дугачког текста (коментари, опис), TextInput се пребацује у вишелинијски режим преко својства multiline. У овом режиму, поље расте вертикално и подржава преламање редова.

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 укључује вишелинијски режим, 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 за унос телефонских бројева и спречава грешке у форматирању.