Mastering React native app Architecture: A scalable approach to Structure your Codebase

Introduction

When building a React Native app, poor structure and architecture can lead to significant pain points that affect the development process and user experience. Without a solid foundation, scaling your app can become a daunting task. Here are some common pain points you may encounter with a poorly structured React Native codebase:

• Difficulty in Scaling: Adding new features becomes increasingly complex as the codebase grows, often leading to tangled code and duplicated logic.
• Reduced Maintainability: A disorganized architecture makes it harder to debug, extend, or refactor the code, resulting in higher maintenance costs over time.
• Performance Issues: Inefficient code structures, unoptimized asset management, or excessive re-renders can degrade the app’s performance.
• Developer Onboarding Challenges: New team members struggle to understand and contribute to the project if the folder structure and code organization lack clarity.
• Testing Complexity: Without a clear separation of concerns, writing unit and integration tests becomes cumbersome, leading to low test coverage and less reliable software.
• Tech Debt Accumulation: As the project evolves, quick fixes and shortcuts add up, leading to a large amount of technical debt that slows down development.

A well-structured codebase can prevent these issues by fostering a modular and scalable approach to organizing your app. In this article, we’ll dive into best practices for architecting a React Native application that scales seamlessly as your project grows. We’ll discuss a boilerplate setup with a configuration that provides a solid starting point for structuring your app, helping you avoid common pitfalls and ensuring long-term maintainability and performance. Whether you’re setting up a new project or refactoring an existing one, following these guidelines will give your app the robust foundation it needs to thrive.

What should you take into account when creating your React Native?app?

1. Learn the Clean Code principles:

When it comes to having a robust architecture, you need to take into account different clean code principles, a summary of that is here: https://gist.github.com/wojteklu/73c6914cc446146b8b533c0988cf8d29

But when it comes to using that in React or React Native app, we need to use a React approach, I wrote this article a time ago here: https://medium.com/@malikchohra/structure-your-react-native-app-for-scale-part-1-patterns-and-principles-to-master-a3b24b6acf97.?

Where I talked about which principles and code patterns that you need to take into account when working with React or React Native.

2. What are the things that are specific for a React or a React Native?app:

In this section, I will talk about what needs to be taken into account when working with React or a React native app, how to solve it, and which articles or resources you can learn from.?

Modular Code Organization:

Structure your codebase into meaningful folders and modules (e.g., Components, Screens, API, Redux, Hooks) to ensure a clear separation of concerns, improve readability, and simplify maintenance.

You can use different Patterns and principles:

1. SOLID principles for example): https://medium.com/stackademic/use-solid-principles-in-react-react-native-663b8cabfa2b
2. Facade pattern: https://medium.com/@malikchohra/build-to-scale-the-facade-pattern-1f5db01226a9
3. Higher Order component in React: https://medium.com/@malikchohra/build-for-scale-higher-order-component-hoc-in-react-and-react-nativethis-series-of-build-for-8b9e3dc96317
4. Other principles: But when it comes to using that in React or React Native app, we need to use a React approach, I wrote this article a time ago here: https://medium.com/@malikchohra/structure-your-react-native-app-for-scale-part-1-patterns-and-principles-to-master-a3b24b6acf97.

Reusable and Atomic Components:

Build components using the atomic design principle (Atoms, Molecules, Organisms) to promote reusability, consistency, and a more structured approach to UI development.

Centralized State Management:

Use a state management solution like Redux, MobX, or Context API to handle global states, making it easier to manage complex state changes and share data across the app.

To learn how to use the Redux toolkit, check this:?

1. https://medium.com/r?url=https%3A%2F%2Fcasainnov.com%2Fhow-to-use-redux-toolkit-for-your-react-and-react-native-app
2. Learn different types of state management here: https://medium.com/javascript-in-plain-english/build-for-scale-what-is-state-management-in-react-and-react-native-and-what-to-choose-4fc5151e233a

Scalable API?Layer:

Consistently organize API-related code, such as using class-based API structures and separate folders for mock data, to easily manage API calls, handle data fetching, and integrate different environments.?

