If a parent component has a fixed size but the child has a style of flex: 1 without explicit dimensions, the child might collapse to 0 height or width.
Distributes items with equal space around each item. 3. alignItems
If you are working on a specific layout for this challenge, let me know are required or what color patterns you need to follow. Mobile Apps - Outline - CodeHS 2.3.9 nested views codehs
The CodeHS introduces foundational UI/UX concepts using React Native. Within this curriculum, Exercise 2.3.9: Nested Views is a key milestone for mastering component layout, Flexbox properties, and nested hierarchies. Core Concepts of Nested Views
import React from 'react'; import { StyleSheet, View } from 'react-native'; export default function App() { return ( // Root Container {/* Outer Box (Parent) */} {/* Inner Box 1 (Child) */} {/* Nested Grandchild */} {/* Inner Box 2 (Child) */} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, outerBox: { width: 300, height: 300, backgroundColor: '#2ecc71', // Emerald Green flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', }, innerBoxOne: { width: 100, height: 100, backgroundColor: '#3498db', // Blue justifyContent: 'center', alignItems: 'center', }, innerBoxTwo: { width: 100, height: 100, backgroundColor: '#e74c3c', // Red }, grandChildBox: { width: 40, height: 40, backgroundColor: '#f1c40f', // Yellow }, }); Use code with caution. Step-by-Step Implementation Breakdown If a parent component has a fixed size
Sits inside the parent. Its size can be determined by absolute dimensions (e.g., width and height in pixels) or relative flex values. Flexbox Rules in React Native
Aligns items to the start or end edge. Code Structure for Exercise 2.3.9 alignItems If you are working on a specific
Remember that changing the flexDirection flips the axes. When flexDirection: 'row' is applied, justifyContent controls horizontal alignment, and alignItems controls vertical alignment.