[10 Lines of Code] Convert Your Website into an App Using React-Native WebView for FREE

As part of the react-native app development series, in the previous two tutorials, we have learned

• How to set up react-native on your Mac?
• Create React-Native App using Expo Tool

In this tutorial, I will explain how you can convert your website into a react-native app with just 10 lines of code.

There are plenty of online services that convert your website into an Android or iOS app. But for that, you have to pay in dollars.

What if I can say, you can convert your website into an app for free in just 10 lines of code…

When I wanted to develop an app for my website, I went through a lot of research and explored many online tools. It’s not worth paying when I can do the job in just 10 lines of code.

It’s not rocket science. Here you go…

Step 1: Install React Native Webview

Run below command to install react native webview on your MacBook terminal.

npm install --save react-native-webview

Step 2: React-Native Code to Convert Website into App

Go to your react-native project directory. You will see the App.js file.

It will be having sample code. Replace that code with the code given below.

import * as React from "react";
import { WebView } from "react-native-webview";

export default class App extends React.Component {
  render() {
    return (
      <WebView 
      source={{ uri: 'https://example.com/' }} 
      style={{ marginTop: 20 }}
      />
    );
  }
}

Make sure, you add your website URL instead of https://example.com/.

Rerun your application. Congratulations you have converted your website into a standalone App, in just 10 lines of code 😀

Interestingly, it works for both Android and iOS apps. You don’t have to write separate code for two different apps.

Go and flaunt your app to your clients, friends, and followers. 🙂

Code Explanation

The code is self-explanatory.

• The first two lines are the imports. You have to import react and react-native-webview.
• Then use render block along with Webview.
• Provide your website URL to the source and uri object.
• You can add custom CSS to your app using style object.

For the best app experience, make sure your website is responsive and renders smoothly on mobile.

If you don’t install react native webview, you will get the following error.

react-native-webview could not be found within the project

If you have any doubts or points to discuss, write to me in the comment section below.

Happy app development!

Aniruddha Chaudhari

I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on <b>CSEstack.org</b> portal.