ReactNative Best Practices & Libs 2020

Andrey Nikishaev
3 min readMar 19, 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.

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

Components reuse in the Company

Courses

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:

UI libs

Libs

--

--