How come React Native is so Native?
Before diving into the pool of React Native, I was curious to know how this thing really works under the hood. After all, developers can’t stand any black box and seeing through any abstraction is their favorite part. I went through the docs, lectures and conferences before using any of the React Native components. In this blog, I will be sharing my learning with you and I hope you enjoy it.
I will illustrate the magic of React Native using two spheres-
This is where developers have been playing with Objective C/Swift in iOS and Java/Kotlin in Android. React Native uses the same sphere to render all of its views and it’s done on the main thread. This sphere keeps the native feel intact so that it’s hard to tell whether the app is written in native language or React Native.
Both spheres play their part at lightning speed. React Native then devised “the bridge” to connect these two code containers and give developers a superpower:
“Write once, run anywhere and keep it native”
You guys must be wondering “What’s so special about this bridge?”
Well, let’s take a glance at how this wisely designed component works-
Serialization- Any communication over the bridge includes exchange of serializable messages. Question arises why React Native didn’t let both spheres share the data? Let’s discuss limitations to this approach. Code execution in both spheres is independent of each other. If data is shared, it can get very difficult to ensure when to release the allocated memory. This will eventually result in memory leaks.
Another outcome is data corruption, in case both spheres simultaneously read/write the shared data. Though It can be synchronized in order to avoid the conflict. But, this will allow only one sphere to access the data at a time. Another sphere will have to keep waiting for the access thereby hampering its seamless code execution.
( ✘ ) 4 passes over the bridge
Code block 1 — -> Code block 1
Code block 2 — -> Code block 2
Code block 3 — -> Code block 3
Code block 4 — -> Code block 4
( ✓ ) 2 passes over the bridge
Code block 1 ] \ _ _ Code block 1
Code block 2 ] / Code block 2
Code block 3 ] \ _ _ Code block 3
Code block 4 ] / Code block 4
Now it must be clear to you that React Native is a brilliantly designed framework giving new dimension to cross platform mobile app development. Gaining huge popularity over a small interval of time marks the initial phase of its success. Developers from all over the world are actively contributing to the framework and its modules. Whether you are a web or mobile developer, you should give it a try and share your experience in comments .
Hope you guys enjoyed reading it. There is a lot more to come in my next blog post. I have been developing apps for iOS since 3 years and will share my experience on starting development with React Native. I will also share a comparison on how features/functionalities in React Native differ from that of iOS. This will help you guys get an idea how your life will be when you head to React Native from iOS.