: Each View must have a different size and a different color .
When you first start learning to build mobile apps, the journey begins with a single, fundamental building block: the View . In CodeHS's Mobile Apps curriculum, is a pivotal exercise. It builds on earlier lessons about components and stylesheets, introducing you to the core structure of almost every mobile app user interface you'll ever encounter. This guide provides a deep dive into what nested views are, why they are so important, and how to successfully complete the 2.3.9 exercise on CodeHS. 2.3.9 nested views codehs
import React from 'react' ; import View, StyleSheet from 'react-native' ; export default function App() return ( // Parent View < View style=styles.container> /* Nested (Child) View */ < View style=styles.box /> ); const styles = StyleSheet.create( container: flex: 1 , backgroundColor: 'lightblue' , justifyContent: 'center' , // Centers child vertically alignItems: 'center' , // Centers child horizontally , box: width: 100 , height: 100 , backgroundColor: 'red' , , ); Use code with caution. Copied to clipboard Troubleshooting Tips : Each View must have a different size and a different color
Remember that changing the flexDirection flips the axes. When flexDirection: 'row' is applied, justifyContent controls horizontal alignment, and alignItems controls vertical alignment. It builds on earlier lessons about components and
Sometimes, the exercise requires you to replicate a specific image output—often a "Profile Card" or a "Media Player" interface.
Finally, add the fully assembled parent view to the main tab.
Feedback