Stage 2 · Lesson 5 of 10
Safe areas and screen sizes
Content must stay clear of notches, camera cut-outs, the and . The space those take up is called the insets. Use the react-native-safe-area-context library, which includes.
Wrap the app in SafeAreaProvider, then use its SafeAreaView or the useSafeAreaInsets to pad screens. The older SafeAreaView from react-native itself only works on iOS and is deprecated. useWindowDimensions gives the current width and height and updates when the phone rotates.
So you can switch a grid from two to three on wider screens. Test on the smallest supported phone, in landscape and with a large font size.
Common trapfixed heights on text containers, which clip text when the user raises the font size.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
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