Stage 2 of 7 · 10 lessons · ~3 months
React and React Native components
Build screens the way your platform expects: small composable pieces, layout, lists, images, forms and theming. The aim is to turn a design into a screen that looks right on a small phone and a large one.
Start: Components, props and JSXLessons· one lesson for each topic, in this order
- 1Components, props and JSXLesson
- 2Expo Go, development builds and Fast RefreshLesson
- 3View, Text, Image, Pressable and ScrollViewLesson
- 4Flexbox layoutLesson
- 5Safe areas and screen sizesLesson
- 6State with useStateLesson
- 7FlatList for long listsLesson
- 8TextInput, forms and the keyboardLesson
- 9Styling, theming and dark modeLesson
- 10Platform differences and design guidelinesOptionalLesson
Start with· follow one of these
- GuideFreeExpo Documentation
Expo
The Expo tutorial builds a small app you run on your own phone
- GuideFreeReact Documentation
Meta
"Describing the UI" and "Adding interactivity" cover the React you need
Practise
Keep handy
Before moving on: Rebuild three screens from a real app you use (a login, a list with images and a detail page) so they adapt to a small and a large phone and support dark mode.
Start with Expo, not a bare React Native project, so you build screens on day one instead of fighting Gradle and CocoaPods. Learn React components, props and state properly here; that is most of the job.