2.3.9 Nested Views Codehs [cracked] May 2026

Remember that changing the flexDirection flips the axes. When flexDirection: 'row' is applied, justifyContent controls horizontal alignment, and alignItems controls vertical alignment.

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

The nested view exercise typically requires creating a multi-colored, nested block structure. The code below demonstrates the typical pattern used to create a parent View that contains nested child and grandchild View containers. javascript 2.3.9 nested views codehs

Acts as the parent container for the nested blocks. It has fixed dimensions and sets flexDirection: 'row' to place the two inner boxes side-by-side.

innerBoxOne and innerBoxTwo sit directly inside the outer box. innerBoxOne is also styled as a Flexbox container ( justifyContent and alignItems ) because it holds a nested grandchild block. Remember that changing the flexDirection flips the axes

Vertically stacks items from top to bottom. row : Horizontally aligns items from left to right. 2. justifyContent Aligns child components along the primary axis. flex-start : Packs items toward the start of the axis. center : Centers items along the axis. flex-end : Packs items toward the end.

Distributes items with equal space around each item. 3. alignItems It has fixed dimensions and sets flexDirection: 'row'

Stretches children to fit the container width/height. center : Centers items along the cross axis.