React Native 101: Interactivity & Navigation
4.0 Introduction
This lesson turns static screens into apps people can use: buttons, forms, lists that scale, and multiple screens with React Navigation.
Lesson 4 - Overview
- Pressable and buttons
- Forms with controlled inputs
- FlatList
- React Navigation stacks
- Passing params between screens
Project Overview
- Color Switcher — Pressable changes background color
- Todo Form — Add items to a list with TextInput
- Grocery FlatList — Efficient scrolling list
- Two-screen Navigator — Home → About
- Detail with params — Tap a list item → detail screen
Interactivity & Navigation
4.1 Pressable and buttons
Button is fine for demos; Pressable (or TouchableOpacity) gives more styling control.
Project 4.1: Color Switcher
Several Pressables that set the screen background to different colors.
Interactivity & Navigation
4.2 Forms with controlled inputs
A controlled input means React state is the source of truth:
Project 4.2: Todo Form
TextInput + Add button. Show todos below. Bonus: tap to remove.
Interactivity & Navigation
4.3 FlatList
For long lists, prefer FlatList over mapping inside ScrollView — it recycles rows.
Project 4.3: Grocery FlatList
Render a grocery array with FlatList. Style each row with padding and a bottom border.
Interactivity & Navigation
4.4 React Navigation stacks
Install (Expo):
Project 4.4: Two-screen Navigator
Home and About screens with a button to navigate.
Interactivity & Navigation
4.5 Passing params between screens
Project 4.5: Detail with params
FlatList of items. Tapping one opens a Detail screen showing that item’s title (and any other fields you pass).
Prior Lesson Next Lesson