2.3.9 Nested Views Codehs 🆕

Before jumping into the code, it's important to understand the building blocks of any mobile app interface.

// Styles rowContainer: flexDirection: 'row', justifyContent: 'space-between' , leftBox: flex: 1, height: 100, backgroundColor: 'red' , rightBox: flex: 1, height: 100, backgroundColor: 'blue'

// Child 2: Username Label var userName = new Text("CodeHS_User"); userName.setPosition(100, 110); // Centered below avatar userName.setColor("black"); userName.setFont("16pt Arial"); userName.setTextAlign("center");

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 2.3.9 nested views codehs

Without nesting, every UI element would exist independently, floating on the screen. Changing the position of one item would require recalculating the positions of every other item. Nesting allows you to:

Before you write a single line of code, ensure your solution meets these hidden criteria:

This comprehensive guide will walk you through everything you need to know about this specific CodeHS exercise, from the fundamental concepts of React Native’s building blocks to step-by-step solutions, styling techniques, and best practices. By the end of this article, you will not only be able to complete the assignment but will also have a solid grasp of how professional mobile app interfaces are constructed. Before jumping into the code, it's important to

: Remember that the default flexDirection in React Native is column . If you want nested views to sit side-by-side, set flexDirection: 'row' on the parent.

Rather than manually positioning every view, use modern CSS layout modules. Nesting a display: grid container inside a display: flex container is common and robust.

<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"> Structure the Components Without nesting, every UI element

By default, views stack their children vertically ( flexDirection: 'column' ). If you want elements to sit side-by-side, you must create an inner View and apply flexDirection: 'row' . 2. Flex Proportions

: Place child components inside a parent .

Every React Native application needs a root component that returns a single parent element (usually a View ). In the CodeHS editor, you'll start with a basic structure like this: