How to Wrap React Websites in a Native App


How to Wrap React Website in a Native App

Table of Contents

how to wrap react website in a native app
How to wrap react website in a native app ?

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 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
Download and install the Expo Go app on your phone. After installing it press the Scan QR Code on the Projects tab of the Expo Go app. Scan the qr code present in the terminal or in the Expo Dev Tools.

Step 4- Converting our app to website :

On the terminal install the react-native-weview by running the command.

  • expo install react-native-webview
As it is done, in any code editor such as VS code open your app’s folder and paste the given code and save it in the app.js.

import * as React from “react”;

import { WebView } from “react-native-webview”;

export default class App extends React.Component {

  render() {

    return (


      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
And here we are done.


You may also like our previous articles : 


Post Tags

Share This :