Do you know the number of mobile apps downloaded in just this last year? Well, we downloaded around 204 billion apps and spent somewhere near $120 billion on apps, subscriptions, and other in-app spendings! So I don’t need to reiterate on how important it is for your business to have a mobile app and so forth. Want to understand how to create a react native app and what role the react native framework plays in this? Let’s begin:
There are a number of technologies available to build your app, the ones most widely used today are:
- Native languages for Android (Java/Kotlin) and iOS (Objective C, Swift)
- React Native
- Apache Cordova and Cordova Tools (PhoneGap, Ionic, etc.)
- Xamarin
- Flutter
Considering you want your mobile app to reach millions of people, you have to release your app on both Google Play and App Store. The best way today to do this is by building a cross-platform application.
If you look at the popularity of the various cross-platform application development frameworks, you will notice that React Native framework is kind of on the top followed closely by Flutter. It has been used by startups like Airbnb and UberEats and giants like Walmart, Tesla, and Facebook. That’s the reason why we shall look at What is React Native, it’s pros and cons and then we will create a react native app, a basic one just to get you started with react native.
What is React Native?
React Native, released by Facebook is a JavaScript framework that is used for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library which can be used for building user interfaces for web browsers. Instead of web browsers, React Native targets mobile platforms.
React Native framework is one of the most popular cross-platform mobile app development frameworks and allows upto 90% code reusability between Android and iOS applications. Well, to achieve this 90% code reusability, you will probably need to hire the best React Native developers.
High Performance: React Native applications have high performance because they are compiled into natively written code. This allows developers to create react native apps that function natively on both the operating systems.
Native UI: One of the main features of React Native framework is that it provides a selection of Native UI components that you can choose from which give the feel of Native apps.
Modular Architecture: The whole code can be broken down into several independent units. This feature of React Native allows for a lot of development flexibility, and makes upgrades and updates easy for React Native developers.
Ready-made Solutions and Libraries: React Native was first released on GitHub in 2013. Since then react native developers have been building tools and libraries for a variety of processes. There are also different frameworks available for testing, tools for type checking, technologies for workflow setup, etc. This makes for easier and quicker development.
Third-party Support: Since React Native framework has been in the market for quite some time now and its backed and supported by Facebook, many third-party services have created APIs and plugins for maps, payment systems, graphics, etc. that can be easily called in your react native applications.
Hot Reloading: This feature of React Native allows developers to see changes they make in real time.
Great Community and Ecosystem: React Native has 59K stars on GitHub, which by far is way more than any of its competing frameworks like Ionic (33.3K) and Xamarin (3.6K). It has a huge community which keeps on adding more libraries and functions of their peers.
Disadvantages of Using React Native
Still Immature — Compared to Java or Objective C, React Native is very young. This leads to frequent updates which can be a problem at times as react native developers will need to keep updating and making changes to their app. You may also end up writing separate code for some components that are not yet compatible with React Native.
Initialisation Time — It can take some time for initializing the runtime before it can be rendered initially. This is because of the JavaScript thread which takes time to initialize.
Memory Management — Float computations are not dealt in an efficient manner in Javascript because of which memory management can be an issue. Which is the reason React Native framework is not considered the best choice for highly computational applications.
Some of our Favourite React Native apps
Some big brands and startups alike have benefited from creating apps in react native. Some of them are Walmart, Tesla, Airbnb. Read this for more details on why these companies choose react native.
Create React Native App
Let’s build a React Native app to display a simple list of countries in the world. A simple one with basic layout and styling. All we will do is get you started on your 1st project by helping you set up a React Native developer environment and create a react native app in its most basic form.
Tool Used — Expo (you can run and preview React Native apps on your devices easily.)
Step 1. Install Expo
Let’s begin with building your first react native app. Here’s the official documentation on how to install Expo.
Step 2. Create a New React Native App
Run the following command the GUI and you will have built your first react native app:
expo init firstapp
Select ‘blank‘ project
Click on ‘Y‘ to work with yarn.
Yarn v1.19.2 found. Use Yarn to install dependencies? (Y/n)
Y. Now Expo will create all the necessary files needed for your project. Look at the directory structure to understand what these files are.
Step 3. Run Your First React Native App
You have created your first react native project but now you need to run it. Use the following command:
cd firstappyarn start
This is how your app will appear:
That’s it, you have created a react native app in under 10 mins.
The message you see on your app is ‘Open up App.js to start working on your app‘ and that’s exactly what we are gonna do.
Let’s see what App.js file looks like:
What’s happening here:
- The variable style — contains various style dicts of the components
- The function App — React Native Functional Component, this is the default and renders what we are currently seeing on our screen
- Import statements — at the top consists of the import components to be used to create our parent component App.
Step 4. Add List of Countries
Time to actually get some relevant info on the screen. Let’s rewrite this dummy screen with what we want to display, which is a list of countries.
So what have we done?
We have just updated our App.js and added a few things:
- A Flatlist — display the list of countries
- A dummy dataset — to be displayed in the list
- Style Object — contains the style we want to use for our text
Run your react native app and this is what you should see:
Awesome..!! You are sort of there, but you see the data we are displaying is static, and we should use a dynamic list which should automatically be reflected in the UI. So we need to change that and we want the UI to be reactive to any change in the data model.
This occurs under the state concept of React Native, which is sort of it’s core.
What’s the state concept? A React Native component holds data in its state, and whenever the state changes, the UI is re-rendered to reflect those changes.
To implement this, let’s add a state variable, named countriesData which will store the dynamic list of countries.
The useState function is called a “hook” in React Native.
We just declared a state for countriesData with default value = empty array [] and a function setCountriesData which will update the value of countriesData.
For example, calling setCountriesData([1,2,3,]) will update the value of countriesData to [1,2,3,].
It may seem a little intimidating for a sec, but give it time to sink in. We are using the fetch API to retrieve countries data from an API endpoint with African countries.
The function returns a JSON object, which we parse in the then() clause of the fetch method. Once parsed successfully, we update the countriesData state variable with the new list of countries. Now we should see our app as:
Step 5. Styling Your First React Native App
Design is always a crucial part of any application. So let’s get to the design part of our react native app now.
What have we done?
Change background color — to purple by providing backgroundColor attribute with ‘#483D8B’ hex code.
The styling is pretty much similar to that in CSS. So if you know a little bit of CSS you should be able to do this much easily.
Final Thoughts
We at Systango generally prefer to use cross-platform technologies especially React Native when building MVPs. React Native has 3 most important benefits in terms of development — its ease of adoption, human resources and speed of development. Or if you after creating your first react native app, you think you have the knack for it, try building your own app, react native has a huge community who can help in case you get lost.
