TextInput — wat is het, tekstinvoer en React Native

Wat is TextInput in React Native

TextInput is een React Native component waarmee de gebruiker tekst kan invoeren via het toetsenbord van het apparaat. Het is het belangrijkste bouwblok voor registratieformulieren, zoekbalken, berichtinvoervelden en alle andere scenario's waar gebruikersinvoer vereist is. In tegenstelling tot webontwikkeling, waar aparte input-typen bestaan (text, email, password, search), worden in React Native al deze varianten geïmplementeerd via één TextInput component met verschillende eigenschappen.

TextInput ondersteunt twee werkmodi: gecontroleerd (beheerd via React state) en ongecontroleerd (met ref). In de gecontroleerde modus wordt de waarde van het veld opgeslagen in de componentstatus en bijgewerkt via de onChangeText callback. Deze aanpak wordt aanbevolen voor de meeste applicaties, omdat het een enkele bron van waarheid biedt en validatie vereenvoudigt.

Volgens React Native Handling Text Input, 2024 past TextInput zich automatisch aan het platform aan: op iOS wordt native UITextField gebruikt, op Android — EditText. Dit zorgt voor correcte werking van automatisch aanvullen, autocorrectie en systeemmenu's (knippen/kopiëren/plakken) zonder extra configuratie.

Eigenschappen en API van TextInput

TextInput biedt een uitgebreide set eigenschappen voor het beheren van invoer, weergave en gedrag. Alle eigenschappen zijn onderverdeeld in verschillende categorieën: waardebeheer, toetsenbordtype, styling, gebeurtenissen en platformkenmerken.

Eigenschappen voor waardebeheer

value — de huidige waarde van het veld (voor de gecontroleerde modus). onChangeText — callback die wordt aangeroepen bij elke wijziging van de tekst. placeholder — hinttekst die wordt weergegeven wanneer het veld leeg is. defaultValue — beginwaarde voor de ongecontroleerde modus. maxLength beperkt het maximale aantal tekens dat de gebruiker kan invoeren.

TextInput gebeurtenissen

Het component ondersteunt onFocus (veld kreeg focus), onBlur (veld verloor focus), onSubmitEditing (gebruiker drukte op Enter/Return), onKeyPress (toetsaanslag). De gebeurtenis onEndEditing wordt aangeroepen na het beëindigen van het bewerken bij focusverlies. Deze callbacks maken het mogelijk om complexe validatie- en formulierverzendingslogica te implementeren.

Platformeigenschappen

Op iOS zijn beschikbaar: clearButtonMode (wisknop), keyboardAppearance (licht/donker toetsenbord), returnKeyType (type Return-knop), enablesReturnKeyAutomatically. Op Android zijn beschikbaar: textContentType (automatisch aanvullen), underlineColorAndroid, inlineImageLeft. secureTextEntry werkt op beide platforms voor wachtwoordinvoer.

Gecontroleerde en ongecontroleerde invoer

In React Native kan TextInput in twee modi werken. In de gecontroleerde modus beheert React de waarde van het veld: u geeft value door vanuit de state en werkt het bij via onChangeText. In de ongecontroleerde modus initialiseert React alleen het veld, terwijl de DOM-achtige waarde binnen de native component wordt opgeslagen.

Gecontroleerde TextInput

De gecontroleerde modus wordt aanbevolen voor alle formulieren waar validatie, filtering of formattering van ingevoerde gegevens nodig is. De veldstatus is gesynchroniseerd met de React-componentstatus, wat volledige controle over de waarde geeft.

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

In dit voorbeeld gebruiken beide velden de gecontroleerde modus. E-mail heeft het toetsenbordtype email-address en automatisch hoofdletters uitgeschakeld. Wachtwoord gebruikt secureTextEntry om ingevoerde tekens te verbergen en is beperkt tot 32 tekens via maxLength.

Ongecontroleerde TextInput

De ongecontroleerde modus is geschikt voor eenvoudige velden waar geen validatie of onmiddellijke reactie op invoer nodig is. De veldwaarde wordt opgehaald via een ref op het moment van formulierverzending.

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

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

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

In de ongecontroleerde modus rendert het component sneller, omdat het geen statussynchronisatie bij elke tekstwijziging vereist. U verliest echter de mogelijkheid om invoer in realtime te filteren, formatteren of valideren.

Toetsenbordtypen en platformkenmerken

TextInput ondersteunt verschillende toetsenbordtypen die de lay-out aanpassen aan het verwachte invoerformaat. Het kiezen van het juiste toetsenbordtype verbetert de gebruikerservaring en vermindert het aantal invoerfouten op mobiele apparaten.

Op iOS zijn extra typen beschikbaar: numbers-and-punctuation (cijfers en leestekens), twitter, web-search (met spraakzoeken). Op Android is ook visible-password (wachtwoord tonen) beschikbaar. De juiste keuze van keyboardType is een belangrijk aspect van de UX van mobiele applicaties.

Platformkenmerken omvatten ook autoCapitalize (automatisch hoofdletter voor het eerste woord), autoCorrect (autocorrectie), spellCheck (spellingscontrole), textContentType (automatisch aanvullen op iOS). Deze eigenschappen werken anders op elk platform en vereisen testen.

Praktische voorbeelden met TextInput

Laten we twee realistische scenario's bekijken: een meerregelig veld voor berichtinvoer en een veld met gemaskeerde invoer van een telefoonnummer. Beide gebruiken TextInput met verschillende eigenschappen om het gewenste gedrag te bereiken.

Voorbeeld 1: meerregelig veld voor bericht

Voor het invoeren van lange tekst (opmerkingen, beschrijving) schakelt TextInput naar de meerregelige modus via de eigenschap multiline. In deze modus groeit het veld verticaal en ondersteunt het regeleinden.

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

De eigenschap multiline schakelt de meerregelige modus in, numberOfLines stelt de initiële hoogte in regels in. textAlignVertical: 'top' lijnt de tekst uit aan de bovenrand (standaard centreert Android de tekst verticaal in een meerregelige TextInput).

Voorbeeld 2: veld met telefoonnummerformattering

Voor het invoeren van een telefoonnummer is vaak realtime formattering vereist. Door onChangeText te combineren met reguliere expressies, kan een invoermasker worden geïmplementeerd.

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

De functie formatPhone verwijdert alle niet-numerieke tekens en formatteert het nummer in een standaard internationaal formaat. keyboardType: 'phone-pad' toont het telefoontoetsenbord. Deze aanpak verbetert de UX voor het invoeren van telefoonnummers en voorkomt formatteringsfouten.