2.3.9 Nested Views Codehs -

Create a main view (parent). Inside it, create two or three smaller views (children). Each child view should have its own background color and border. Add a text label inside one of the child views. The layout should resemble a dashboard or a settings screen.

import StyleSheet from 'react-native';

Nearly every mobile app screen you use is built from nested Views:

Inside the return statement, create the main container View : 2.3.9 nested views codehs

To create grids, sidebars, or card layouts, you cannot rely on a single, flat flex container.

CodeHS Exercise 2.3.9, "Nested Views," teaches React Native layout design by placing child components inside parent containers to manage complex UI structures. It demonstrates using flexDirection justifyContent alignItems Add a text label inside one of the child views

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

Demonstrates the deepest level of nesting. It inherits its layout behavior directly from its parent ( innerBoxOne ). Common Pitfalls and How to Fix Them CodeHS Exercise 2

export const styles = StyleSheet.create( container: flex: 1, justifyContent: 'center', alignItems: 'center', , viewOne: width: 250, height: 250, backgroundColor: 'powderblue', justifyContent: 'center', // To center the inner View alignItems: 'center', , viewTwo: width: 150, height: 150, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center', , viewThree: width: 75, height: 75, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center', , );