To successfully complete this exercise, you typically need to:
Apply unique background colors, borders, and padding to specific sections of a screen without affecting the entire page. Core Concepts: Flexbox in Nested Views
React Native styles use camelCase rather than standard CSS hyphens. Use backgroundColor , not background-color . Ensure all string values are wrapped in quotes (e.g., 'center' ). Best Practices for CodeHS Graded Assignments 2.3.9 nested views codehs
If your nested view doesn't appear, ensure the parent view has a size (width/height) or flex: 1 .
A simple example of nested views could be a webpage with a header, a main content area (which could itself contain multiple sections), and a footer. The main content area could have nested sections or components. To successfully complete this exercise, you typically need
To solve the problem above, the structure looks like this:
export default function App() return ( // Your components will go here ); Ensure all string values are wrapped in quotes (e
: Double-check that your mainContainer style includes flex: 1 . 2. Elements Are Overlapping
Based on the structure of CodeHS exercises in the "Styling View Components" section, here is a possible scenario and how you could solve it.
justifyContent : Aligns nested views along the (e.g., top-to-bottom for columns). Common values include center , space-between , and space-around .
import React from 'react'; import View, StyleSheet from 'react-native'; const NestedViews = () => return ( // Main Container /* Outer Parent View */ /* Nested Inner View */ ); ; const styles = StyleSheet.create( container: flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ecf0f1', , outerBox: width: 200, height: 200, backgroundColor: 'green', // Center the child inside justifyContent: 'center', alignItems: 'center', , innerBox: width: 100, height: 100, backgroundColor: 'white', , ); export default NestedViews; Use code with caution. 3. Key Components Explained