Nitish Sharma I am a mobile and web developer proficient in React, React Native, and other libraries. I am currently employed as a React Native developer.

Understanding how Atomic Design is used in React Native

3 min read 940

Understanding How Atomic Design Is Used in React Native

One of the most popular ways of organizing and maintaining components and modules used by design teams today is Atomic Design, a file structure methodology that breaks down all the elements of a page into simple buckets.

A file structure is a way of arranging various files — i.e., components, classes, etc. — in a specific way in order to ensure development processes are as efficient as possible. In this article, we will be looking at Atomic Design: what it is and the role of each element that makes up the methodology as a whole.

What is Atomic Design?

Atomic Design is a specific way of organizing the components of a project; it is directly inspired by Atomic concepts of chemistry, hence the name. Atomic Design takes inspiration from the concept of an atom being the smallest unit, followed by a molecule being the combination of atoms, and, finally, organisms being made of molecules.

To take an example, atoms specify the smallest components, like buttons and inputs. Molecules signify the combination of these atoms (e.g., forms). The entire page that consists of these molecules can be considered the organism, comprised of all elements.

In essence, Atomic Design is used to build user interfaces in a modular manner, with a primary focus on creating components.

Now that we understand how Atomic Design came about, how do frontend engineers apply this concept in their project? Let’s take a look at how to implement Atomic Design principles to better organize components and pages in React Native projects.

To follow along, you should be familiar with the basics of React Native, including JSX, components (class and functional), and styling. This guide assumes you’ve already done the basic setup for your app.

The methodology of Atomic Design in React Native

Five Levels Of Atomic Design Methodology

As we discussed above, Atomic Design takes inspiration from chemistry’s concept of atoms and molecules. It consists of these five distinct levels:

  1. Atoms: These are the building blocks, which cannot be further broken down
  2. Molecules: Atoms grouped together form a single molecule
  3. Organisms: Molecules joined together to create a part of the interface
  4. Templates: The content structure
  5. Pages: Interfaces built as instances of templates

React Native Atomic Design File Structure



This is what a typical project structure should look like, after organizing components according to Atomic Design principles.

Atoms

Atom Input

Atom Sign Up

Atoms are the fundamental units of a project. They are the basic building blocks the whole design depends upon. These can be inputs and buttons, as well as color palettes and animations. They are the smallest possible units that can be used throughout the project in molecules, organisms, and templates.

They should be easily and globally accessible and built in a way that make them usable anywhere throughout the project due to their having many states — for example, a button or input that may be disabled in certain cases.

Molecules

Molecule Input Group

As we know, when two or more atoms bind together, they form a molecule that offers new combined qualities. Similarly, molecules in Atomic Designs are combination of various atomic components to build a whole new component.

In the example above, We can see an input group built using a view, input, and a button. Combining these three atomic components allows us to build this molecule, i.e., the grouped component for the password input section, which enables a user to press on the eye to show or hide their password in the input.

Organisms

Organism Header Profile

Organism Music Control

Again, as we go up the chain and group together multiple molecules, we get an organism. Organisms still can’t be considered a whole structure of the project as they are supposed to be independent and reusable on various parts of any given project.

At this stage, we start to see a somewhat formed structure of the UI. In the above examples, various molecules are combined together for the header and music controls. Headers are reusable on various pages of a project because they hold the same structure on most pages.

Templates

Template Atomic Design

These are multiple organisms grouped together to form the skeleton of a page, or layout. This is where all the aspects collectively come together in terms of design; it’s like a blueprint for the pages. These do not hold any data to show on their own other than the defaults required by the UI designs.

Pages

Atomic Design Pages

Pages are instances of the templates. They are the complete form of the design that comes into full shape in templates. The data is combined with the templates, and the desired result is what we get in the form of a page.

Pages also demonstrate the feasibility of the templates. For example, how the designs will react when more data is added to them — as one example, chats can have multiple forms of data as messages. There can be a lot of messages containing either text, images, or videos. We get to see all these things rendered on the screen with pages.

They are the end result of all the things that we’ve built using Atomic Design.

Conclusion

There are a lot of different methods you can use to structure your React Native projects. Even on React’s official website, it’s noted that there is no standard for how files and folders should be managed. If you’re looking for a simple but effective approach for organizing your project files when you make an app, Atomic Design might be the one for you.

Atomic Design is my primary method for organizing my projects, and I hope this approach helps you the way it has helped me and many other developers.


More great articles from LogRocket:


LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.

Start proactively monitoring your React Native apps — .

Nitish Sharma I am a mobile and web developer proficient in React, React Native, and other libraries. I am currently employed as a React Native developer.

Leave a Reply