Convert website to android and ios application using react native expo webview

Convert website to android and ios application using react native expo webview

If you want to check you can check on github by using below link also dont forget to give star ;)
Source Code: https://github.com/shubham715/react-native-expo-webview-convert-website-to-app

React native is the best choice to create multi platform mobile application , but sometimes we dont want to write a complete application because we already have a web application or a website and its complicated to manage both . So we have a solution for this problem. React native supports webView that makes easy to run any website url like an app natively.

What is webview in react native?

In React native, WebView helps to show web content in a native view.

For this tutorial we will use EXPO.

What is EXPO ?

EXPO a set of tools to help you quickly start an app. Expo have many inbuilt components that helps to simplify the development and testing of React Native app.

So please follow the below steps to create a mobile application by using your website url easily

First install nodeJS, react native , EXPO. You can check react native official documents for this.

After successfully installation of above tools we can proceed to next steps

Now open terminal and go to your directory file by using "cd" command.

then run the following command

 expo init rn 'MyWebView'

After press enter , it will create a rn folder and into "rn" folder, expo will install all the required packages.

Now navigate to "rn" folder by using cd command

cd rn

So our react-native application structure is installed and now we will install "Webview by using expo"

Open terminal and make sure you are in "rn" directory

Now run the below command

expo install react-native-webview

the above command will install webview package and now we can use it to show our website in webview.

Now in terminal(cmd) run below command

yarn start

here we installed packages through yarn that's why we are using yarn otherwise you can use expo or npm to start application
When you press enter , the command will give you output same like below screenshot.

Now you can scan qr code using expo app and run application.

Ok so our mobile application is working nice and showing default homepage.


Now open App.js from the root directory of our project and import webview by using below code

import { WebView } from 'react-native-webview';

Now we need to create view for it and then we need to pass url in it so that url will show in webview.
We can render webview by using below code

<WebView source={{ uri: 'https://thecoderain.blogspot.com/'}} style={{ marginTop: 20 }} />;

I know it looks like difficult and can make you confuse but dont worry here is the full code of App.js file .

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

import { WebView } from 'react-native-webview';



export default class App extends React.Component {

  render() {

    return <WebView source={{ uri: 'https://thecoderain.blogspot.com/'}} style={{ marginTop: 24 }} />;

  }
}

Now save the file and check in mobile or in simulator, because we already running expo app and scanned above mentioned qr code so it will show changes instant.

Great our mobile application is ready. There is so much possibilities like preloader , navigation that you can add . So keep try to make it more better.

To create apk or ios app , please follow our tutorial "how to convert react native app to apk file" and "How to convert react native app to ios application" tutorial

Happy Coding Thanks.

Source Code: https://github.com/shubham715/react-native-expo-webview-convert-website-to-app

Related Links:-
Convert website to mobile application
Create a mobile application by using website
Create mobile application using react native
How to use react native Expo Webview
React native webview to load website
Build ios app using webview
Convert website to ios application
Convert website to android application
Build a simple react native app using expo
React native tutorial