Atomic Design with React Native

This blog series was heavily inspired by Atomic Design by Brad Frost.

So what exactly is an Atomic Design and how can you link it with React Native? 🤔

Before that let us look at a parallel definition of what Atomic Design is.

An atom is the smallest unit of ordinary matter that forms a chemical element.

Atoms are the basic units of matter and the defining structure of elements.

The term “atom” comes from the Greek word for indivisible.

The Atoms combine to form molecules, which in turn combine to form more complex Organisms.

So we can conclude that Atomic Design is a way to Compose/Split a set of components into

1. Atoms
2. Molecules
3. Organisms
4. Template
5. Screen/Page

So, a Mobile App Screen/Webpage is a complex organism that can be broken into small fundamental building blocks, molecules, and furthermore as atoms.

For starters, these are some of the Atom I can think of right away.

I have addressed some of the components before and I have added the links to the same.

1. Button
2. Text: Available in React Native
3. Input
4. Checkbox
5. Switch
6. Stepper
7. Image
8. Segmented Control

The Molecules which can be built using these atoms are :

1. Checkbox Item

It will compose the Checkbox and Text which is essentially the label.

1. Page Header
2. List Item
3. Form Field

It will compose the Input Atom with Text.

1. Avatar

Image with different Avatar Sizes as a Prop.

Note: I have added Switch, Stepper, and Segmented Control to atoms, even though they are composed of two and more atoms/components because it will act as a base component in our app/project which will not require any further breakdown.

An Organism can be formed by grouping the above components.

E.g. is a Login Form Component

Which will have a group of Atoms as well as molecules like

1. FormField for Email Id
2. FormField for Password
3. Login Button
4. Forgot Password Button

I hope this will be helpful to everyone who are starting out to build Mobile/Web Apps✌️

Check out my video too!

Subscribe and Stay Tuned for more React Native-related videos.

This is Karthik representing Timeless.