React Native Template

An enterprise React Native template application showcasing - Testing strategies, Global state management, middleware support, a network layer, component library integration, localization, navigation configuration, Continuous integration, analytics, feature flagging, and error tracking.

---

Expert teams of digital product strategists, developers, and designers.

---

We’re always looking for people who value their work, so come and join us. We are hiring!

Architecture

The driving goal of the architecture of the template is separation of concerns. Namely:

• Presentational components are separated from scenes (aka "screens").

  Presentational components are small components that are concerned with how things look. Scenes usually define whole application screens and are concerned with how things work: they include presentational components and wire everything together.

  If you are interested you can read more about it here.

Atomic Design for react native architecture

Atomic design further solidifies the idea of separating screens into components and scenes (containers). The design primarily focuses on reusability of code, which brings us to the differentiation of components into atoms, molecules, and organisms. Analogous to the Atomic design of chemicals, components are separated by their composition. The components require increasing context as their complexity increases, since each component is tested, this promotes a more granular test coverage.

• Atoms
  Atoms are the smallest components that can be reused. Button, Text, and Icons are good examples of Atoms. Atoms can be used without context and cannot be further divided.

• Molecules
  Molecules are built from one or more atoms that are slightly complex presentational components.

• Organisms
  Organisms contain multiple molecules, atoms, and perform a specific purpose. In the example screen, an organism is used that displays the fetched character and quote.

• State is managed using Recoil.

  Recoil provides a set of utilities to manage global state in React Native. It allows for atoms (the smallest units of state) and selectors (to transform or combine state) to handle the app's state efficiently. This eliminates the need for Redux, actions, and reducers, simplifying the process for managing state across components.

  Atoms are the core units of state, and selectors are derived state values computed from one or more atoms. Recoil's state management is highly reactive and more efficient for handling state at a granular level.

  If you are interested you can read more about it here.

• Side Effects (API calls, etc.) are managed within components or with Recoil selectors.

  Recoil allows for managing side effects within the components themselves or through asynchronous selectors. This keeps your side effects closer to where they are needed.

Analytics, Feature Flagging, and Error Tracking

• PostHog is integrated to provide analytics and event tracking across the application. PostHog captures user interactions and events, which helps in analyzing user behavior and improving the app based on data-driven insights.

• GrowthBook is used for feature flagging. With GrowthBook, you can easily manage the rollout of features to users, enabling A/B testing, and controlling which features are visible to which segments of your user base without redeploying the app.

• Sentry is used for error tracking and reporting. Sentry captures errors and exceptions from the app in real time, providing detailed insights into the errors that occur, enabling faster bug fixing and better app stability.

Content

The React Native Template contains:

• a React Native (v0.73.6) application (in "ejected" mode to allow using dependencies that rely on native code)
• a clear directory layout to provide a base architecture for your application
• Recoil to manage global state
• React Navigation (v5.3.15) with a NavigationService to handle routing and navigation in the app, with a splash screen setup by default
• axios to make API calls (v0.27.2)
• PostHog for analytics
• GrowthBook for feature flagging
• Sentry for error tracking
• prettier and eslint preconfigured for React Native

The template includes an example (displaying fake user data) from UI components to state management using Recoil. The example is easy to remove so that it doesn't get in the way.

Directory layout

• app/components: presentational components
• app/components/atoms: smallest components
• app/components/molecules: molecules are a group of one or more atoms
• app/components/organisms: organisms are one or more molecules
• app/scenes: scenes are screens that can be navigated to
• app/config: configuration of the application
• app/assets: assets (image, audio files, ...) used by the application
• app/navigators: react navigation navigators
• app/services: application services, e.g. API clients
• app/utils: Util methods and constants
• app/themes: base styles for the application

For more information on each directory, click the link and read the directory's README.

Requirements

Node 8 or greater is required. Development for iOS requires a Mac and Xcode 9 or up, and will target iOS 9 and up.

You also need to install the dependencies required by React Native:

• for Android development
• for iOS development

Using the template

To create a new project using the template:

• clone this repository
• remove the previous git history: yarn initialize
• install the npm dependencies by running yarn
• rename the React Native project to your own project name: yarn run rename -- <YourProjectName> (the default name is ReactNativeApplication)
• remove the LICENSE file and the "License" section from the README if your project is not open source

Running expo project

Android

• yarn run android

iOS

• yarn run ios

Useful documentation

Deployment

• Using Fastlane to automate builds and store deployments (iOS and Android)
  • Distributing beta builds

Package dependencies

• You may want to use CocoaPods to manage your dependencies (iOS only)
  • Using CocoaPods to manage your package dependencies