2.3.9 Nested Views Codehs [repack] -

This public link is valid for 7 days and shares a thread, including any personal information you added. This link or copies made by others cannot be deleted. If you share with third parties, their policies apply. Can’t copy the link right now. Try again later.

Need more help? Check your CodeHS discussion forum or review the "Graphics and Events" section of your textbook. Happy coding!

// Child: Bio var bio = new Text("Loves nested views"); bio.setPosition(100, 145); bio.setFont("10pt Arial"); bio.setTextAlign("center");

Inside the top-level View , add another View . This will be the first of the three nested views:

Before writing any code, you must understand the two architectural pillars of this exercise: and Grid Coordinate Systems . Object Composition (HAS-A Relationship) 2.3.9 nested views codehs

In React Native, user interfaces are built using components. The View component is the most fundamental building block, acting as a container that supports layout with Flexbox, styling, and touch handling. refer to the practice of placing View components inside other View components, creating a parent-child relationship within the interface hierarchy.

The CodeHS "2.3.9 Nested Views" exercise teaches Flexbox layout by nesting child views within parent containers to create structured, responsive React Native interfaces. Key techniques include using flexDirection for alignment and flex values to define proportional sizing for complex layouts. For more information, visit the CodeHS website.

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.

The 2.3.9 Nested Views exercise is part of a larger unit in the CodeHS course, which focuses on teaching React Native. React Native is a powerful JavaScript framework developed by Facebook that allows you to build native mobile applications for both iOS and Android using a single codebase. In this exercise, you are tasked with using multiple View components inside one another to create a structured layout. This public link is valid for 7 days

Many CodeHS graphics libraries do automatically offset child coordinates. If you set avatar.setPosition(10, 10) and the parent is at (100, 100) , the avatar might appear at (10, 10) on the screen (overlapping the parent's corner) or at (110, 110) .

export default function App() return ( <View style=styles.container> /* Inner Views will go here */ </View> );

To complete Exercise 2.3.9 successfully, you must master the three main styling rules that govern nested views: 1. flexDirection Determines the primary axis of the layout.

: Place secondary View components inside the parent. For exercise 2.3.9, the instructions often require creating a "box within a box" effect. Can’t copy the link right now

Here are a few pitfalls students commonly encounter in this exercise:

If a nested view completely disappears, check its height and width. If the parent view doesn't have a fixed size or a defined flex property, it may shrink to 0 pixels, hiding all nested children.

If you wanted to build a screen that looks like this: