Chapter 05 — Handling Touches & Input

Chapter 05 — Handling Touches & Input

Hey everyone! Welcome back to Namaste React Native!

Mobile is touch-first. There's no mouse, no hover, no onClick — instead everything is onPress. In this chapter we handle taps, build controlled text inputs, and deal with the on-screen keyboard. This is the last chapter of Season 1 — after this you can build interactive screens!

What we will cover:

• Pressable & TouchableOpacity
• onPress, onLongPress, press states
• Controlled TextInput with useState
• Handling the keyboard
• Building a small interactive form
• Interview Questions

---

1. Pressable — The Modern Button Primitive

There's no <button> with onClick. Instead, wrap anything in Pressable and give it onPress.

import { Pressable, Text } from 'react-native';

<Pressable onPress={() => console.log('Tapped!')}>
    <Text>Tap me</Text>
</Pressable>

Pressable can react to the press state — style it differently while being pressed:

<Pressable
    onPress={handlePress}
    style={({ pressed }) => [
        styles.button,
        pressed && styles.buttonPressed,   // darker while held
    ]}
>
    <Text style={styles.buttonText}>Submit</Text>
</Pressable>

---

2. The Touchable Family

Component	Effect on press	Use
Pressable	Fully customizable (modern)	Recommended default
TouchableOpacity	Fades opacity when pressed	Quick tappable feedback
Button	Native default button	Simple, non-customizable

// TouchableOpacity — dims while pressed
import { TouchableOpacity, Text } from 'react-native';

<TouchableOpacity onPress={save} activeOpacity={0.6}>
    <Text>Save</Text>
</TouchableOpacity>

---

3. Press Events

<Pressable
    onPress={() => console.log('quick tap')}
    onLongPress={() => console.log('held down')}
    onPressIn={() => console.log('finger down')}
    onPressOut={() => console.log('finger up')}
>
    <Text>Try me</Text>
</Pressable>

---

4. Controlled TextInput

Just like controlled inputs in React — but the event is onChangeText, which hands you the string directly (no e.target.value).

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

function NameField() {
    const [name, setName] = useState('');
    return (
        <TextInput
            value={name}
            onChangeText={setName}     // gives you the string directly
            placeholder="Your name"
            style={{ borderWidth: 1, padding: 10, borderRadius: 6 }}
        />
    );
}

   WEB:            onChange={e => setName(e.target.value)}
   REACT NATIVE:   onChangeText={setName}    ← cleaner!

Useful TextInput props:

keyboardType="email-address"   // or 'numeric', 'phone-pad'
secureTextEntry={true}         // password dots
autoCapitalize="none"          // for emails/usernames
multiline={true}               // multi-line text area
maxLength={100}

---

5. Handling the Keyboard

When the keyboard opens, it can cover your inputs. Wrap your form in KeyboardAvoidingView so content shifts up.

import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={{ flex: 1 }}
>
    {/* your inputs — now pushed above the keyboard */}
</KeyboardAvoidingView>

Tip: also dismiss the keyboard on tap-away using Keyboard.dismiss() inside a wrapping Pressable.

---

6. A Small Interactive Form

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

function LoginForm() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = () => {
        if (!email || !password) {
            console.log('Please fill all fields');
            return;
        }
        console.log('Logging in:', email);
    };

    return (
        <View style={styles.form}>
            <TextInput
                value={email} onChangeText={setEmail}
                placeholder="Email" keyboardType="email-address"
                autoCapitalize="none" style={styles.input}
            />
            <TextInput
                value={password} onChangeText={setPassword}
                placeholder="Password" secureTextEntry
                style={styles.input}
            />
            <Pressable onPress={handleLogin} style={styles.button}>
                <Text style={styles.buttonText}>Log In</Text>
            </Pressable>
        </View>
    );
}

const styles = StyleSheet.create({
    form:   { padding: 20, gap: 12 },
    input:  { borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 8 },
    button: { backgroundColor: '#6200ee', padding: 14, borderRadius: 8, alignItems: 'center' },
    buttonText: { color: '#fff', fontWeight: 'bold' },
});

---

Interview Questions — Quick Fire!

Q: How do you handle a button tap in React Native?

"There's no onClick — mobile is touch-based. You use onPress on a Pressable, TouchableOpacity, or Button. Pressable is the modern, flexible choice and can style itself based on the pressed state via a function style."

Q: What's the difference between Pressable and TouchableOpacity?

"TouchableOpacity gives simple feedback by fading its opacity when pressed. Pressable is newer and more flexible — it exposes press state so you can customize styling, and supports onPressIn, onPressOut, and onLongPress. Pressable is the recommended default."

Q: How do you create a controlled TextInput?

"Store the value in state and pass it as value, then update it in onChangeText, which gives you the string directly — no event.target.value like the web. That keeps the input controlled by React state."

Q: How do you stop the keyboard from covering inputs?

"Wrap the form in a KeyboardAvoidingView, using behavior 'padding' on iOS and 'height' on Android, so content shifts up when the keyboard appears. You can also dismiss the keyboard with Keyboard.dismiss() when the user taps outside."

Q: How do you show a numeric or email keyboard?

"Set the keyboardType prop on TextInput — for example 'numeric', 'email-address', or 'phone-pad'. You'd also pair email inputs with autoCapitalize='none' and passwords with secureTextEntry."

---

Quick Recap

Concept	Key Takeaway
onPress	The mobile "onClick".
Pressable	Modern, customizable, press-state aware.
onChangeText	Gives the string directly.
keyboardType/secureTextEntry	Tune the input.
KeyboardAvoidingView	Keep inputs above the keyboard.

What's Next?

That's Season 1 done — you can now build interactive screens! Season 2 starts with Chapter 06: FlatList & SectionList, the performant way to render long lists (never use .map() in a ScrollView again).

Keep coding, keep shipping! See you in the next one!