2.3.9 Nested Views Codehs !new!

: Apply the container style and set justifyContent: 'center' and alignItems: 'center' to center the child. Child View : Place a second tag inside the first one. javascript

// Add the main view to the screen add(mainView);

// Create a nested view var nestedView = new View(50, 50, 300, 300); nestedView.setBackground("gray");

The flex property determines how much space a view takes up relative to its siblings. If the outer view has flex: 1 , it takes up the full screen. 2.3.9 nested views codehs

occur when you place one container inside another.

The goal is to understand how a "Parent" View controls the layout of its "Child" components. By nesting views, you can divide a screen into distinct sections (like rows or columns) and then further divide those sections into smaller elements. Step-by-Step Implementation Guide Understand the Hierarchy

, the inner one is the child. Its position (0,0) starts at the top-left corner of the parent, not the screen. : To center the inner box, use alignItems: 'center' justifyContent: 'center' View style. Dimensions : Ensure the inner View has smaller : Apply the container style and set justifyContent:

course that teaches how to create complex layouts by placing components inside other components using React Native Core Objective

Whether you are building a profile card, a product tile, or a dashboard, mastering nested views will allow you to position text, images, and buttons exactly where you want them. What Are Nested Views?

import React from 'react'; import StyleSheet, Text, View from 'react-native'; export default function App() return ( // Outer View: Acts as the main container for the entire screen /* Top Nested View: Takes up a portion of the top screen */ Welcome to Nested Views /* Middle Nested View: Uses a Row layout to place items side-by-side */ Left Side Right Side /* Bottom Nested View: Acts as a footer */ CodeHS Exercise 2.3.9 Completed ); // Styling definitions for the nested components const styles = StyleSheet.create( mainContainer: flex: 1, backgroundColor: '#f4f4f9', flexDirection: 'column', // Stacks the top, middle, and bottom sections vertically , topSection: flex: 1, backgroundColor: '#4a90e2', justifyContent: 'center', alignItems: 'center', , middleSectionRow: flex: 2, // Takes up double the space of the top/bottom sections flexDirection: 'row', // Align inner boxes horizontally , leftBox: flex: 1, backgroundColor: '#50e3c2', justifyContent: 'center', alignItems: 'center', , rightBox: flex: 1, backgroundColor: '#b8e986', justifyContent: 'center', alignItems: 'center', , bottomSection: flex: 1, backgroundColor: '#4a4a4a', justifyContent: 'center', alignItems: 'center', , headerText: color: '#fff', fontSize: 22, fontWeight: 'bold', , boxText: color: '#333', fontSize: 18, , footerText: color: '#fff', fontSize: 14, , ); Use code with caution. Common Mistakes & How to Debug Them If the outer view has flex: 1 , it takes up the full screen

In UI design frameworks (like React Native, which powers much of the CodeHS mobile curriculum), a is the fundamental building block of a user interface. It acts as a container that holds text, images, buttons, or even other views.

When submitting your code to the CodeHS autograder for 2.3.9, you might run into errors. Here is how to fix the most common pitfalls: 1. The Screen is Completely Blank

// Add the inner view to the nested view nestedView.add(innerView);

Nested views can be used in a variety of scenarios, such as: