: It makes your code easier to read and maintain by breaking complex screens into smaller, manageable blocks. Restatement of Result
Inside the top-level View , add another View . This will be the first of the three nested views:
Dictates how much available space a view should fill relative to its neighboring views. Code Example: Implementing Nested Views
A nested view occurs when one UI element (the child) is placed inside another UI element (the parent). 2.3.9 nested views codehs
Exercise 2.3.9 forces you to practice this relative positioning.
Giving a child view a property of flex: 1 tells it to expand and fill the available space inside its parent.
components. This is a fundamental concept for building complex UI layouts. Solution Code : It makes your code easier to read
Here are a few pitfalls students commonly encounter in this exercise:
@Component( selector: 'app-sidebar', template: '<aside>Sidebar content</aside>' ) export class SidebarComponent {} // app.component.ts import Component from '@angular/core';
As you continue your coding journey on CodeHS, remember to think in terms of boxes inside boxes. Start with a single parent container, break the screen into regions using nested View components, and then fill those regions with content. With practice and attention to Flexbox principles, you will go from struggling with the 2.3.9 exercise to building your own fully functional mobile apps in no time. Code Example: Implementing Nested Views A nested view
: Nesting simply means placing one component inside another. In React Native, any component can be nested inside a View , and View components can be nested inside each other. This creates a parent-child relationship , which is fundamental to building complex layouts. For example, a screen might have a top-level View (the parent) that contains two child View s, each of which might contain more nested components. This hierarchy is what allows you to create sophisticated, multi-layered designs.
Aligns child components along the cross axis (perpendicular to the primary axis).