Mashael Althawabi

Posted on Dec 17, 2022

React-Native Useful Tips

#reactnative #react

Hello!

In my first post, I'm going to mention some useful tips I discovered during my first-year career “nearly 9 months” as a Front End developer working with React-Native.

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.
Use a little—or a lot. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.

Let's dive into the tips:

1. Avoid Expo:

The build is done by Expo, it is in their cloud. Also, it is not that capable to handle large projects, and community packages are very less.

2. Console.Log()

Always remember to remove all logs that you make for debugging from your code before the build.

3. Reduce Repetition in Styles:

reusing common styles through your app everywhere we needed. We can also make a different file for colors, font size, and theme which will be reused in the entire App.

4. Style Overriding

Keep in mind, sometimes style overriding is the best solution instead of changing elements in the stylesheet will change style through the app.

5. Flex

Replace height and width using Dimensions with flex, which will prevent efficiency decreases as every time it uses it calculates the size of the whole screen.

6. Ternary operators

It can help reduce the number of lines in your code.
Instead of :

if (condition) {
    returnExpressionIfTrue;
} else {
    returnExpressionIfFalse;
}

Use :

(condition) ? returnExpressionIfTrue : returnExpressionIfFalse;

Example:

let age = 21;
let result;

if(age >= 20){
    result = "User can view content";
} else {
    result = "User cannot view content";
}
console.log(result);

Let's rewrite this if-else block using the ternary operator :

let age = 21;
let result = age >= 20 ? "User can view content" : "User cannot view content";

console.log(result);

7. Keep Components Concise:

Try to keep them in a way that each component corresponds to a single function.

8. Use Capital Letters for Names.

9. Use ESLint:

ESLint statically analyses your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline. Find issues, Fix problems automatically, AND Configure everything.

10. Use Prettier:

It is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

11. Track the Complexity of Your Code:

There are many extensions that could help us such as code metrics, and we can track the complexity of our code.

12. Gather Component Files in One Folder:

It will be easier for the developer to find any part of the code when it needs a quick modification.

13. Bugs

Going through bugs is a normal software development process that you don’t have to be afraid of. What can really threaten software is the unawareness of existing bugs and lack of control over them.

In the end, thanks for reading this post, and if you have any feedback or other useful tips and tricks please do share them.

Resources:
https://reactnative.dev/
https://eslint.org/
https://prettier.io/
https://marketplace.visualstudio.com/itemsitemName=kisstkondoros.vscode-codemetrics

DEV Community