example of using GraphQL: https://medium.com/javascript-in-plain-english/mastering-graphql-in-react-native-a-step-by-step-guide-with-typescript-and-redux-toolkit-79f3bce1dae7

or using API facade approach to get data: https://medium.com/@malikchohra/build-for-scale-from-api-to-ui-using-react-query-to-fetch-and-display-data-in-react-native-and-235428a1db5b

CI/CD Integration:

Automate building, testing, and deployment using tools like Fastlane for continuous integration and continuous delivery, ensuring a streamlined and error-free release process for both Android and iOS.

You can use Fastlane in your React native app to ship faster to Apple Store and Google Play Store, integrate it with Github action: check these two resources:

1. https://medium.com/@malikchohra/ci-cd-pipeline-for-react-native-apps-use-fastlane-and-github-actions-40f9ad2036d0
2. https://medium.com/@malikchohra/ci-cd-pipeline-for-react-native-apps-use-fastlane-and-github-actions-dcf101edc423

Efficient Asset Management:

Keep assets like images, icons, fonts, and other resources well-organized in a dedicated folder structure to avoid clutter and make asset management more straightforward.

If you want:

1. use a custom font, check this article: https://medium.com/@malikchohra/build-for-scale-use-custom-fonts-in-react-native-5cae05ee1a99
2. use Fastimage for images: https://medium.com/@malikchohra/build-for-scale-how-to-use-react-native-fast-image-393a647d60d5
3. use custom svg for icons: https://medium.com/@malikchohra/build-for-scale-how-to-use-svgs-in-react-native-5f49ad4a7715

Theming and?Styling:

Use a consistent theming strategy by centralizing theme-related configurations (e.g., colors, typography, global styling) to maintain a unified look and feel across the app.

To learn more about design systems, how to create your own in react native, and how to use it with react native paper

1. What is a design system for beginners: https://medium.com/@malikchohra/build-for-scale-use-a-design-system-in-your-react-native-app-59353baec110
2. Create your custom Theme: https://medium.com/@malikchohra/build-for-scale-use-a-design-system-in-your-react-native-app-0224797da39b
3. How to use React Native paper: React native paper https://medium.com/@malikchohra/build-for-scale-use-a-design-system-in-your-react-native-app-5790982cae7e

Localization and Internationalization (i18n):

Implement localization support early in development to ensure the app is prepared for multiple languages and regions without significant refactoring.

Learn how to use different languages in your react native app here: https://medium.com/@malikchohra/build-for-scale-use-internalization-for-react-native-6fb9f5c06dd2

Custom Hooks:

Create custom hooks for encapsulating logic related to data fetching, state updates, and other reusable functionalities to avoid code duplication and promote a clean separation of logic.

You can check a great approach of how to use them for data fetching here: https://medium.com/javascript-in-plain-english/build-for-scale-infinite-scroll-using-react-query-with-redux-toolkit-in-react-and-react-native-d27dab04df2a

or the usage of React query hook: https://medium.com/javascript-in-plain-english/build-for-scale-infinite-scroll-using-react-query-with-redux-toolkit-in-react-and-react-native-d27dab04df2a

Robust Testing Strategy:

Set up a comprehensive testing framework (e.g., unit tests, integration tests, E2E tests) to catch bugs early, improve code quality, and ensure the app behaves as expected.

You can learn more about how to use Detox for e2e testing, and Jest for testing here: https://medium.com/@malikchohra/guide-to-testing-in-react-native-end-to-end-test-using-detox-f29fd1344180

1. Unit Testing https://medium.com/@malikchohra/guide-to-testing-in-react-native-end-to-end-test-using-detox-f29fd1344180
2. Integration Test: https://blog.stackademic.com/guide-to-testing-in-react-native-unit-and-integration-test-6cca27dfe293

Navigation Management:

Structure navigation, with a dedicated folder for navigation configuration and screens, to keep the navigation flow organized and easy to manage as the app scales.

You can read this article on what react-navigation is.?

to learn how to use it in react native: https://medium.com/@malikchohra/build-for-scale-best-approach-on-how-to-use-react-navigation-in-react-native-d3eb7362c80e

Error Handling and?Logging:

Implement centralized error handling and logging solutions to manage crashes, trace errors, and monitor app behavior, which will help debug and improve the app’s reliability.

