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.
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.