2.3.9 Nested Views Codehs Jun 2026

This is a reconstructed example to illustrate the concept. The actual "Nested Views" exercise on CodeHS will have its own specific requirements. To see the exact instructions and a sample solution, always refer to the Problem Guides in your teacher's CodeHS account.

var mainGroup = new Group(); var innerGroup = new Group();

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.

The exercise will provide you with a basic App.js file. Your task will be to modify the code within the render() function to create a specific nested View structure. You will probably need to: 2.3.9 nested views codehs

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', , );

Inside the parent, add another . Give this child a specific height and width (e.g., 200x200 ) and a second color. Use justifyContent and alignItems on the parent to center this view.

// WRONG headerView: flex: 1 bodyView: flex: 3 // CORRECT headerView: flex: 1, , bodyView: flex: 3, Use code with caution. 3. Miscalculating Flex Ratios This is a reconstructed example to illustrate the concept

Remember that styling properties are not automatically inherited by child views. If you want a nested view to center its internal items, you must explicitly add justifyContent: 'center' and alignItems: 'center' directly to that nested view's style object.

Finally, place your text, buttons, or images inside the innermost nested views. Visualizing the Code Structure

In CodeHS, a view is a rectangular region on the screen that can contain other views or be used to display graphics, text, or other visual elements. var mainGroup = new Group(); var innerGroup =

By placing views inside other views, developers gain precise control over alignment, spacing, and grouping. What is a Nested View?

// Nesting happens here profileCard.add(avatar); profileCard.add(userName); profileCard.add(followButton); profileCard.add(buttonText);

Look out for case-sensitivity issues. In React Native's Flexbox system, values are passed as strings (e.g., 'row' , not row ).

Now that you have a working solution, let's break down the core ideas: