// Child: Avatar var avatar = new Circle(35); avatar.setPosition(100, 60); avatar.setColor("#4CAF50");

This property determines the axis along which child views are arranged inside the parent view.

: Use flexDirection (row or column) in the parent view to determine how the nested children are arranged. Common Pitfalls to Avoid

// 5. Text nested inside Content var bodyText = new Text("This text is inside a nested view."); bodyText.setColor("#333333"); bodyText.setPosition(content.getX() + 15, content.getY() + 30); bodyText.setFont("12pt Arial"); add(bodyText);

To solve the nested views exercise, you need to structure your JavaScript/React Native code to have a "wrapper" view and internal "inner" views. 1. The Structure Holds everything.

A nested group (like a card component with an image, title, and description) can be duplicated and placed in different parts of the UI without redefining its internal layout.

// Child 4: Follow Button Text var buttonText = new Text("Follow"); buttonText.setPosition(100, 170); buttonText.setColor("white"); buttonText.setTextAlign("center");

// Child: Button var btn = new Rectangle(100, 35); btn.setPosition(50, 180); btn.setColor("#0084ff"); var btnLabel = new Text("Connect"); btnLabel.setPosition(100, 202); btnLabel.setColor("white"); btnLabel.setTextAlign("center");

Create a rectangle that acts as the main container. Give it a neutral background, like light gray, and a border so you can see its boundaries.

// Child 3: Follow Button Background var followButton = new Rectangle(80, 30); followButton.setPosition(60, 150); followButton.setColor("green");

<div class="outer-container"> <div class="header"> <h1>Welcome</h1> </div> <div class="content"> <p>This is a nested paragraph inside a content div.</p> <button>Click Me</button> </div> </div>