: Use flexDirection (row or column) in the parent view to determine how the nested children are arranged. Common Pitfalls to Avoid
Example 1 — HTML/CSS: simple nested layout (header, sidebar, content) Code (HTML + CSS):
export default function App() return ( // Your components will go here );
Apply a background color to a parent while giving children their own margins and padding. 2.3.9 nested views codehs
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- This is the NESTED layout --> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal">
If a nested view contains no text content and has no explicit height, width, or flex property assigned, its calculated dimensions will default to zero, rendering it invisible.
Many students encounter "invisible" views or layout breaks during this exercise. Keep these tips in mind: : Use flexDirection (row or column) in the
: If a nested View has no content and no fixed height / width , it may collapse and become invisible.
When working on CodeHS exercises, look out for these typical pitfalls:
What or unexpected visual outcome are you seeing in your CodeHS console? Many students encounter "invisible" views or layout breaks
/* This View is nested inside the parentBox */ Use code with caution. Copied to clipboard 💡 Troubleshooting Tips
React Native's official documentation describes the View as "a container that supports layout with flexbox, style, some touch handling, and accessibility controls, and is designed to be nested inside other views". Mastery of View and nesting is essential for creating any non-trivial application.
If your child text or shapes disappear, ensure the parent view has a specified flex value, width , or height . A parent with a height of 0 will hide its children.
What (e.g., checkerboard, columns, or a top banner) is your prompt asking you to build?