React Native is a great way to learn new skills. An introduction to React Native is what this tutorial is all about, laying the groundwork for you to build a real React Native application. Let’s get started with React Native by creating a simple app that displays a list of countries retrieved from a REST API via a network request. Next, we help you build a real React Native application. This article will teach you how to create an iOS and Android React Native app.
With React Native, Facebook has created a cross-platform mobile development library on top of React. React Native began as a hackathon project at Facebook in 2013 and was made available to the general public in 2015. A single codebase for iOS and Android meant that React Native apps could hardly be distinguished from native apps in the developer community. Many tech companies began using it as a mobile development solution.
What is React Native?
Why Should You Go for React Native Approach?
- All of these platforms are supported by the same code and effort.
- It is well-supported by a large and growing online community.
- It supports customizing the native code to fit your particular use case or business logic.
- Fast Refresh is a feature that I consider to be the app’s sweet spot.
Building your Mobile Application with React Native.
A simple list of countries can be displayed using a React Native app. Because this tutorial aims to walk you through setting up your React Native development environment and getting your feet wet with the React Native programming language, the app will only have one screen.
Experts is going to demonstrate how to build a React Native app using Expo in this post. Inexperienced React Native developers can benefit from Expo’s ability to run and preview React Native apps on their devices.
Install the Expo package.
Expo requires the use of an official document. Then return to this tutorial and follow the next steps to build your first React Native app.
Create a New React Native App.
The first step is to create a brand new React Native app from scratch. When you say yes to Expo’s prompt, it will go to work creating all of the files you’ll need. You can get a sense of the project’s current state by looking at the directory structure.
Run Your First React Native App.
You should now see the new React Native project you created in the previous steps, assuming that Expo was properly set up in those steps.
You’ve now created your first React Native application. I agree that Expo’s default message of “Open App.js to start working on your app” isn’t the best, but we’re going to do as they say and override it. App.js can be opened now.
Before we go any further, I’d like to give a quick recap of what’s going on.
- The styles variable holds various style dictionaries for each component.
- There are import statements that import components to be used and composed to create our parent component App, a React Native Functional Component by default.