Atomic Design in React / React Native using a theming library — Part 2

Using a theming library to quickly create a uniform and beautiful UI in React / React Native while following the scalability of Atomic Design principle

Published in

Engineering@Zemoso

6 min readNov 15, 2020

Cover Credits: https://www.zemosolabs.com/

In Part1, I have discussed about few of the basics of Atomic Design and Theming Library and how using them correctly can play a crucial role for the success of a project, no matter if you are an individual developer, working with a friend, working in a Startup or even as a part of an established Organisation.

By now you would have realised how simple it is to build some very basic building blocks (a.k.a. Atoms) of the application in almost no time. And as a bonus, we have also written some tests and Storybooks to make it easy to test and visualise too.

In this Article, I will be talking about using those Atoms to build the molecules with basic functionality and event handling mechanism.

Table of Contents — Part 1

Introduction to Atomic Design
Introduction to theming library
Setup theming library with React
Create Atoms

Table of Contents — Part 2

Overview Molecules and Organisms
Create Templates and Page
Fine Tune the theme
Add Dark Mode
Deploy

Jump Directly To:

Theming the application

Continue building the Application

Event List Item Molecule

We will use Typography Atoms of 3 different variants and create a list item Molecule. At this step we will also start looking into how to use Data Models to use data coming from backend (or stored locally) to populate these values.

As you can notice, the actual creativity will start flowing into the Application from this point. We will start adding paddings, shadows, border radius, etc. But, with almost no specific styling.

In above code, we are using a special component from Material UI called Box , this component acts as a wrapper to handle most of the CSS styling like BoxShadow as part of the theme.

Add Event Organism

A little heads up before we proceed further, since the code starts getting bigger from the organisms and to keep the article short, I will give the overview of one organism, Add Event Organism, to give the idea of how it comes together. For all the other organisms, check out the full project here.

Now I will demonstrate a simple add event Organism that has some Input Fields, Buttons and validation logic. Also, you will notice that TextField component has been updated to accommodate the Date and Time.

Some basic validations and listeners, yet no business logic. This is very important to create a boundary of what your component should do and how much should it control itself. For example, no matter we add this component in Home Screen or create a dedicated screen for Events, it will either validate or not validate the required fields and return the data to main page for further processing. Also, you will notice that there are no network calls or interaction to any data source.

Now since our application is taking the shape, let us build the Template and assemble everything into a page.

Designing a HomeTemplate

While many developers directly tend to jump into divs for building the UI, I personally prefer the use of Grids, they allow the flexibility and rigidness at the same time. We can build amazing responsive UI with minimal efforts with correct usage of Grid. Lets watch how it assembles

That was pretty fast and simple, let us now put it in a page and see how it all comes together.

The final Home Page

Once all the setup is done, creating a page is really fast. Check out the code below.

Before we talk about how bad the page looks currently 😜 and how we are going to fix it in few easy steps, let use focus on the part of the code where I am using Serviceto fetch and update the data.

import { fetchEventData } from "services/EventDataService";
const fetchEventList = useCallback(async () => {
    const eventData = await fetchEventData();
    setEventDataList([...eventData]);
}, [setEventDataList]);

Atomic design or not this is a good practice to isolate data fetching, data processing and data display to keep the app as cleaner as possible. I will be talking about this in detail in my upcoming articles.

Theming the Application

Yup, we are almost there…

Since now we have a running application ready and we can now visualise it as a whole, we can start tweaking the theme.

Updating the colours

Let us pick some beautiful colours and setup the palette for the application.

One best place to begin theming the application is to use Google’s Material Colour Tool

Here I picked the following

Primary : cyan[200]
Secondary: orange[500]

Material Colour Tool offers a variety of previews and customisation, we can pick the one that suits the best in the application. Let us apply them to our Application and see how it looks.

const baseTheme = createMuiTheme({
  ...
  palette: {
    primary: {
      main: cyan[200],
    },
    secondary: {
      main: orange[500],
    },
  },
});

Updating the Fonts

Now let us play with the fonts to make our application look better.

typography: {
    fontSize: 12,
},

Isn’t it amazing? Whole application’s appearance can be controlled just from one file. So no matter your Application has a single page or 1000s of pages, all you have to do is define some components, stick to basic theme and link it to a universal base theme. Whenever your branding changes, you can update the theme in no time.

Deploying the application:

Firebase: https://mohammed-atif.medium.com/deploy-react-application-to-firebase-using-github-actions-2c7514fba386

Heroku: Coming Soon

Bonus Section: The Dark Theme

Let us make our page dark theme compatible

palette: {
    type: "dark",
    primary: {
      main: cyan[200],
    },
    secondary: {
      main: orange[500],
    },
    containerPrimary: {
      main: cyan[200],
      light: "#b4ffff",
      dark: "#4bacb8",
    },
    containerSecondary: {
      main: grey[400],
      light: "#f5f5f5",
      dark: "#373737",
    },
  },