How to Create a Mobile App with React Native?
Mobile has become a big part of our daily lives. It is always with us wherever we go. As mobile is getting more versatile and dynamic, more developers start to explore building mobile apps. There are several ways you can create a mobile app, but today, I would like to introduce one of the simplest ways you can start creating your own mobile development with React Native.
What is React Native?
React Native is a JavaScript framework for rendering mobile applications for both iOS and Android. It feels very intimidating to create a mobile app, but if you have any experience with React, it is very simple to adapt to React Native syntax. It is because React Native is based on React, which is Facebook’s JavaScript library for user interfaces. Instead of targeting browsers like React, React Native targets mobile platforms.
One of the many pros of using React Native is the shorter development time to build an app. This framework provides numerous built-in components that are ready to be used on the go. React Native still lacks some solutions, but their community is constantly growing, and Facebook introduces new updates regularly. The biggest selling point in my opinion for React Native is the ability to support multiple platforms with just one framework. Being able to reuse the codebase between iOS and Android is a big plus because it provides flexibility and consistency of your app between all supported platforms.
You may have not noticed but there are a lot of companies out there that use React Native for their mobile app platform. Some of the mobile apps that use React Native framework includes but not limited to:
Before going into a tutorial on how to start a React Native project, we need to first touch on the difference between Expo and React Native CLI (Command Line Interface).
Expo vs React Native CLI
React Native provides two methods for initializing and developing your mobile app: Expo or React Native CLI.
React Native CLI provides a plain React Native project for you with separate projects for iOS and Android. You create your project as you want writing native code for each platform. The major downside of using React Native CLI is that you have to setup build chains for both platforms on your system. Android Studio for Android and Xcode for iOS to test what you have built so far. In addition, setting up a working project properly is a bit complicated and can take some time.
On the other hand, Expo is a free open-source project that provides developers with a tool to build React Native projects. The major advantage of using Expo is that you don’t have to set up separate tools for iOS and Android, and setting up a project is very easy. Also, Expo provides access to numerous native APIs that you don’t have to write your own. The downside of using Expo is that you cannot integrate a third-party native library.
In this walkthrough, I will introduce you to steps on how to build a basic React Native app using Expo CLI that you can run on either your computer simulator or on your iOS device.
Basic Setup:
- Make sure you have Node.js 12 version or higher running in your system. Check your version by running node-v. If you haven’t already done so, click here to install or update your node version.
- Install XCode on your Mac for simulation purposes.
- Install Expo Client on your iOS or Android phone from the app store, so you can test your project on your actual device.
- Install Expo CLI globally in your system by running the command below:
npm install -g expo cli
Create a Project:
- To create a new React Native Project, run the following command. Please don’t forget your project name after init.
expo init <your-project-name>
2. Once you run the command above, you will have your terminal look like this:
3. You can select a blank template to start your app. After installing all dependencies to run React Native, you will see the message like below:
4. You can open to see the code by changing the directory to the new project folder you just created.
cd <your-project-name>
code .
Preview your Project
To preview your project on Expo, you can simply type expo start on your code terminal. This will launch the Expo Developer Tool in your browser like this:
Click on “Run on iOS simulator” and this will open XCode Simulator app to view your current project app.
Tada! It’s that simple!
Publish Your Project
To publish a project you worked on, you can click the Publish or Republish project button in Expo Dev Tools. This feature is all Expo built-in functionality, so no setup is required. Once you click the button, you will see the following screen:
After filling out the necessary information, click on Publish Project button. Depends on the size of the project, the amount of time it takes to publish will vary. When you do this, the packager will create two different versions of your code, one for iOS and one for Android, and then upload those to a CDN. Then you will also receive a link like https://exp.host/@name/projectname:
Any time you want to deploy an updated version, you can simply click the Publish Project button again. Then the updated version of the project will be available immediately.
You can also test on your mobile device by simply scanning the QR codes on the bottom of the Expo Developer Tool using the camera. It will open the Expo app and load your project on your device.
Hint: On your Expo app, press CMD + D to open the developer menu. Some of the user controls include:
— Reload your app just in case something goes wrong
— Open Debug Remote JS to see any errors in the console
— Go to Home to check all of your Expo projects you have been working on
It’s that simple to get your mobile app running! React Native and Expo CLI just makes everything that much easier. Anyone without any native mobile coding experiences can easily start the project on their own. These technologies are a great way to get your feet wet with mobile development and expands your platform.
There are infinite ways you can make your app unique! Your journey to create an awesome mobile app starts now!
