PricingLoginStart free
React Native Academy · Les

De basis van TextInput en toetsenbordtypen

Geef een TextInput weer, koppel deze met onChangeText aan de status, configureer het toetsenbordtype voor e-mail- of numerieke invoer en verwerk de gebeurtenis van de Return-toets.

Les 1 van 413 stappen

De basis van TextInput en toetsenbordtypen is een gratis React Native Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.

De TextInput-component

TextInput is de React Native-component voor het vastleggen van toetsenbordinvoer van gebruikers. Deze wordt op zowel iOS als Android weergegeven als een native tekstveld, waardoor gebruikers de native type-ervaring van het platform krijgen, inclusief autocorrectie, voorspellende tekst en sneltoetsen van het systeemtoetsenbord. Importeer de component uit react-native en gebruik deze voor elke invoer waarvoor een toetsenbord nodig is: zoekvelden, inlogformulieren, instellingenvelden en velden voor chatberichten. Zonder stijlen heeft TextInput op iOS geen zichtbare rand — geef de component altijd stijlen, zodat gebruikers deze kunnen zien.

import { TextInput, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function BasicInput() {
  const [text, setText] = useState('');

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder='Type something here...'
        style={styles.input}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 10,
    paddingHorizontal: 14,
    paddingVertical: 12,
    fontSize: 16,
    backgroundColor: '#fff',
  },
});

onChangeText versus onChange

De callback onChangeText is de meest gebruikelijke manier om op tekstinvoer te reageren. Deze ontvangt de nieuwe tekenreeks rechtstreeks als argument, waardoor je deze eenvoudig kunt doorgeven aan een setter van useState: onChangeText={setText}. De callback onChange op een lager niveau ontvangt een volledig eventobject (event.nativeEvent.text) — handig wanneer je ook andere metagegevens van het event nodig hebt, zoals de cursorpositie. Voor de meeste toepassingen is onChangeText eenvoudiger en heeft deze de voorkeur. Gebruik onChange alleen wanneer je de details van het native event nodig hebt.

import { TextInput } from 'react-native';
import { useState } from 'react';

function TextInputExample() {
  const [text, setText] = useState('');

  return (
    <>
      {/* Simple: receives the string directly */}
      <TextInput
        onChangeText={(newText) => setText(newText)}
        // shorthand equivalent:
        // onChangeText={setText}
      />

      {/* Advanced: receives the full event object */}
      <TextInput
        onChange={(event) => {
          console.log('text:', event.nativeEvent.text);
          console.log('selection:', event.nativeEvent.selection);
        }}
      />
    </>
  );
}

Toetsenbordtypen voor verschillende invoer

De prop keyboardType bepaalt welke toetsenbordvariant het besturingssysteem weergeeft. Voor numerieke invoer toont 'numeric' een numeriek toetsenblok. Voor e-mailadressen bevat 'email-address' de toetsen @ en . prominent. 'phone-pad' toont de indeling van een telefoonkiezer. 'decimal-pad' lijkt op numeric, maar bevat ook een decimaalteken. 'url' toont sneltoetsen voor / en .com. Het juiste toetsenbordtype verbetert het gebruiksgemak: er zijn minder toetsaanslagen nodig om gegevens in te voeren en gebruikers kunnen geen ongeldige tekens typen.

import { View, TextInput, Text, StyleSheet } from 'react-native';

export default function KeyboardTypesDemo() {
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <TextInput style={styles.input} keyboardType='default' placeholder='Default text' />
      <TextInput style={styles.input} keyboardType='email-address' placeholder='email@example.com' />
      <TextInput style={styles.input} keyboardType='numeric' placeholder='Enter a number' />
      <TextInput style={styles.input} keyboardType='phone-pad' placeholder='Phone number' />
      <TextInput style={styles.input} keyboardType='decimal-pad' placeholder='Price (0.00)' />
      <TextInput style={styles.input} keyboardType='url' placeholder='https://...' />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16, backgroundColor: '#fff' },
});

Beveiligde tekstinvoer voor wachtwoorden

