Chapter 2 of 8 · 5 practices · 3 min · 3-question quiz
Components and styling
How to build screens that look right on every device: styles, pressables, window size, platform differences and images.
Start: Define styles with StyleSheet.create outside the component5 practices in this chapter
- 1Define styles with StyleSheet.create outside the componentInline style objects are created again on every render and make components hard to read. Define styles once at module scope with
StyleSheet.create, and compose them with arrays when something… - 2Use Pressable for touch targets and give it visible feedback
Pressableis the flexible, current primitive for touch handling. It exposes the pressed state, so you can style feedback yourself, and it supportshitSlopto make small icons easier to hit… - 3Read screen size with useWindowDimensions, not at module scopePhones rotate, tablets split the screen and foldables change size while your app is open. A width read once at import time with
Dimensions.get('window')goes stale and your layout breaks. - 4Keep platform differences small and explicitiOS and Android differ in navigation patterns, shadows, fonts and permissions. Handle those differences in a few clear places rather than sprinkling
Platform.OS === 'ios'checks across every screen. - 5Ship images at the size you show them and cache remote onesThe React Native list docs warn that image loading can block the JavaScript thread, and recommend cached, optimized images. Large images also cost memory, which is what gets apps killed on low-end…
Check yourself on this chapter
3 questions, right here once you are signed in. Your progress is saved as you read.