📱Native Development
Hello React Native!
Last updated
Hello React Native!
Last updated
React Native is a library, just like react-dom. The native library is used to create native mobile applications using the React.js library, without having the need to learn Swift for iOS devices, or Java/Kotlin for Android devices! Pretty cool stuff right?
So what really goes on Behind-The-Scenes of a react-native app?
The main container within which our UI logic is present, resides inside a custom component provided by react-native, called <View>. Inside of this component, we can then nest many other components provided by react-native, which in the end are compiled to the native code-bases for iOS and android devices!
This compilation of "Views" from react-native to a real native app thus helps in performance of the apps on the native devices.
The react-native library provides a lot of widgets that we can use to build react-native apps, but in the end, it compiles all the custom widgets into the native code for the respective devices! Below are a few examples of the same, comparing the react library for the web, mobile devices and the native mobile components for iOS & android.
React Native maps reusable components to the respective platform equivalents.
So the above section solved how the UI part of our app is compiled to native code. Now for the part where our app logic resides, which will mainly be in JavaScript or TypeScript, will that be compiled to native code as well? Actually, no. Our logic part of the app is separate from the UI part. With that, it essentially means that this part will not be compiled to native code, and will be a part of a mini app within our app, where our JS/TS code logic resides. This is hosted on a special thread hosted by react-native.
Since our JavaScript code isn't compiled into native code, it runs on a special thread which is hosted by react-native, ideally within a Virtual Machine (JavaScript Core). All this is done within the native app, by react-native. This virtual machine (VM) or JavaScript Core knows how to talk to the native platform modules and APIs. So, the operating system our app is running on, communicates with this JavaScript Core VM and the native platform features via a special "bridge", which is automatically provided by react-native.
We'll be using Expo for the rest of this guide since it does not require setup and installation of features, they come inbuilt in Expo!
To speed up development, we need to install the Expo client on our native device or the simulator, so that the Expo app can be easily loaded on to it. We can then also publish our app as an Expo app. But since most of our users won't have the Expo Client app installed, we would need to publish our app as a standalone app as well. This provision is also provided by Expo, to publish our app as a standalone app to the respective native device app store.