Stel voor wachtwoordvelden secureTextEntry={true} in om de getypte tekens te verbergen met bolletjes. Dit is essentieel voor elk veld met gevoelige gegevens — wachtwoorden, pincodes en beveiligingscodes. Je kunt een schakelaar voor het tonen en verbergen van het wachtwoord toevoegen door een booleaanse showPassword in de state te beheren en secureTextEntry om te schakelen. Stel bij wachtwoordvelden ook autoCapitalize='none' en autoCorrect={false} in — je wilt niet dat autocorrectie of hoofdletters het wachtwoord van de gebruiker tijdens het typen veranderen.

import { TextInput, TouchableOpacity, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function PasswordInput() {
  const [password, setPassword] = useState('');
  const [visible, setVisible] = useState(false);

  return (
    <View style={styles.wrapper}>
      <TextInput
        value={password}
        onChangeText={setPassword}
        secureTextEntry={!visible}
        autoCapitalize='none'
        autoCorrect={false}
        placeholder='Password'
        style={styles.input}
      />
      <TouchableOpacity
        style={styles.toggle}
        onPress={() => setVisible(v => !v)}
      >
        <Text style={{ fontSize: 18 }}>{visible ? '🙈' : '👁'}</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: '#ccc', borderRadius: 10, paddingHorizontal: 14 },
  input: { flex: 1, paddingVertical: 12, fontSize: 16 },
  toggle: { paddingLeft: 8 },
});

autoCapitalize en autoCorrect

autoCapitalize bepaalt wanneer het besturingssysteem de eerste letter met een hoofdletter schrijft. Mogelijke waarden zijn: 'none' (nooit hoofdletters gebruiken), 'sentences' (de eerste letter van elke zin, standaard), 'words' (de eerste letter van elk woord) en 'characters' (elk teken). Gebruik 'none' voor gebruikersnamen, e-mailadressen en wachtwoorden. Gebruik 'words' voor naamvelden. Met autoCorrect={false} schakel je autocorrectie volledig uit. Dit is essentieel voor gebruikersnamen, technische termen en elk veld waarin de gebruiker precies weet wat die typt.

import { View, TextInput, StyleSheet } from 'react-native';

