How to Wrap React Website in a Native App
Table of Contents
Before learning how to wrap react website in a native app take a look at what is react native?
What is React Native?
It is an open-source mobile app development framework. React Native depends on the JavaScript programming language. React Native is developed and maintained by Facebook. The developers who build the native as well as cross-platform mobile apps, consider react native as the ideal platform. On 26th March, 2020 the most recent version of the React Native was released and it is already loved by everyone. React Native has the main Feature of being able to deliver a completely native experience. This is due to its components that interact with the native APIs.
Below are the steps mentioned on how to wrap react website in a native app:-
Step 1- Node. JS Installing :
Download the latest stable version of the Node.JS in your computer by accessing the nodejs.org. Node.JS utilizes the event-driven, non-blocking I/O model so it is a lightweight and efficient framework that is best for the data-intensive real-time apps that run around the distributed devices.
step 2- Installing Expo :
Use NPM to install the Expo rapidly. Open your terminal and write npm install–global expo-cli. The framework and platform of the expo uses global React applications. It contains the set of tools and services built around the React Native and native platform that aids you in the development, building, deploying, and iterating quickly on iOS, Android and web apps from the codebase of JavaScript/TypeScript.
step 3- Initializing our App :
On the terminal write
- expo init
Using React Native, this will generate a simple one screen.
After the creation of the app, use
- cd your-app-name
For the navigation to your app and run.
- expo start
Step 4- Converting our app to website :
On the terminal install the react-native-weview by running the command.
- expo install react-native-webview
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 the Android and IOS app :
In your terminal write down the command for building the Android and IOS app
For Andriod:- expo build:android
For IOS : expo build:ios
The app can be reviewed in your expo dashboard at expo.io
And here we are done.
You may also like our previous articles :
