What is React Native? It is a framework for native mobile apps using JavaScript and React. The benefits of using React Native is that whether we want to make iOS or Android app, we can use React Native to write our code base, without using traditional Swift programming language for iOS app, or Java for Android app development. The concentration of code base is really convenient and easy to learn for a smaller mobile app development. Before using React Native, we should have some pre-requisite knowledge of JavaScript and React, it will make our life much easier in terms of learning and using React Native. Today we will dive into the React Native world assuming that we all have the basic understandings of JavaScript and React under our belts.
First thing first, we need to install React Native on our coding device. For simplicity purpose, we are going to start with Expo CLI. The difference between using Expo CLI and React Native CLI is that Expo CLI makes things easier, we are not dealing directly with Native Android or iOS files, Expo CLI created projects will only use JavaScript code and we cannot directly work with a native API for those platforms. But for someone who wants to start learning about mobile app development, Expo CLI is definitely an easier choice in terms of quick hands on approach. More experienced mobile app developers might want to expand their options using React Native CLI while still using JavaScript and React as the foundation of the code base. By the way, the choice of IDE for me is VS code, which I find it very simple and useful in terms of coding environment. First we need to make sure our node version is 12 or higher, node -v will do the trick. Once we figured that part out, we can install Expo CLI using the following command npm i -g expo-cli . Since we are using VS code, I would recommend some important extensions for our React Native app development. React Native Tools developed and maintained by Microsoft, it is a very popular and useful tool to help us debug our React Native app in VS code. React-Native/React/Redux snippet is also a very useful extension to help us with typing shortcuts when we are coding. Prettier-Code formatter is also one of the very popular extension in VS code to give better visualization for our codes. Material Icon Theme is another tool that can give us better visualization and icons for our files.
Once we have installed all the necessary pre-requisites, we can initiate our app by expo init #Name of our app . In our code snippet above, we can see that once we execute this command line, we will be given a few choices of workflow template. For simplicity purpose, we are going to use Managed workflow, which takes care a lot of things behind the scene and makes our learning / app development phase much easier. We won’t see the iOS or android project files using managed workflow blank. We can see from the code snippet below that app.js imported react and few different components from react native. By default in React Native, it uses functional component because it will be simpler and lightweight. We can also incorporate Hooks into React Native, which synergizes well with functional components.
In the code snippet shown above, we can tell that function App returns a JSX expression. We have a View component, which serves like a <div> in HTML, and we also have a Text component, which acts like a <p> in HTML. In react native, we cannot use any HTML elements, therefore we use the components that react native provides us with. StyleSheet is another important component, which is very self explanatory by its name, it helps us with the styles and how our app will look like. With a given example shown below, we are creating a stylesheet with an object called container that defines some properties for our app’s styling. ( Note: these properties are not CSS properties, although it does look like CSS at first glance)
Once we start using React Native, we can run our app by using npm start. This will open up a browser which is our Metro Bundler. This is the JavaScript bundler for react native, it is responsible for compiling all our files into a single place. It gives us a few options of running our app on Android emulator or iOS simulator, before we run the simulator / emulator, we need to install them first. For iOS simulator, we need to have a MacBook, if not using a MacBook, we can run our app on Android emulator or device. Since I have a MacBook, I will demonstrate how to install iOS simulator first.
In apple app store, we first need to find and install Xcode. Once Xcode is installed, we can simply start our simulator from Xcode under Open Developer Tool option, and select Simulator. Once we open our iOS simulator, we can use the tool bar to select Open Simulator and what kind of virtual device we want to use. Currently I am using a iPhone 12 Pro Max as my simulator for the react native app. Once we have the simulator opened up, all we need to do is go back to the Metro Bundler page, and select Run on iOS simulator to load our app onto the simulator. We can also go to our VS code terminal and type i to start iOS simulator app.
Next let’s take a look at how to setup the Android emulator for our app. First thing first, we need to install Android Studio. Once installed, we need setup the android studio by following a standard installation, this will help us pre-determine most of the SDK components that we need to install on our android studio. The image shown below is the standard SDK components that will be downloaded with android studio. Once the installation is completed, go to android studio, open Configure on the bottom right side of the android studio, select SDK manager and we will see all the previous mentioned SDK components that were installed on android studio.
For MacBook users, we need to have another additional steps to properly load our android emulator. Head to website docs.expo.io, on the side menu, select managed workflow and then android studio emulator. This will give us the instructions to properly run a android emulator on MacBook. Follow the exact instructions provided to add the Android SDK location to our app PATH. Once it is completed, we can go back to Android Studio and Configure, select AVD Manager, which stands for Android Virtual Device Manager. Once we opened it, we can create a virtual emulator, the easiest device to use for emulator would be the latest Pixel phone with Google Play Store available. Once the virtual device is ready, we simply go back to the Metro Bundler to select Run on Android device/emulator, or press a in our VS code terminal to connect with the emulator.
I know I have merely scratched the surface of React Native mobile app development, there are a lot more to be learned and a lot to be explored! I will include some resources and links for further reading and learning! Thanks for reading and have a wonderful day!
