React-Native Top Tips

Hi there !!

I am back with a new Blog. So this time I will cover some interesting tips about React-Native which is a framework of JavaScript.
So let's go with 🐱 Suga this time :

React-Native Top Tips :

Before moving further, let's first discuss what React-Native is ? And what is its use ?

React-Native :

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, iOS, Web, Windows etc. by enabling developers to use the React framework along with native platform capabilities.

Top Tips :

Don’t go with Expo : I know it's not wise to say 'Don't use Expo'. But this is the actual reality. Starting with Expo is good, but stick to it, not. Almost all tech giants don't go with Expo as it's not that much capable to handle large projects. Also, community packages also very less.

Remove all logs from your release builds : I think in this world, there is no such developer exist who don't use console.log() for debugging. Also, it's very powerful tool but at the same time if one forget to remove console while packaging or releasing App then it will slow down our App.

Use flex : If one want's that our App works efficiently, then one must rely on flex instead of excessively using
Height and Width using Dimensions. Using Dimension is good as it makes our App responsive but at the same time dependent on it is very painful as it will decrease the efficiency of App as every time it used it calculate the size of whole screen and apply height and width according to our selection which increase memory usage and thus efficiency decreases.

Reuse Styles : Reusing styles is a good practice in React-Native and reduce the repetitive code lines. For example, in every screen we are giving some style to Starting View. So in every screen instead of typing styles of that View again and again one should create a common style JavaScript file and use it everywhere we needed. We can also make different file for Colors, font Size, Card Style which will be reused in the entire App.

Use ternary operators concisely :
Writing color = error ? ‘red’: ‘gray’ is short and sweet.
Writing color = error ? (id === ID) ? ‘red’ : ‘black’ : ‘gray’ is not.
Ternary operators can help reduce the number of lines in your code, but never nest them because the logic becomes difficult to read.

React-Native Doctor : react-native doctor (available as a part of React Native 0.62) is an extremely useful command to help us to fix problems with your development environment.

Style Overriding : Style Overriding is my one of the favourite tip. In this, one can override the style without changing the element in StyleSheet. Below is the syntax of it.

<View style={[styles.container , {backgroundColor : "purple"}]}>  
....
</View>

So that's it for today's blog. I will come up with another interesting blog with BTS 🧡 .