React Native project structure can get confusing and messy very quickly if you don’t take the time to focus and plan for the project structure of your components. React Native is a mobile app development framework that allows developers to use native components in their cross-platform apps to give them a better User Experience and User Interface.
While React Native is a framework, there are many ways that developers can approach and structure their projects within this framework. Ultimately, there is no right way to organize a React Native project as long as the app actually works.
However, there are methods of project structure that can make your project easier to manage, debug, and share with other developers. Since React Native is component-based, the bulk of this post will be focused on how to structure components in a clear and logical manner.
Remember that the methods we discuss are not the only way you can organize your project structure. You might find that another method works best for you and your teams, but we find the following information to be the most logical when it comes to structuring a React Native app’s files and components. Let’s take a closer look at React Native project structure.
Should You Organize by Type or Feature?
Before we really delve into the structure of React Native components, we need to begin by exploring the overarching structure of an application’s files. Basically, there are two ways you could approach this. You can choose to either structure your app’s files by type or by feature.
Type
Organizing an app’s files by type is a logical approach. For example, if you have a component, there are container and presentation files where it could be stored. Likewise, views would be stored in HTML, CSS, or JavaScript files.
Organizing files in this manner ensures that the type of each file is easily recognized, and it makes running scripts to specific file types much easier. The main criticism that this organizational structure gets from developers is that it is too mechanical.
Most developers work on specific features. When organizing files by type, the necessary files for one specific feature may be spread out across multiple directories. This can present time-consuming issues when managing and debugging code.
Feature
Many people who work in app development prefer to organize their files based on feature instead of type. All files related to a specific feature are grouped together in this organizational structure. Features can also have sub-features as well. Think login and sign-out features.
Grouping files by feature is a great choice because it makes it easy to move features and sub-features around without the worry that important files will be lost or misplaced. A good bit of advice is to place your feature folders within the src (source) folder.
This will help keep your project organized and ensure that folders aren’t misplaced or lost within the greater index.js file.
Structuring React Native Components
React Native, and React for web development, is based on components. Components give developers a lot of flexibility in the development process, and since data flows in one direction in React, components can be easily reused in multiple places throughout the app.
Two of the major issues that can arise from poorly structured React components are instances of repeated code and inconsistency between view and components. One method of structuring components that greatly helps resolve these issues is called Atomic Design.
If your app structure is complex, Atomic Design might be the best possible project structure for your React Native components. Let’s get a better understanding of the principles behind Atomic Design and why it is a great structure for React Native components.
What is Atomic Design?
Atomic Design is a well-known design structure in the development world because it is so adept at creating consistent and reusable systems. Atomic Design is an even more effective approach when using a mobile app development framework like React Native that is component-based.
In fact, developers using React Native follow this structure without even thinking about it, but if properly harnessed, this design structure can be a serious advantage to development teams. In an Atomic Design structure, components are separated based on complexity into the following categories:
Let’s explore how Atomic Design components work together to form a logical project structure for React Native apps.
Atoms
This is the smallest and simplest component in any given project. An atom could be a number of different things, such as a font, a button, a color palette, etc. These components can be applied within other components, which is most often the case, as we will see later, or globally throughout the app.
Molecules
Molecules are composed of two or more atoms. These components begin to provide functionality, which atoms cannot provide on their own. Molecules are components with increased complexity and function. Think about a box that includes an array of buttons like “Contact Us” or “Learn More.” Molecule components can be, and often are, reused throughout a React Native app.
Organisms
Just as molecules are combinations of atoms, organisms are combinations of molecules. This combination of molecule components forms elaborate User Interfaces. At the organism level of Atomic Design, components begin to take on their final shape and form. However, these components are still independent and reusable throughout the app.
Templates
At this stage of Atomic Design, the components have all been created. The template stage of design is about setting components within a greater context. The template is what creates the relationships between organisms and other components. These relationships are established through position, placement, and pattern. This stage of Atomic Design closely resembles a wireframe because style, color, etc., is not rendered at this stage.
Pages
This is the total realization of Atomic Design. Here, all components are placed into a specific template, get real content, and are placed into the application. This is the most complex combination of components and templates, and at this point, it is no longer reusable. There are many React Native apps that have similar pages, but these would be using the same templates. Pages should be unique to themselves. You don’t want to have duplicate pages within your app.
Atomic Design is not necessarily the path you have to follow, but you can see from the way components are structured in terms of complexity that many React Native apps are built following this structure, whether intentionally or not.
Final Thoughts
React Native is one of the most popular open-source app development frameworks. This is because it is very effective at creating cross-platform apps that do an excellent job of mimicking native iOS and Android apps.
The project structure of a React Native app is very important. There are a lot of different choices when it comes to project structure, but thanks to the component-based nature of the framework, a certain level of basic structure must be adhered to in order to get a React Native app to function properly.
If you feel confused or overwhelmed by the sheer amount of choices you have, reach out to an app development partner. They can share their technical expertise and industry experience with you to ensure that your development project heads in the right direction.
