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

wednesday-solutions / react-native-template Goto Github PK