The goal of this exercise is usually to create a screen where items are arranged both horizontally and vertically, requiring a parent container with one flexDirection and child containers with another, or creating specialized boxes within boxes.
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.
In the CodeHS Mobile Apps course, the 2.3.9 Nested Views exercise focuses on using View components
import { StyleSheet } from 'react-native'; 2.3.9 nested views codehs
import React from 'react'; import { View, StyleSheet } from 'react-native'; export default class App extends React.Component { render() { return ( {/* Parent View */} {/* Nested Child Views */} ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, parentBox: { height: 200, width: 200, backgroundColor: 'blue', flexDirection: 'row', // Aligns children side-by-side justifyContent: 'space-around', alignItems: 'center', }, childBox: { height: 50, width: 50, backgroundColor: 'red', }, }); Use code with caution. Copied to clipboard Mobile Apps (Semester) - Outline - CodeHS
Wait, careful: In most Canvas-based libraries, add(child) adds to absolute coordinates. To simulate nesting, we manually offset.
In React Native, the component acts as a container. Nesting occurs when you place one or more components inside a parent . This hierarchy allows you to: Keep related UI pieces together. The goal of this exercise is usually to
Example 2 — JavaScript: creating nested elements and handling events Code:
Mastering Nested Views in CodeHS: A Comprehensive Guide Building modern mobile applications requires a deep understanding of user interface (UI) design. In the CodeHS Mobile Apps curriculum, learning how to structure layouts effectively is a critical milestone. One of the most powerful concepts you will encounter is .
While working through CodeHS 2.3.9, you might run into layout glitches. Keep these troubleshooting tips handy: If you share with third parties, their policies apply
: Build UI chunks (like custom headers or cards) that can be easily moved or duplicated.
// Parent View: The profile card container var profileCard = new Rectangle(200, 250); profileCard.setPosition(100, 100); // Position on the main screen profileCard.setColor("lightgray"); profileCard.setBorderWidth(2); profileCard.setBorderColor("black");
If the assignment description specifies that the middle section must be twice as large as the header, ensure your flex numbers accurately reflect that math (e.g., header flex: 1 , body flex: 2 ). 4. CodeHS Autograder Specifics
// Add the sub-view to the main view mainView.add(subView);