ReactNative Best Practices & Libs 2020

Most of the things you should to know about React-Native in 2020

Best Practices

Platform-specific styles

https://reactnative.dev/docs/platform-specific-code#platform-module

Platform-specific modules

For example, say you have the following files in your project:

BigButton.ios.js
BigButton.android.js

You can then require the component as follows:

import BigButton from './BigButton';

Use React-Redux and for more hard cases React-Saga

It will make your logic more predictable and straightforward that will help you not to die in cross-calls hell.

Use Class Component For Stateless and Stateful Components

Functional components is not faster.

Component Rendering Performance in React

Using PureComponent for the boost

https://reactjs.org/docs/react-api.html#reactpurecomponent

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

Lock Dependencies, Prevent The Breaking Changes

Always use fixed dependencies:

"react-native-img-cache": "1.5.3",
"react-native-fetch-blob": "0.10.7",
"react-native-linear-gradient": "2.3.0"

and don’t do like this:

"react-native-img-cache": "^1.5.3",
"react-native-fetch-blob": "^0.10.7",
"react-native-linear-gradient": "^2.3.0"

And don’t forget about Android and iOS dependencies.

This will save you hair on your head.

Make importing better

Many of you saw things like that:

import TextComponent from "../../../ComponentFolder/TextComponent"

You can fix this by adding package.json to the ComponentFolder with content:

{
   "name":"@components"
}

Now you can import your components from everywhere like that:

import TextComponent from "@components/TextComponent"

Much better, yeah?

Optimization

wix/react-native-crash-course

Optimizing Performance - React

Performance · React Native

Components reuse in the Company

Share reusable code components as a team · Bit

Courses

Redux!? Mobx!? It’s time to Fall In Love with Remx

wix/react-native-crash-course

Libs

Redux VS Remx

Remx is simpler with code reuse, Redux uses more boilerplate code and linked to many libraries.

Navigation

There are two best ways:

• use React-Native Navigation that uses native elements, but harder to use.
  Bootstrap here
• use React Navigation that uses js thread, but simpler to use

UI libs

RNUILIB

NativeBase | Essential cross-platform UI components for React Native

react-native-training/react-native-elements

Libs

wix/react-native-camera-kit