Skip to content
Launchpad

Lesson 03 · Cross-platform Mobile with React Native

Cross-platform: Styling & Layout with Flexbox

Lay out native screens with StyleSheet, flexbox and density-independent numbers, adapt to screen sizes, and respect notches, keyboards and dark mode.

45 minintermediateCross-platform Mobile Specialization

Prerequisites: Cross-platform: The Expo Workflow & Device Testing

Learning objectives
By the end of this lesson, you will be able to:
  • Style components with StyleSheet.create and density-independent numbers
  • Lay out screens with flexbox: flexDirection, justifyContent, alignItems, flex and gap
  • Adapt layouts to screen size with useWindowDimensions
  • Handle notches and keyboards with SafeAreaView and KeyboardAvoidingView
  • Build dark-mode-aware themes with useColorScheme