React Native Integrations App

About...

• Ilustrate a basic React Native app functionallity.
• Goal: Support some esential libraries and a few implementations needed to be ready to start a new RN App.

Project default configurations

• React Native CLI
• Language: Typescript
• Linting tool: EsLint Recommendation: Install ESLint extension.
  • Organize imports: eslint-plugin-import
• Code formatter: Prettier ESLint Recommendation: Install Prettier ESLint extension.
• Styling lib: emotion/native

Setup

Follow this guide for React Native CLI - macOS - iOS and android

Uses

• React Native v0.70.1
• Node v16.10.0 (Look at .node-version)
• Ruby v3.0.5 (Look at .ruby-version)

Steps to Run

yarn install

cd ios

bundle install

pod install

Android

Development Environment

yarn android_dev

QA Environment

yarn android_qa

Production Environment

yarn android_prod

ios

Development Environment

yarn ios_dev

QA Environment

yarn ios_qa

Production Environment

yarn ios_prod

Implementations

• Environments handling with [react-native-config] (https://github.com/luggit/react-native-config)
• Strings Localization
• Theming with emotion and custom
• UI Testing: Jest snapshots
• Storybook to UI components visualization and documentation storybook
• State management: Redux Toolkit
• Services: RKT Query Redux Toolkit package: Allows to handle fetching functionality like: save the data in the store, managing states fetching, error, result, caching, etc.

Steps to launch storybook

In index.js file:

• Temporary comment line 6 to 10.
• Temporary uncomment line 13.
• Then run storybook and the app.

yarn storybook

yarn ios_dev

or

yarn android_dev

You should be able to select the stories in the localhost and see the component rendered in the simulator/emulator.