Every day, most people spend their time on mobile devices, especially when it comes to shopping and entertainment. Big giants like Amazon, Walmart, and eBay have already captured their presence on mobile devices.
There are more than 7,950,000,000 mobile users on the planet, and if you want your business to succeed, you should have a mobile app in addition to your website.
React Native is a JavaScript framework that allows you to create real-time, natively rendered mobile apps for iOS and Android platforms. It's built on React, Facebook's JavaScript toolkit for creating user interfaces, although it's designed for mobile platforms rather than the web.
However, in this tutorial, we will convert the web view of the website into a mobile app.
Step 1: Node JS Installation
Node.js is a framework for easily creating fast and scalable network applications based on Chrome's JavaScript runtime. Since Node.js uses a non-blocking I/O approach and event-driven, that makes the app lightweight and efficient. NodeJs app is ideal for data-intensive real-time applications that operate across multiple devices.
You can download and install the NodeJS package and npm from its official website – Nodejs.
Step 2: Expo Installation
Expo is a universal React application framework and platform. It's a set of tools and services centered on React Native and native platforms that allow you to create, build, deploy, and iterate on iOS, Android, and web apps using the same JavaScript/TypeScript codebase.
The quickest way to install expo is using NPM, just open your terminal and write npm install --global expo-cli
Step 3: App Initialization
Open your terminal and write expo init.
This will generate a simple one-screen app using React Native.
Once your app is created, navigate to your app folder using cd [your-app-name] and execute the expo start command.
Expo CLI starts Metro Bundler, an HTTP server that compiles our app's JavaScript code using Babel and feeds it to the Expo app when you execute expo start (or npm start). Expo Dev Tools, a graphical interface for Expo CLI, appears as well.
Download and install the Expo Go app on your phone, then open it and select "Scan QR Code" from the "Projects" tab to scan the QR code you see in the terminal or in Expo Dev Tools.
Step 4: Converting Website to an App
Open your terminal and install react-native-webview by running the given command.
expo install react-native-webview
Once it is done, open your app's folder in any code editor such as VS code and in app.js paste the following code and save it.
import * as React from "react";
import { WebView } from "react-native-webview";
export default class App extends React.Component {
render() {
return (
<WebView source={{ uri: {your-website-link} }} style={{ marginTop: 20 }} />
);
}
}
Step 5: Building Android and iOS App
To build Android and iOS apps, you need to write the below command in your terminal:
You can view your app in your expo dashboard at expo.io.
That’s it. We are done :)
I know, it is a bit confusing but, Hope you understand.