TextInput — co to je, zadávání textu a React Native

Co je TextInput v React Native

TextInput je React Native komponenta, která umožňuje uživateli zadávat text z klávesnice zařízení. Je základním stavebním prvkem pro registrační formuláře, vyhledávací pole, pole pro zadávání zpráv a jakékoli další scénáře vyžadující uživatelský vstup. Na rozdíl od webového vývoje, kde existují samostatné typy input (text, email, password, search), v React Native jsou všechny tyto varianty implementovány prostřednictvím jedné komponenty TextInput s různými vlastnostmi.

TextInput podporuje dva režimy práce: řízený (spravovaný přes stav React) a neřízený (s referencí). V řízeném režimu je hodnota pole uložena ve stavu komponenty a aktualizována prostřednictvím callbacku onChangeText. Tento přístup je doporučován pro většinu aplikací, protože poskytuje jediný zdroj pravdy a zjednodušuje validaci.

Podle React Native Handling Text Input, 2024 se TextInput automaticky přizpůsobuje platformě: na iOS se používá nativní UITextField, na Androidu — EditText. To zajišťuje správnou funkci automatického nahrazování, automatické opravy a systémových nabídek (vyjmout/kopírovat/vložit) bez další konfigurace.

Vlastnosti a API komponenty TextInput

TextInput poskytuje rozsáhlou sadu vlastností pro správu vstupu, vzhledu a chování. Všechny vlastnosti jsou rozděleny do několika kategorií: správa hodnoty, typ klávesnice, stylování, události a platformní vlastnosti.

Vlastnosti správy hodnoty

value — aktuální hodnota pole (pro řízený režim). onChangeText — callback volaný při každé změně textu. placeholder — nápovědný text zobrazený, když je pole prázdné. defaultValue — počáteční hodnota pro neřízený režim. maxLength omezuje maximální počet znaků, které může uživatel zadat.

Události TextInput

Komponenta podporuje onFocus (pole získalo fokus), onBlur (pole ztratilo fokus), onSubmitEditing (uživatel stiskl Enter/Return), onKeyPress (stisk klávesy). Událost onEndEditing je volána po dokončení úprav při ztrátě fokusu. Tyto callbacky umožňují implementaci složité logiky validace a odesílání formulářů.

Platformní vlastnosti

Na iOS jsou k dispozici: clearButtonMode (tlačítko vymazání), keyboardAppearance (světlá/tmavá klávesnice), returnKeyType (typ tlačítka Return), enablesReturnKeyAutomatically. Na Androidu jsou k dispozici: textContentType (automatické vyplňování), underlineColorAndroid, inlineImageLeft. secureTextEntry funguje na obou platformách pro zadávání hesel.

Řízený a neřízený vstup

V React Native může TextInput pracovat ve dvou režimech. V řízeném režimu React spravuje hodnotu pole: předáváte value ze stavu a aktualizujete ji prostřednictvím onChangeText. V neřízeném režimu React pouze inicializuje pole, zatímco hodnota podobná DOM je uložena uvnitř nativní komponenty.

Řízený TextInput

Řízený režim je doporučen pro všechny formuláře, kde je potřeba validace, filtrování nebo formátování zadávaných dat. Stav pole je synchronizován se stavem React komponenty, což poskytuje plnou kontrolu nad hodnotou.

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

V tomto příkladu obě pole používají řízený režim. Email má typ klávesnice email-address a vypnutou automatickou kapitalizaci. Heslo používá secureTextEntry pro skrytí zadávaných znaků a je omezeno na 32 znaků prostřednictvím maxLength.

Neřízený TextInput

Neřízený režim je vhodný pro jednoduchá pole, kde není potřeba validace nebo okamžitá reakce na vstup. Hodnota pole se získává přes referenci v okamžiku odeslání formuláře.

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

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

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

V neřízeném režimu se komponenta vykresluje rychleji, protože nevyžaduje synchronizaci stavu při každé změně textu. Nicméně ztrácíte možnost filtrovat, formátovat nebo validovat vstup v reálném čase.

Typy klávesnice a platformní vlastnosti

TextInput podporuje různé typy klávesnice, které přizpůsobují rozložení očekávanému formátu vstupu. Výběr správného typu klávesnice zlepšuje uživatelský zážitek a snižuje počet chyb při zadávání na mobilních zařízeních.

Na iOS jsou k dispozici další typy: numbers-and-punctuation (číslice a interpunkce), twitter, web-search (s hlasovým vyhledáváním). Na Androidu je k dispozici také visible-password (zobrazuje heslo). Správný výběr keyboardType je důležitým aspektem UX mobilní aplikace.

Platformní vlastnosti také zahrnují autoCapitalize (automatická kapitalizace prvního slova), autoCorrect (automatická oprava), spellCheck (kontrola pravopisu), textContentType (automatické vyplňování na iOS). Tyto vlastnosti fungují na každé platformě jinak a vyžadují testování.

Praktické příklady s TextInput

Podívejme se na dva reálné scénáře: víceřádkové pole pro zadávání zprávy a pole s maskovaným zadáváním telefonního čísla. Oba používají TextInput s různými vlastnostmi k dosažení požadovaného chování.

Příklad 1: víceřádkové pole pro zprávu

Pro zadávání dlouhého textu (komentáře, popis) se TextInput přepíná do víceřádkového režimu prostřednictvím vlastnosti multiline. V tomto režimu pole roste vertikálně a podporuje zalomování řádků.

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

Vlastnost multiline zapíná víceřádkový režim, numberOfLines nastavuje počáteční výšku v řádcích. textAlignVertical: 'top' zarovnává text k hornímu okraji (ve výchozím nastavení na Androidu víceřádkový TextInput centruje text vertikálně).

Příklad 2: pole s formátováním telefonního čísla

Pro zadávání telefonního čísla je často vyžadováno formátování v reálném čase. Kombinací onChangeText s regulárními výrazy lze implementovat masku zadávání.

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

Funkce formatPhone odstraňuje všechny nečíselné znaky a formátuje číslo do standardního mezinárodního formátu. keyboardType: 'phone-pad' zobrazuje telefonní klávesnici. Tento přístup zlepšuje UX pro zadávání telefonních čísel a předchází chybám formátování.