flexDirection: 'row' : Aligns nested child views left-to-right. 3. Alignment and Justification
Instead of generic div1 , div2 , use names that describe purpose: navBar , articleCard , formGroup .
Determines the primary axis of the layout. row aligns items horizontally, while column aligns them vertically.
: Start with a main that encompasses everything. Use the styles.container typically provided in the CodeHS Mobile Apps documentation. 2.3.9 nested views codehs
This structure creates a clear hierarchy of three nested boxes, each centered inside the parent. The final output will be three concentric squares, displaying "Level 1", "Level 2", and "Level 3" text labels.
main.add(profileCard);
You can nest multiple layers deep (e.g., a View inside a View, inside another View) to create complex grids or navigation bars. 💻 Step-by-Step Implementation Example Determines the primary axis of the layout
The flex property dictates how much available space a view should occupy relative to its siblings.
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.
Before building the UI, plan your StyleSheet . You will need different styles for the outer container, the middle section, and the inner elements. For the exercise, you will likely need a container that fills the screen ( flex: 1 ). Use the styles
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.
Think of nested views like boxes within boxes. If you move the outer box, all the smaller boxes inside move with it. This is essential for keeping your app layout intact across different screen sizes. 🛠️ Core Code Structure
Here is a good review of the assignment, breaking down why it is effective, the challenges it presents, and the concepts it reinforces.
The main View acts as the workspace. Without a container, your nested views will have no boundaries. javascript
This is where nesting becomes critical. Notice how the coordinates of the child views are (assuming the library supports relative positioning with add ). If the library requires absolute coordinates, you must offset them.