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