Even with the correct logic, many students fail the CodeHS autograder on the first try. Here are the top three mistakes for "nested views":
The flex property dictates how much available space a container fills. If an outer view has flex: 1 , it expands to fill the whole screen. If it contains two nested child views—one with flex: 3 and another with flex: 1 —the first child will occupy 75% of the parent's space, while the second takes 25%. 2. Layout Direction ( flexDirection ) By default, React Native aligns items vertically ( column ).
Implication: moving the parent moves the child automatically. 2.3.9 nested views codehs
This public link is valid for 7 days and shares a thread, including any personal information you added. This link or copies made by others cannot be deleted. If you share with third parties, their policies apply. Can’t copy the link right now. Try again later.
components, each styled with different background colors and dimensions. Key Concepts Parent View Even with the correct logic, many students fail
To nest a view, you simply type the new layout tag inside the parent tags.
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 If it contains two nested child views—one with
<!-- Simple HTML structure with nested views --> <!DOCTYPE html> <html> <head> <title>Nested Views Example</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Header View --> <header> <h1>Main Header</h1> </header>
To create a nested view in CodeHS, you can use the following steps: