Text-Input-Komponente in React Native

TextInput ist React Natives Eingabefeld für Text – das Gegenstück zu HTMLs <input>/<textarea>, mit einigen mobil-spezifischen Zusatz-Props.

1. Beschreibung

In React Native gibt es keine getrennten <input>-Typen wie im Web – TextInput deckt alles ab, gesteuert über Props wie secureTextEntry (Passwort), keyboardType (welche Bildschirmtastatur) und multiline (mehrzeilig, entspricht <textarea>).

2. Kurzes Beispiel

const [wert, setWert] = useState('');

<TextInput value={wert} onChangeText={setWert} placeholder="Name" />

3. Komplettes Projekt: einfaches Kontaktformular

npx create-expo-app textinput-demo
cd textinput-demo

App.js

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

export default function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [passwort, setPasswort] = useState('');
  const [nachricht, setNachricht] = useState('');

  function absenden() {
    Alert.alert('Gesendet', `Danke, ${name}! Wir melden uns unter ${email}.`);
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Name"
        value={name}
        onChangeText={setName}
      />
      <TextInput
        style={styles.input}
        placeholder="E-Mail"
        keyboardType="email-address"
        autoCapitalize="none"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        style={styles.input}
        placeholder="Passwort"
        secureTextEntry
        value={passwort}
        onChangeText={setPasswort}
      />
      <TextInput
        style={[styles.input, styles.mehrzeilig]}
        placeholder="Ihre Nachricht..."
        multiline
        numberOfLines={4}
        value={nachricht}
        onChangeText={setNachricht}
      />
      <Button title="Absenden" onPress={absenden} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 20, gap: 12 },
  input: { borderWidth: 1, borderColor: '#d1d5db', borderRadius: 8, padding: 10, fontSize: 16 },
  mehrzeilig: { height: 100, textAlignVertical: 'top' },
});

4. Erklärung

value + onChangeText – macht das Feld "kontrolliert": der Wert kommt aus React-State, jede Eingabe fließt sofort zurück.
keyboardType="email-address" – zeigt eine Tastatur mit direkt verfügbarem @-Symbol.
autoCapitalize="none" – verhindert automatische Großschreibung des ersten Buchstabens (bei E-Mail-Adressen unerwünscht).
secureTextEntry – verdeckt die Eingabe mit Punkten, wie type="password" im Web.
multiline + numberOfLines={{4}} – erlaubt Zeilenumbrüche, entspricht einem <textarea>; textAlignVertical: 'top' sorgt dafür, dass der Text oben statt vertikal zentriert beginnt (nur Android-relevant, iOS macht das automatisch).

5. Ausgaben

Ausgabe

Vier untereinander angeordnete Eingabefelder (Name, E-Mail mit @-Tastatur, Passwort mit verdeckten Punkten, mehrzeilige Nachricht) und ein "Absenden"-Button darunter. Nach dem Ausfüllen und Antippen erscheint ein Alert mit dem eingegebenen Namen und der E-Mail-Adresse.