2.3.9 Nested Views Codehs |verified|

To successfully complete the challenge, you typically need to build a specific visual pattern using multiple tags.

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

It keeps related elements together. For example, grouping a user avatar image and a username text box inside a single "Profile Header" view. 2.3.9 nested views codehs

Here is how the XML hierarchy works conceptually:

When creating a nested layout (like a row of icons), you usually don't want that row to take up the whole screen. To successfully complete the challenge, you typically need

In the Mobile Apps course on , exercise 2.3.9: Nested Views focuses on using React Native to arrange components within one another to create complex layouts. Exercise Overview

You should now feel confident in your ability to: Here is how the XML hierarchy works conceptually:

import React from 'react'; import StyleSheet, View from 'react-native'; export default function App() return ( // Root Container /* Outer Box (Parent) */ /* Inner Box 1 (Child) */ /* Nested Grandchild */ /* Inner Box 2 (Child) */ ); const styles = StyleSheet.create( container: flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', , outerBox: width: 300, height: 300, backgroundColor: '#2ecc71', // Emerald Green flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', , innerBoxOne: width: 100, height: 100, backgroundColor: '#3498db', // Blue justifyContent: 'center', alignItems: 'center', , innerBoxTwo: width: 100, height: 100, backgroundColor: '#e74c3c', // Red , grandChildBox: width: 40, height: 40, backgroundColor: '#f1c40f', // Yellow , ); Use code with caution. Step-by-Step Implementation Breakdown