Using a class to debug, add performance tools such as Firebase, Sentry or DataDog.?

Performance and optimization app?render:

Performance is an important subject for advanced react native development.

1. check how to get rid of console?.log in your code base here: https://medium.com/stackademic/build-for-scale-optimize-app-size-delete-console-log-from-your-app-8fb4ae9470d8
2. use of Flashlit for big data rendering: https://medium.com/javascript-in-plain-english/build-for-scale-improve-list-performance-using-flashlist-ec0e02804d15
3. The best approach to implementing infinite scroll: https://medium.com/javascript-in-plain-english/build-for-scale-infinite-scroll-using-react-query-with-redux-toolkit-in-react-and-react-native-d27dab04df2a
4. Avoid Memory leak: https://medium.com/stackademic/build-for-scale-avoid-memory-leaks-in-react-native-dc19b84d9958

Data and API security:

When creating an app, you need to hide your sensitive keys inside it so you can comply with GDPR rules.

learn more about how to use react native config to hide your keys here: https://casainnov.com/securing-sensitive-keys-in-react-native-with-react-native-config

Best User Experience and Animations:

To have an amazing app that users love, and add more live feeling to your app. a great user experience is Mandatory.

learn more about how to use react native reanimated: https://casainnov.com/learn-animation-in-react-native-using-reanimated-library

you can skip a bad user experience by following this guideline: https://medium.com/stackademic/anticipate-bad-user-experience-in-your-react-react-native-app-40af5d9d1334

Developer Experience

You need to take into account how the development team will use your app. You need to set standards on how to use the code base and how collaboration should be done.?

you can check the following:

1. usage of an absolute path in react native: https://medium.com/@malikchohra/how-to-use-absolute-path-in-the-latest-react-react-native-version-fe88142a6f7e
2. implement a static code analysis in your react project: https://medium.com/@malikchohra/guide-to-static-code-analysis-for-react-and-react-native-c745dfc250bd
3. Variable naming in Javascript: https://medium.com/javascript-in-plain-english/best-practices-for-variable-names-in-javascript-and-typescript-7860a84ed80a

The answer: How to structure your App for scaling to +2 million active users and +150 developers teams

1. Organize by Feature or?Module

Structure the app by organizing code into feature-based or module-based folders. This approach groups related files together, making it easier to maintain and scale the app. Each folder contains all related components, screens, hooks, and utilities.

Example:

Screens/

• --> HomeScreen/
• --> --> index.tsx
• --> --> components/
• --> --> --> Header.tsx
• --> --> --> HomeList.tsx
• --> --> hooks/
• --> --> --> useHomeData.ts
• --> --> tests/
• --> --> --> HomeScreen.test.tsx

2. Atomic Design for Components

Adopt the Atomic Design principles to structure your components into different levels, which promotes reusability and keeps the codebase modular.

Example:

Components/

• --> Atoms/
• --> --> Button.tsx
• --> --> Text.tsx
• --> Molecules/
• --> -->Card.tsx
• --> --> ListItem.tsx
• --> Organisms/
• -->--> Header.tsx
• -->--> UserProfile.tsx

3. Centralized State Management

Organize your global state management solution to separate concerns by business feature (actions, reducers, selectors), allowing for scalability as the app grows.

Example:

Redux/

• appConfig/
• --> --> appcofingReducers.ts
• --> --> appConfigModel.ts
• --> --> appConfigSelector.ts
• --> --> appConfigActions.ts

4. Efficient API Layer Organization

Separate the API layer into specific folders for different modules or services, each containing its own API calls, mock data, and types.

Example:

API/

• customApi/
• --> customApi.ts
• --> Route.ts
• types.ts
• mockedData.ts

5. Asset Management

Organize your assets (e.g., images, fonts, icons) in a clear folder structure for easy access and management.

Example:

Assets/

• --> Images/
• --> -->logo.png
• --> --> background.jpg
• --> Icons/
• --> --> menu.svg
• --> --> profile.svg
• --> Fonts/
• --> --> Roboto/
• --> --> Roboto-Bold.ttf
• --> --> Roboto-Regular.ttf

