Container-Based Design Strategy

In this lesson, you will learn how to build "geometry-agnostic" layout components that control their own dimensions, ensuring they remain visually consistent regardless of where they are placed in your app.

The Problem with Context-Dependent Design

Often, we build components that rely on their parent to tell them how big to be—using flex: 1 or explicit heights. This makes components fragile; if you move a button group from a full-screen view into a small sidebar, it breaks. A Container-Based Design Strategy flips this: the component defines its own constraints and layout rules internally, treating the parent as a mere "host" rather than a "manager."

Implementing Self-Governing Geometry

To achieve this, we encapsulate the styling logic so the component assumes responsibility for its own geometry. Instead of passing props like width or height from the parent, the component uses fixed dimensions or internal aspect ratios to dictate its footprint.

Consider this InfoCard component:

const InfoCard = () => (
  <View style={{ 
    width: 300, 
    height: 200, 
    padding: 16, 
    backgroundColor: '#f0f0f0',
    justifyContent: 'center'
  }}>
    <Text>I define my own size.</Text>
  </View>
);

By setting the width and height internally, the InfoCard behaves identically whether it is placed inside a ScrollView, a View, or a Modal. It no longer asks the parent, "How much room do I have?" Instead, it declares, "I occupy 300x200 units."

Why This Matters

When your components dictate their own geometry, you gain massive architectural benefits:

1. Predictability: You never have to debug why a component is stretching or shrinking unexpectedly when moved to a new screen.
2. Reusability: You can drop a complex widget into any layout container, and it will look exactly as intended.
3. Decoupling: Your layout engine doesn't need to know the implementation details of the children it hosts.

By adopting this strategy, you stop writing "layout-dependent" components and start building "layout-resilient" ones, making your codebase much easier to maintain as your application grows.

Key Takeaway: A container-based component governs its own geometry, ensuring consistent rendering regardless of the parent environment.