TextInput — що це, введення тексту та React Native

Що таке TextInput у React Native

TextInput — це компонент React Native, який дозволяє користувачеві вводити текст з клавіатури пристрою. Він є основним будівельним блоком для форм реєстрації, пошукових рядків, полів введення повідомлень та будь-яких інших сценаріїв, де потрібне введення користувача. На відміну від веб-розробки, де існують окремі типи input (text, email, password, search), у React Native всі ці варіанти реалізуються через один компонент TextInput із різними пропсами.

TextInput підтримує два режими роботи: контрольований(керований через стан React) та неконтрольований (з рефом). У контрольованому режимі значення поля зберігається в стані компонента та оновлюється через колбек onChangeText. Цей підхід рекомендується для більшості застосунків, оскільки він забезпечує єдине джерело істини та спрощує валідацію.

За даними React Native Handling Text Input, 2024, TextInput автоматично адаптується до платформи: на iOS використовується нативний UITextField, на Android — EditText. Це забезпечує коректну роботу автозаповнення, автокорекції та системних меню (вирізати/копіювати/вставити) без додаткового налаштування.

Властивості та API компонента TextInput

TextInput надає розширений набір пропсів для керування введенням, зовнішнім виглядом та поведінкою. Усі пропси поділяються на кілька категорій: керування значенням, тип клавіатури, стилізація, події та платформенні особливості.

Пропси керування значенням

value — поточне значення поля (для контрольованого режиму). onChangeText — колбек, що викликається при кожній зміні тексту. placeholder — текст-підказка, що відображається коли поле порожнє. defaultValue — початкове значення для неконтрольованого режиму. maxLength обмежує максимальну кількість символів, які може ввести користувач.

Події TextInput

Компонент підтримує onFocus(поле отримало фокус), onBlur (поле втратило фокус), onSubmitEditing (користувач натиснув Enter/Return), onKeyPress (натискання клавіші). Подія onEndEditing викликається після завершення редагування при втраті фокусу. Ці колбеки дозволяють реалізувати складну логіку валідації та надсилання форм.

Платформенні пропси

На 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 має тип клавіатури 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 для введення телефонних номерів та запобігає помилкам форматування.