Skip to content

Latest commit

 

History

History
153 lines (101 loc) · 8.28 KB

README.md

File metadata and controls

153 lines (101 loc) · 8.28 KB
Raw

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:

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

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:

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

Package dependencies