Getting started with React Native? Read this first !

Few months back, I started my journey with React Native. I found it both challenging and satisfying at the same time. Getting started with React Native isn’t as smooth a ride as with many other frameworks, but once you get past that, you get comfortable pretty soon (especially if you are already competent in Javascript). Here are a few things that I learnt along the way which would be helpful to you if you are also starting out on a React Native journey.

1. Usage of && operator for conditional rendering
   To conditionally render components, it is very common to use && operator in React. For example, let’s say we want to show user details (using UserDetails component) when the user is logged in. We can do it as below

   

   How this works is that if the value before the && operator is truthy (new JS lingo? check this out), then the value to the right of && operator is rendered.

   However, you need to be extra careful when using && operator. Let’s say inside the UserDetails component, we want to show the email address of the user only when it is present. So we can again use the same && operator as below

   

   But wait, if emailAddress is a blank string, then your app would crash. Yes, it would really crash. This is because in react native every string (even empty string) needs to be in a tag to be rendered to the screen. So when the emailAddress is a blank string, it evaluates to falsy value and thus the tag to the right of && operator doesn’t get displayed, instead the app tries to render the emailAddress string directly which has the value of “” and it crashes.

   Same is the case with conditional rendering based on integers. For example you want to show the price only when it isn’t zero. You may do it as below

   

   This again would crash the app if the product.price has the value 0, again because of the same reason.

   Okay, so how do we solve this problem ? Well, we have two simple ways
   1. Ensure that the value to the left of && operator is a boolean value.
   2. Use ternary operator

   

2. Different behaviour on Android and iOS
   

   Always keep in mind that although most the code that works on android would directly work on iOS and vice versa, however, there will be some things that would behave differently. For example, shadow and elevation behaves differently on android and iOS.

   Also native components may behave differently on Android and iOS. For example, ‘Picker’ component behaves differently on Android and iOS.

   

   
3. Always try to break components into smaller components
   There are times when we feel like there isn’t a need to make a separate component for a small part of the screen. However, most of the time it is a good idea to move that to a separate component. It helps you in many ways in long term

   1. Its easy to refactor code (if needed) at a later stage.
   2. Moving/modifying a part of screen is easier since it is already independent
   3. Your code is free from unnecessary tight coupling of different intents

   Refer to official docs at this for an example.

4. Try to have images load from CDN
   
   This one is more of a general guideline to follow when working on mobile apps. The prime difference in Web App Development and Mobile App Development is the flexibility of updating/fixing your apps. In case of Web Apps, you are free to send updates whenever you want and people get them almost instantly. However, in case of Mobile Apps, once you update the app from your end, it is upto the users when they finally update their app and get the latest version. Also, sending updates very frequently might also piss off your users when they have to update your app frequently.

   Now coming back to the topic of loading image from CDN, it is considered a best practice to always load images from CDN because of following reasons.
   1. Reduced APK size
   2. Users on older app versions get updated icons/images instantly.

One specific issue which I faced was where I had some background images for each tag in the app. I wanted to introduce a new tag. I was able to introduce the new tag easily by making some changes in the backend. But wait, what about the background image of that newly added tag? I realised that the background image for this new tag wasn’t there in the app resources and thus, even if I send in a new update with that image added, people on older version would still get to see the that tag without a background image.

Let me know your views and experience of working with React Native in the comments below. Feel free to reach out to me on LinkedIn.