Basic Things You Should Pay Attention When Developing a React Native Application (From The Beginner Perspective)

I have some project in mind which require me to build some cross-platform mobile application. I have a few experiences with android but zero in iOS and enough experience in web application. So, the solution is React Native. React Native is a React js version for a mobile app to build an application with just a javascript (and JSX). If you already have experiences in the web application, you must be familiar with javascript. This is one of the reasons why I choosing React Native instead of fluter to build this app.

At my time of trying to learn this tool, I found some discover that I wish me in the future could tell me about this so my learning experience becomes very smooth. So, here the list.

1. If you have low spec PC, use Expo. Don’t ever think of using an android or iOS simulator (I don’t know, it’s iOS have a simulator like android? Since I never use or develop iOS app) if your PC has a low spec, like have a RAM below 8 GB, it just makes you force shutdown your PC (press power button few seconds). Physically connect with your phone? Go ahead if you want to waste your time a minute for waiting to transfer and installing the app and found you have a minor typo in your code, so you fix it, waiting again and error again because there is another typo. Phew, so tired! Remain 2 option, Expo, and Snack (a.k.a expo in the browser). Using Snack, you don't need to install anything in your PC, just built it your app in the browser. But, it will cost you a lot of RAM (your computer will suddenly freeze). To make it lighter, you must close all unnecessary tab. Using Expo similar to physically connect your phone, but here you don't need a cable and transfer and installing process is faster. When there is a typo, it will immediately raise an error message so you can fix it faster and run it again. You just have to make sure that your phone and PC are connected in 1 network (connected together in the same router or just make a tethering connection between your phone and your PC).
2. There must be 1 container (View, ScrollView, FlatList) that contain all of the other components. If you violate this, you will get error message ‘Adjacent JSX element must be wrapped in an enclosing tag. Even when you assign some component in a variable, there must be 1 container that wraps them all.
3. position: ‘absolute’ make your view stack on the top of another view, be careful! Just try it yourself.
4. When you assign a number for the props in certain component, you must bundle that number with {}. You don't need it for string parameter (a parameter that bundled with ‘’ or “”). Because I am still new to React Native, I still find it strange.
5. Your ScrollView will not work if you bundle it with a vanilla View. A vanilla View has a static size so it will not compatible with ScrollView that have a dynamic size (from my understanding as a newcomer of course).
6. The correct way to generate complex components (the component which is composed of other components) is to use map functions and create a new component class of that complex component. I think it’s a norm in React Native.
7. Some feature doesn't support either in android or iOS. The real example is when I write this article, android doesn’t support backface visibility. So when I use flip animation for my modal entry animation, it produces an error message saying “Error while updating property ‘backfaceVisibility’ of a view managed by: RCTView”. It doesn’t show you what line in your code that causes that error so it will be very confusing when you have a complex code. Luckily, I realize that 1 of my animation called “flip” so I think it’s must be the culprit and I was right.
8. Learning the lifecycle of Component in React Native will make your life easier. From my experience, the behavior of your app almost always turn out to be unexpected until I learn the lifecycle of components in this framework.

Mount cycle of components in React Native (source: https://blog.usejournal.com/understanding-react-native-component-lifecycle-api-d78e06870c6d)

And that’s it. I will update this list when I found something interesting in my journey of React Native. See you in another post.