export default function FormInputs() {
  return (
    <View style={{ padding: 16, gap: 12 }}>
      {/* Name: capitalize each word, allow autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='Full name'
        autoCapitalize='words'
        autoCorrect={true}
      />
      {/* Username: no caps, no autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='@username'
        autoCapitalize='none'
        autoCorrect={false}
      />
      {/* Email: no caps, no autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='Email address'
        keyboardType='email-address'
        autoCapitalize='none'
        autoCorrect={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

returnKeyType en onSubmitEditing

De prop returnKeyType wijzigt het label op de Return-toets van het toetsenbord: 'done', 'go', 'next', 'search' en 'send'. Gebruik 'next' om aan te geven dat Return naar het volgende veld gaat. De callback onSubmitEditing wordt uitgevoerd wanneer de gebruiker op Return drukt. Combineer returnKeyType='next' met onSubmitEditing om het volgende TextInput programmatisch te focussen met een ref — zo ontstaat een soepele navigatie tussen formuliervelden, vergelijkbaar met Tab, die gebruikers op mobiele apparaten verwachten.

import { View, TextInput, StyleSheet, useRef } from 'react-native';

export default function MultiFieldForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  return (
    <View style={{ padding: 16, gap: 12 }}>
      <TextInput
        ref={emailRef}
        style={styles.input}
        placeholder='Email'
        keyboardType='email-address'
        returnKeyType='next'
        onSubmitEditing={() => passwordRef.current?.focus()}
      />
      <TextInput
        ref={passwordRef}
        style={styles.input}
        placeholder='Password'
        secureTextEntry
        returnKeyType='done'
        onSubmitEditing={() => console.log('Form submitted!')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

TextInput over meerdere regels

Voeg voor tekst over meerdere regels, zoals een biografie, bericht of opmerking, de prop multiline toe. De TextInput wordt groter wanneer de gebruiker nieuwe regels typt en ondersteunt regeleinden. Gebruik op Android numberOfLines om de beginhoogte in te stellen (op iOS wordt de hoogte automatisch aangepast). De stijl textAlignVertical: 'top' (alleen Android) voorkomt dat tekst in het verticale midden van het invoervak begint. Op iOS worden invoervelden met meerdere regels automatisch groter zodat de inhoud past wanneer er geen expliciete hoogte is ingesteld. Combineer maxLength met een teken­teller voor velden waarin gebruikers berichten opstellen.

import { TextInput, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function BioInput() {
  const [bio, setBio] = useState('');
  const MAX_LENGTH = 200;

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={bio}
        onChangeText={setBio}
        placeholder='Tell us about yourself...'
        multiline
        numberOfLines={4}     // Android: initial height
        maxLength={MAX_LENGTH}
        style={styles.input}
        textAlignVertical='top' // Android: align text to top
      />
      <Text style={styles.counter}>
        {bio.length}/{MAX_LENGTH}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 12, fontSize: 15, minHeight: 100 },
  counter: { textAlign: 'right', color: '#999', fontSize: 12, marginTop: 4 },
});

Focus, blur en onFocus-/onBlur-gebeurtenissen

TextInput activeert onFocus wanneer de gebruiker erop tikt (het toetsenbord verschijnt) en onBlur wanneer de gebruiker ergens anders tikt (het toetsenbord verdwijnt). Gebruik deze gebeurtenissen om hulptekst te tonen of te verbergen, de randkleur te wijzigen om de actieve status aan te geven of validatie op veldniveau te starten. Een veelgebruikt patroon is om een veld pas te valideren nadat de gebruiker het heeft verlaten (bij blur), en niet terwijl die nog typt. Zo voorkom je dat foutmeldingen verschijnen voordat de gebruiker klaar is met typen. Houd met een statevariabele bij welk veld de focus heeft als je meerdere invoervelden op basis van hun focus anders wilt opmaken.

import { TextInput, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function FocusableInput({ placeholder, onBlurValidate }) {
  const [focused, setFocused] = useState(false);
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  function handleBlur() {
    setFocused(false);
    const err = onBlurValidate ? onBlurValidate(value) : '';
    setError(err);
  }

  return (
    <View>
      <TextInput
        value={value}
        onChangeText={setValue}
        onFocus={() => setFocused(true)}
        onBlur={handleBlur}
        placeholder={placeholder}
        style={[
          styles.input,
          focused && styles.focused,
          error && styles.error,
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1.5, borderColor: '#ddd', borderRadius: 10, padding: 12, fontSize: 16 },
  focused: { borderColor: '#4f86f7', shadowColor: '#4f86f7', shadowOpacity: 0.2, shadowRadius: 4, shadowOffset: { width: 0, height: 2 } },
  error: { borderColor: '#e74c3c' },
});

Het toetsenbord verbergen

Op mobiele apparaten verdwijnt het toetsenbord niet automatisch wanneer gebruikers buiten een TextInput tikken. Gebruik Keyboard.dismiss() uit react-native om het programmatisch te verbergen. Plaats de inhoud van je scherm in een TouchableWithoutFeedback die bij een druk op Keyboard.dismiss() aanroept, zodat het toetsenbord verdwijnt wanneer je ergens buiten het toetsenbord tikt. Je kunt ook de prop keyboardDismissMode op ScrollView gebruiken: 'on-drag' verbergt het toetsenbord zodra de gebruiker begint te scrollen. Dit zorgt voor een prettige mobiele gebruikerservaring.

import { TouchableWithoutFeedback, Keyboard, ScrollView, TextInput, StyleSheet, View } from 'react-native';

export default function DismissibleForm() {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <ScrollView
        style={{ flex: 1 }}
        keyboardDismissMode='on-drag'  // dismiss on scroll
        keyboardShouldPersistTaps='handled'
      >
        <View style={{ padding: 16, gap: 12 }}>
          <TextInput style={styles.input} placeholder='Name' />
          <TextInput style={styles.input} placeholder='Email' keyboardType='email-address' />
          <TextInput style={styles.input} placeholder='Message' multiline numberOfLines={4} textAlignVertical='top' />
        </View>
      </ScrollView>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

KeyboardAvoidingView

Wanneer het toetsenbord verschijnt, bedekt het de onderkant van het scherm en kan het tekstvelden in formulieren verbergen. Plaats je scherm in een KeyboardAvoidingView om de inhoud automatisch omhoog te schuiven wanneer het toetsenbord wordt geopend. Stel op iOS behavior='padding' in en op Android behavior='height' (gebruik Platform.OS om de juiste waarde te kiezen). Combineer dit met keyboardVerticalOffset om rekening te houden met de hoogte van de kop. Voor schermen met veel invoervelden geeft de combinatie van KeyboardAvoidingView en een ingebedde ScrollView de beste ervaring.

import { KeyboardAvoidingView, Platform, ScrollView, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

export default function LoginScreen() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={60} // adjust for header height
    >
      <ScrollView contentContainerStyle={styles.form}>
        <TextInput style={styles.input} placeholder='Email' keyboardType='email-address' />
        <TextInput style={styles.input} placeholder='Password' secureTextEntry />
        <TouchableOpacity style={styles.btn}>
          <Text style={styles.btnText}>Log In</Text>
        </TouchableOpacity>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  form: { padding: 24, gap: 16, flexGrow: 1, justifyContent: 'center' },
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 14, fontSize: 16 },
  btn: { backgroundColor: '#4f86f7', padding: 16, borderRadius: 10, alignItems: 'center' },
  btnText: { color: '#fff', fontWeight: 'bold', fontSize: 16 },
});

Invoermaskers voor opgemaakte waarden

Sommige invoervelden hebben tijdens het typen een opgemaakte weergave nodig, zoals creditcardnummers met een spatie na elke vier cijfers, telefoonnummers met streepjes of datums in de notatie DD/MM/JJJJ. Implementeer dit in de handler onChangeText: verwijder opmaaktekens uit de onbewerkte invoer, pas de opmaak toe en sla de opgemaakte tekenreeks op in de state. De TextInput toont de opgemaakte waarde (uit de state), maar voor het verzenden sla je de onbewerkte cijfers afzonderlijk op. Bibliotheken zoals react-native-mask-input bieden een kant-en-klare TextInput met invoermasker die veelgebruikte patronen automatisch afhandelt.

import { TextInput } from 'react-native';
import { useState } from 'react';

// Manual phone number formatting: (555) 123-4567
export default function PhoneInput({ onPhoneChange }) {
  const [display, setDisplay] = useState('');

  function formatPhone(raw) {
    const digits = raw.replace(/\D/g, '').slice(0, 10); // digits only, max 10
    let formatted = digits;
    if (digits.length > 6) {
      formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3,6) + '-' + digits.slice(6);
    } else if (digits.length > 3) {
      formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3);
    } else if (digits.length > 0) {
      formatted = '(' + digits;
    }
    setDisplay(formatted);
    onPhoneChange(digits); // pass raw digits to parent
  }

  return (
    <TextInput
      value={display}
      onChangeText={formatPhone}
      keyboardType='phone-pad'
      placeholder='(555) 123-4567'
      style={{ borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 }}
    />
  );
}

Korte controle

Test je begrip van de concepten uit deze les over mobiele ontwikkeling met React Native.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd dat keyboardType het juiste toetsenbord voor het gegevenstype toont, dat returnKeyType met refs navigatie tussen formuliervelden zoals met Tab mogelijk maakt en dat KeyboardAvoidingView voorkomt dat het toetsenbord invoervelden onderaan het scherm bedekt. Vervolgens bekijken we hoe je tikfeedback toevoegt met TouchableOpacity en Pressable.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
30
Lessen
120
Gratis beginnen met lerenBekijk de volledige cursus

Veelgestelde vragen

Is de les “De basis van TextInput en toetsenbordtypen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “De basis van TextInput en toetsenbordtypen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.

Wat leer ik in “De basis van TextInput en toetsenbordtypen”?

Geef een TextInput weer, koppel deze met onChangeText aan de status, configureer het toetsenbordtype voor e-mail- of numerieke invoer en verwerk de gebeurtenis van de Return-toets. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Native Academy te beginnen?

Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “De basis van TextInput en toetsenbordtypen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Native Academy?

Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. De basis van TextInput en toetsenbordtypen
  2. Tap-handlers met TouchableOpacity en Pressable
  3. Schakelaars, switches en selectievakjes
  4. Een eenvoudig loginformulier bouwen
← Terug naar React Native Academy