Handling User Input

Let's think about this for a moment

TextInput is the component for entering text (similar to HTML's <input>) — pairing the value prop with the onChangeText callback via useState makes it a controlled input (state updates on every keystroke). Button is a basic built-in component, but its styling is limited — for custom designs, it's common to build with TouchableOpacity/Pressable combined with View+Text.

Let's connect this to a real scenario

To build a login form, you need two TextInputs for username/password and one submit button — adding secureTextEntry={true} to the password field masks it as dots (••••). Using TouchableOpacity instead of Button lets you set a custom color/border/padding — Button only uses the platform's default style, which makes it hard to customize.

TextInput + useState = the controlled input pattern
secureTextEntry = masking the password field
TouchableOpacity = a customizable button (more style flexibility than Button)

Code Example

javascript

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

export default function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.form}>
      <TextInput
        style={styles.input}
        placeholder="Username"
        value={username}
        onChangeText={setUsername}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      <TouchableOpacity style={styles.button} onPress={() => console.log(username)}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  form: { padding: 16 },
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, marginBottom: 12 },
  button: { backgroundColor: '#3b82f6', padding: 14, borderRadius: 8, alignItems: 'center' },
  buttonText: { color: 'white', fontWeight: '600' },
});

You should see

On the login form, you can type a username/password, and pressing the Login button prints the username to the console.

5-Minute Try-It

Build a login form yourself — include 2 TextInputs (username, password) and one TouchableOpacity button.

A Quick Heads-Up

Don't assume that adding secureTextEntry to a password TextInput makes the password 'secure' — it's only visual masking; actual transmission/storage security needs to be handled separately on the backend.