2.3.9 Nested Views Codehs -

Always end with main.add(parentView); .

If your child text or shapes disappear, ensure the parent view has a specified flex value, width , or height . A parent with a height of 0 will hide its children.

While working through CodeHS 2.3.9, you might run into layout glitches. Keep these troubleshooting tips handy: 2.3.9 nested views codehs

By completing this exercise, students should be able to:

[ Parent View (Container) ] ├── [ Child View 1: Text ] └── [ Child View 2: Image ] The Parent-Child Relationship

You will use a StyleSheet to define the colors and sizes of your nested elements. javascript While working through CodeHS 2

Before we jump into the code, let's briefly cover the platform. CodeHS is a comprehensive online learning platform designed to teach computer science and programming to schools and individual learners. It combines a structured curriculum, a powerful online Integrated Development Environment (IDE), and classroom management tools all in one place. The platform is particularly effective for high school students, offering courses ranging from introductory programming to specialized topics like cybersecurity and, crucially for us, mobile app development.

// Child 2: Username Label var userName = new Text("CodeHS_User"); userName.setPosition(100, 110); // Centered below avatar userName.setColor("black"); userName.setFont("16pt Arial"); userName.setTextAlign("center");

Each View component must have an opening and closing tag, and it must be imported from the react-native library at the top of your program. CodeHS is a comprehensive online learning platform designed

A occurs when you place one component inside another component.

// 4. Nested Child 2: Content Box var content = new Rectangle(260, 280); content.setColor("#FFFFFF"); content.setBorderWidth(1); content.setBorderColor("#CCCCCC"); content.setPosition(parent.getX() + 20, parent.getY() + 90); add(content);

Now, add a larger content view below the header.

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

// Parent View: The profile card container var profileCard = new Rectangle(200, 250); profileCard.setPosition(100, 100); // Position on the main screen profileCard.setColor("lightgray"); profileCard.setBorderWidth(2); profileCard.setBorderColor("black");