This video is available to students only


We'll look at the Atomic design pattern's atoms and molecules; what they are and how they help build the design system of the app.


It is highly recommended that you go through the following lessons in order before moving ahead with this one:


We have already covered colors and styles in previous lessons. We have defined what margins to add to a screen, what the gap is between two vertically stacked components, and what the font and style headers and paragraphs are going to be.

From an Atomic Design perspective, elements are the atoms, though we will also categorize some as molecules in this lesson.

Atoms - text elements#

As we saw in the Atomic Design Pattern section, atoms are the most basic building blocks of the app like textboxes, inputs, etc. Let's see how we can use the typography defined earlier to help us build these.

A Text is a very basic element provided by React Native to display any string on the UI. I recommend creating a thin wrapper over it so that we can control the default styling and font for any text that appears in the app.

Start a new discussion. All notification go to the author.