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
Always make sure every open tag has a matching closing tag. Indent your nested tags so you can visually trace which child belongs to which parent.
To clearly identify each level, you can add a Text component inside each View . This is a great debugging tool and helps visually confirm the nesting structure: 2.3.9 nested views codehs
const styles = StyleSheet.create( container: flex: 1, justifyContent: 'center', alignItems: 'center', , parentBox: backgroundColor: 'blue', height: 200, width: 200, // Aligns the nested child inside this box justifyContent: 'center', alignItems: 'center', , childBox: backgroundColor: 'red', height: 100, width: 100, , ); Use code with caution. Copied to clipboard 2. Structure the Components
The CodeHS "2.3.9 Nested Views" exercise teaches Flexbox layout by nesting child views within parent containers to create structured, responsive React Native interfaces. Key techniques include using flexDirection for alignment and flex values to define proportional sizing for complex layouts. For more information, visit the CodeHS website. React Native styles use camelCase rather than standard
By using nested views in CodeHS, you can create complex and visually appealing user interfaces with ease.
// Create another nested view var innerView = new View(50, 50, 200, 200); innerView.setBackground("blue"); Best Practices for CodeHS Graded Assignments Always make
With CSS:
To complete Exercise 2.3.9 successfully, you must master the three main styling rules that govern nested views: 1. flexDirection Determines the primary axis of the layout.
Demonstrates the deepest level of nesting. It inherits its layout behavior directly from its parent ( innerBoxOne ). Common Pitfalls and How to Fix Them