Checkpoint: Layout and Style

Question 1 of 5

• Use rem units so text scales with accessibility settings.
• Move these values into a CSS file imported at the top of the component.
• It’s fine; React Native converts CSS strings automatically.
• Use unitless numbers and longhand keys: paddingVertical: 12, paddingHorizontal: 16, fontSize: 15.

Question 2 of 5

• overflow: 'scroll' on the ScrollView.
• contentContainerStyle={{ flex: 1 }}
• flex: 1 on the parent View, so the ScrollView inherits a bounded height to scroll within.
• horizontal={false}

Question 3 of 5

• Pad the content with useSafeAreaInsets().top from react-native-safe-area-context.
• Use SafeAreaView from react-native.
• Add marginTop: 24, the height of the Android status bar.
• Hide the status bar on Android.

Question 4 of 5

• Rows expand on iOS but not on Android.
• Expanded rows collapse by themselves after scrolling far away and back.
• The app crashes when two rows are expanded.

Question 5 of 5

• Increase windowSize to keep more rows mounted.
• Wrap the FlatList in a ScrollView so it renders once.
• Replace FlatList with SectionList.
• Load small thumbnail versions of the photos for the list, ideally with a caching image component like expo-image.