Component Hierarchy | React Native Day 2

Level: (very) Beginner

Building on yesterday’s post, I want to explore how to construct a screen for your app.

In advance, the best article I’ve found on the subject comes from the creators of React, Facebook. I highly recommend you check out their article here.

To understand Component Hierarchy, you need to understand two fundamental, and very important programming mental models.


Encapsulation states that only the object’s own functions can directly inspect and manipulate its variables.

This “hides” information from other parts of the application. They only have access to “read” the class through pre-defined functions.

Enforcing encapsulation prevents your app from imposing invalid or inconsistent state, making your program more stable.

Single Responsibility Principle

The Single Responsibility Principle takes this idea a step further.

In addition to being fully encapsulated, every class should be restricted to a single functionality of the app.

The principle states that it is bad design to combine multiple responsibilities, or reasons to change, in the same class.

“A class should have only one reason to change.” — Robert C. Martin

Back To Component Hierarchy

With these principles in mind, it becomes fairly obvious to discern how to break up a screen into its component parts.

Each component should have one responsibility — one reason to change. In other words, each component should render one piece of your data model.

As your components grow, they should be broken up into subcomponents to maintain the Single Responsibility Principle.


The Facebook Tutorial on React is excellent. As a beginner, I find it extremely helpful to have a detailed walk through on how to think about programming.

I hope to continue to build my repertoire of programming mental models, and allow them to penetrate all aspects of my code.

Mental Models Used