React Native

Get Started

• Use React Native CLI to install React Native. It requires Xcode or Android Studio to get started. Instruction and all requires here
• Install React Native Debugger or Flipper for ease debug.
  • React Native Debugger - based on official Remote Debugger and provide more functionally. Have a lot devtools for debugging (React DevTools, Redux DevTools, Apollo Client DevTools, Network inspect of Chrome Developer Tools and console).
  • Flipper - is enabled out of the box in React Native version 0.62 and higher. It is more comfortable to use, faster and don't crash. It hasn't Redux DevTools but you can use one of this plugin flipper-rn-redux-inspector-plugin or flipper-plugin-reduxinspector. If you want more plugin, flipper gives opportunity write own JS Plugins

Create a new project use command:

npx react-native init NewProject

Create a new project with TypeScript

npx react-native init NewProject --template react-native-template-typescript

# Install dependencies
yarn install && ( cd ios && pod install )

IOS

# Start in the iOS Simulator
npx react-native run-ios --simulator="iPhone 11"

Android

Before run android you should start the Android Simulator.

• Open Android Studio > Tools > AVD > Run a device
• If you have already created simulator in Android Studio you can use command: ~/Library/Android/sdk/tools/emulator -avd SimulatorName

npx react-native run-android

Architecture

• State managers

  We use Redux for manage global store. It has Flux architecture and it allow shared sate between components using global stores. Also we recommend redux-toolkit. It helps configure Redux store. Provide utils for create reducers, actions and manage store. Has createAsyncThunk func in beta. It allow make async action and call request to API.

• Side effects

  You can use Redux-Sage or Redux-Thunk. Redux-Saga has a lot utils that help you manage you global store with side-effects. Redux-Thunk more simple then redux-saga. Thunks are the middleware for basic Redux side effects logic, including complex synchronous logic that needs access to the store, and simple async logic like AJAX requests.

• Routing in app

  React-Navigation used for manage routing between screen. It docs has a lot example how build navigation structure in app.

• Forms

  When you have few small forms for all project, you can use useState or useReducer and don't install any additional libraries. For app with more difficult forms you can use one of this libraries:

  • Formik - is a component that helps you with building forms. It uses a render props pattern made popular by libraries like React Motion and React Router. 12.7kB. 50% smaller than redux-form
  • React Hook Form - performance, flexible and extensible forms with easy-to-use validation. 8.5kB. ~25% faster than Redux Form

• Recomended File structure

  my-app
  ├── README.md
  ├── node_modules
  ├── package.json
  ├── .gitignore
  ├── index.js
  └── app
      └── assets - assets (image, audio files, ...) used by the application
          ├── fonts
          └── images
      └── components - presentational components
          └── CommonComponent
              └──  __tests__
                  └── CommonComponent-test.js
              ├── index.js
              └── styles.js
      ├── store - redux actions, reducers, selectors + redux config
      ├── navigation - react navigation navigators
      └── screens - the application's screens
          └── SomeScreen
              ├── components
              ├── index.js
              └── styles.js
      ├── theme - base styles for the application
      └── utils - application services, e.g. API clients
  

• Styleguide

  You should use prettier and eslint preconfigured for React Native. Style linters with common rules used that all programmers have the same style of code. Use linter with precommit hooks like husky with lint-staged. It forbid to push files with linter's warnings and errors to repository. Recommend use standard rules that react-native have already included.

  Example .prettierrc with some small changes

  module.exports = {
      bracketSpacing: true,
      jsxBracketSameLine: false,
      singleQuote: true,
      jsxSingleQuote: true,
      trailingComma: 'all',
      semi: true,
      printWidth: 120
  };
  

  Example .eslintrc

  module.exports = {
      root: true,
      extends: '@react-native-community',
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      rules: {
        'jsx-quotes': ["error", "prefer-single"]
      }
    };
  

• Styles

React Native provide StyleSheet for create style of your component. If you want write your style as CSS, you can use style-component or emotion. Style-component and Emotion is better if you need make different themes for one app. But StyleSheet has the best performance.

Recommended

• axios - promise based HTTP client for the browser and node.js
• redux-persist - used for data caching and make offline mode of app.
• react-native-firebase - is the officially recommended collection of packages that brings React Native support for all Firebase services on both Android and iOS apps. (Auth, Analytics, Messages, Notification ...)
• rn-fetch-blob - give access to files and alowe send it as blob.

Useful documentation

• Native Base
• React Native Material Design
• Lottie for React Native
• React Native Camera
• React Native Camera Kit by WIX
• React Native Image Picker
• Redux-Actions as alternative for redux-toolkit
• react-native-config it allows us to set up different configuration files for different environments in as JS as Native code.

Test

Use Detox for end-to-end testing and automation framework for mobile apps. It tests your app while it's running on device/simulator.

Deployment

Our recommended is Fastlane. Using Fastlane to automate builds and store deployments (iOS and Android). Or you can use guide from for Android and for IOS

Utilities

• convert svg to png script
• create request to api script
• fastfile for deploy IOS script