Have you ever started developing a React Native app and faced challenges in code maintenance and its structure? Especially when the app keeps growing and then you start noticing that there are many duplicate components that differ only slightly in styling, and it becomes more challenging for new developers to grasp and understand the UI structure.

In my opinion, the main challenge is not just the application’s logic but how to keep it consistent, scalable, and maintainable over time. This can raise some important questions, such as: How do large applications maintain consistent interfaces? How can UI elements be reused without duplicating code across screens? Why is the same UI component rewritten repeatedly? How can new developers quickly grasp the UI structure?

These challenges can be solved and adapted by a design called Atomic Design, which mainly helps in creating a scalable and maintainable UI by breaking down the interface into fundamental building blocks that can be reused and combined consistently.

Table of Contents
• Atoms
• Molecules
• Organisms
• Templates
• Pages/Screens
• Grocery App Example
• Folder Structure before & after Atomic Design

So let me introduce you to Atomic Design.
Atomic Design can be broken down into 5 hierarchical levels which are Atoms, Molecules, Organisms, Templates, and Pages/Screens.

Let’s talk about each of these hierarchies.

1- Atoms:

If you remember back then in school, when we were introduced to the chemical elements, and we were told about atoms and how they’re the smallest, fundamental unit of ordinary matter that retains the chemical properties of an element. In the Atomic design, it’s pretty much the same definition. Atoms in Atomic Design are the smallest building blocks of the app, which cannot be broken down any further, and they have a single responsibility. And they are highly reusable across the app, and they do not contain any business logic.

For example, in React Native, the atoms can be:

<AppText/>
<AppInput/>
<AppCheckbox/>
<AppSwitch/>
<PrimaryButtons/>
<SecondaryButtons/>
<AppIcon/>

2- Molecules:

And if we go back to our chemistry class, A molecule is the smallest unit of a chemical compound, consisting of two or more atoms held together. So, from the definition, we can understand that molecules are a combination of more than one atom, and they can start having some logic and responsibility within them.For example: FormField (Label + Input + Error message) , Search bar (Input + Icon) , Avatar (Avatar Image + Username Text) , Cards (Image + Card Name Text) .

For example, in React Native:

const SettingsItem = ({item}) => { 
  return ( 
    <View style={styles.container}> 
      <AppText text={item.label} /> 
      <AppSwitch 
        value={item.value} 
        onValueChange={(value) => item.onToggle(value)}  
      /> 
    </View> 
  ); 
}; 

3- Organisms:

If you can already see the pattern, organisms are a combination of both molecules and atoms to form a UI section of a screen, and here, mapping and small presentation logic may start to exist, such as PostCard, CommentSection, ProductCardList, ProfileHeader

For example, in React Native:

const SettingsGroup = ({ title, items}) => { 
  return ( 
    <View style={styles.container}> 
      <AppText text={title} style={styles.customTextStyle} /> 
      {items.map(item => ( 
        <SettingsItem key={item.key} item={item} /> 
      ))} 
    </View> 
  ); 
}; 

4- Templates:

They simply define the overall layout structure of the screen and its organisation, and they do not contain any real data. They play an important role when multiple pages share the same layout.

For example, in React Native:

const SettingsTemplate = ({title, user, settingsGroups, onLogout }) => { 
  return ( 
    <ScrollView> 
      <ScreenHeader title={title} /> 
      <ProfileSection user={user} /> 
      {settingsGroups} 
     {onLogout && <LogoutButton onPress={onLogout} /> } 
    </ScrollView> 
  ); 
}; 

5- Pages/Screens:

A screen represents the full view that the user can navigate to, and it contains data fetching (API calls), state management, and business logic. So, basically: Template + Data + Logic = Screen

For example, in React Native:

const SettingsScreen = () => { 
  const {user, appSettings, logout} = useSettingsScreen();

const groups= appSettings.map(group=>( 
    <SettingsGroup 
      key={group.id} 
      title={group.title} 
      items={group.items} 
     /> 
   )); 

  return ( 
    <SettingsTemplate 
     title=”Settings” 
     user={user} 
     settingsGroups={groups} 
     onLogout={logout} 
    /> 
  ); 
}; 

Now, let’s practice how we can break down the components, so if we have a simple home page for the grocery app.

Grocery App Example:

The components we can see are :
1-Text
2-Input
3-Icon
4-Button
5-WelcomeTitle
6-Search bar
7-CategoryItem
8-CategoriesSection

Before reading on, I encourage you to try breaking down these components into atoms, molecules, and organisms.

Components Folder Structure

Before introducing the Atomic Design, the project might have been organised in a simpler way where all components lived inside one folder without a clear hierarchy.

/src
  /components
    /AppText
      AppText.ts
      AppText.styles.ts
    /AppInput
        AppInput.ts
        AppInput.styles.ts
    /AppIcon
        AppIcon.ts
        AppIcon.styles.ts
    /SearchBar
        SearchBar.ts
        SearchBar.styles.ts
    /WelcomeTitle
        WelcomeTitle.ts
        WelcomeTitle.styles.ts
     /CategoryItem
        CategoryItem.ts
        CategoryItem.styles.ts
    /CategoriesSection
        CategoriesSection.ts
        CategoriesSection.styles.ts

At first glance, placing all components inside a single folder might seem sufficient. For smaller applications, this approach works perfectly well. However, as the number of components grows, it becomes harder to understand the relationships between them. Small reusable building blocks, larger UI sections, and screen-level components all end up living in the same place. This is where Atomic Design becomes useful, as it introduces a hierarchy that helps clarify how components relate to one another.

With Atomic Design:

/src
  /components
    /atoms
      /AppText
        AppText.ts
        AppText.styles.ts
      /AppInput
        AppInput.ts
        AppInput.styles.ts
      /AppIcon
        AppIcon.ts
        AppIcon.styles.ts
      index.ts
    /molecules
      /SearchBar
        SearchBar.ts
        SearchBar.styles.ts
      /WelcomeTitle
        WelcomeTitle.ts
        WelcomeTitle.styles.ts
      /CategoryItem
        CategoryItem.ts
        CategoryItem.styles.ts
      index.ts
    /organisms
      /CategoriesSection
        CategoriesSection.ts
        CategoriesSection.styles.ts
      index.ts

In my opinion, Atomic Design is not just about organising folders or following a methodology; it’s more about how you can shift your brain to think that you can build your project block by block, and instead of building the entire screen at once, you start to think in small, reusable pieces atoms form molecules, molecules form organisms, those organisms come together to form the screen. and it helped me personally during my development, made it easier and more organised, and more importantly, more enjoyable.

So, the next time you start a new feature or build a new screen, ask yourself: Is this component an atom, molecule, or organism? How can I structure my UI so that it remains consistent as the application grows?

What are your thoughts on whether Atomic Design works better for design systems than for regular applications? How do you strike the right balance between Atomic Design and feature-based architecture in your projects? Please Share your experiences and insights :)

Note: This article speaks only to my personal views / experiences and is not published on behalf of Deloitte LLP and associated firms and does not constitute professional or legal advice.

All product names, logos, and brands are property of their respective owners. All companies, product and service names used on this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.

Atomic Design in React Native was originally published in Deloitte UK Engineering Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.