Text Input Component in React Native

TextInput is React Native's text input field – the counterpart to HTML's <input>/<textarea>, with a few mobile-specific extra props.

1. Description

React Native has no separate <input> types like the web – TextInput covers everything, controlled via props like secureTextEntry (password), keyboardType (which on-screen keyboard), and multiline (multi-line, equivalent to <textarea>).

2. Short example

const [value, setValue] = useState('');

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

3. Complete project: a simple contact form

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 [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  function submit() {
    Alert.alert('Sent', `Thanks, ${name}! We'll get back to you at ${email}.`);
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Name"
        value={name}
        onChangeText={setName}
      />
      <TextInput
        style={styles.input}
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      <TextInput
        style={[styles.input, styles.multiline]}
        placeholder="Your message..."
        multiline
        numberOfLines={4}
        value={message}
        onChangeText={setMessage}
      />
      <Button title="Submit" onPress={submit} />
    </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 },
  multiline: { height: 100, textAlignVertical: 'top' },
});

4. Explanation

value + onChangeText – makes the field "controlled": the value comes from React state, every keystroke flows right back.
keyboardType="email-address" – shows a keyboard with the @ symbol readily available.
autoCapitalize="none" – prevents automatic capitalization of the first letter (unwanted for email addresses).
secureTextEntry – masks the input with dots, like type="password" on the web.
multiline + numberOfLines={{4}} – allows line breaks, equivalent to a <textarea>; textAlignVertical: 'top' makes the text start at the top instead of vertically centered (Android-only concern, iOS does this automatically).

5. Outputs

Ausgabe

Four stacked input fields (name, email with @ keyboard, password with masked dots, multi-line message) and a "Submit" button below them. After filling them out and tapping it, an alert appears with the entered name and email address.