6. Custom Hooks for Reusability

Create custom hooks for shared functionalities such as data fetching, state handling, or utility functions. This helps keep your components clean and focused on presentation.

Example:

Hooks/?

• useFetchData.ts

7. Maintain a Consistent Theming and Styling?Strategy

Centralize theme-related configurations to keep a unified style throughout the app. This includes colors, typography, global styles, and responsive settings.

Example:

Theme/

• colors.ts
• typography.ts
• globalStyling.ts

8. Comprehensive Testing?Strategy

Separate tests based on their type (e.g., unit, integration, E2E) and organize them within folders that mirror the structure of the app. This helps ensure that all aspects of the app are adequately covered by tests.

Example:

__tests__/

• -->unit/
• --> --> Button.test.tsx
• --> integration/
• --> --> HomeScreen.test.tsx
• --> e2e/
• --> --> loginFlow.test.ts

9. Navigation Management

Use a dedicated folder for navigation configuration, which can be broken down by stacks and tabs to keep the navigation system organized.

Example:

Navigation/

• --> AppNavigator.tsx
• --> AuthStack.tsx
• -->MainStack.tsx
• --> BottomTabNavigator.tsx

10. Configuration and Environment Management

Organize configurations and environment settings in a dedicated folder to manage different build environments (e.g., development, testing, production).

Example:

Config/

• appConfig.ts
• environment.ts
• firebaseConfig.ts
• .env

Nothing Speak Better than a real implementation

Real Example: A Boilerplate Open Source to scale your React native?app:

Using the React Native boilerplate, I generated this app just to explain the best approach to scale your app, and the usage of the boilerplate

Check the video here:?

Application Functionality and Best Practices

The architecture of this React Native application is meticulously designed to prioritize scalability and maintainability. Engineered to handle over one million active users monthly, the app delivers a seamless user experience through a modular and well-organized codebase. Adhering to software architecture best practices, the application embraces clean code principles, ensuring each component, service, and utility is well-defined and easily navigable.

The architecture adheres to SOLID principles, emphasizing single responsibility and open/closed design. This approach allows components to be easily modified and extended without impacting existing functionality. For instance, the Redux Toolkit is utilized for efficient state management, providing a clear structure for actions, reducers, and selectors, which simplifies the management of application state across the codebase.

The app is structured to enhance code reusability and readability. React Navigation is employed to facilitate intuitive navigation patterns, enabling users to move seamlessly between different sections of the application. Components are categorized using atomic design principles, fostering a hierarchy that separates atoms, molecules, and organisms for better organization and scalability.

Testing is crucial for ensuring the reliability of the app. Tools like Jest and Detox are integrated to facilitate both unit and end-to-end testing. This rigorous testing approach helps maintain code quality and catch issues early in the development cycle.

Moreover, the application incorporates Fastlane for CI/CD, automating the build and deployment process to streamline updates and feature releases. Utilizing Axios for API interactions and Luxon for date and time management further enhances the app’s robustness and efficiency

CODE FOR THE BOILERPLATE

You find the GitHub code here: https://github.com/chohra-med/scalableReactNativeBoilerplate

Conclusion

In summary, this article has explored the architectural strategies and best practices employed in building a high-performance React Native application capable of supporting over one million active users and a team of 100 developers. By emphasizing clean code, SOLID principles, and modular design, we create a codebase that is not only scalable but also maintainable and efficient.

As you reflect on the insights shared in this article, consider how you can apply these principles to elevate your own development practices. Embrace the opportunity to learn from these architectural strategies, refine your coding skills, and take your React Native applications to the next level. Remember, the key to successful software development lies in crafting a well-structured and thoughtfully architected application that can adapt and grow alongside your user base.

If you need to integrate Advanced functionalities in your Mobile app, create one from scratch, or need consulting in react native. Visit the casainnov.com, check their mobile app page, and contact them there.

I share insights about React Native, React, and Typescript. Follow me on Linkedin or Medium.

#ReactNative #WebSockets #RealTime #MobileDevelopment #AppDevelopment #TechInnovation #Coding #JavaScript #MobileApps #DevCommunity #SocketProgramming #RealTimeCommunication #TechNavy #cleancode?