Build a React Native app and use WebView

In vscode you can download react native cli 

react-native run-android // make sure your android device is connected..via usb

emulator will be slow and i didnt like it.. on android studio .. it was crawling..

also you will need sdk >28 to make react-native work else it wasgiving licenses error..

finally i decided to use physical device.. 

enable the usb developer options 

To enable physical device make sure you can see it in 

$adb devices ... your phone should be visible there...

Now generate a react app with the starter and it will ask

for the perission to install the app on the phone .. just accept it. 

If you need icons for your app you can search for vector images which

will act as logo and generate app icons from below.

https://appicon.co/#app-icon

To push to playstore you need to put keystore and password in the build.gradle..

to release the apk you will do  ./gradle assemblerelease.. 

Refer below doc to make a release config in the build.gradle.

https://dev.to/zilurrane/generate-release-mode-apk-for-react-native-project-to-publish-on-playstore-5f78

make sure react-native start server is running while you try to assemble the release.. 

if allis well you will getthe final apk which you canpush to playstore..

I created a simple webview and included it in the app , i was loading my site from remote..

Final webview that i loaded in my starter app 

import { ActivityIndicator } from "react-native";

import { StatusBar } from "expo-status-bar";

import React, { Component } from "react";

import WebView from "react-native-webview";

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

export default class App extends Component {

constructor(props) {

super(props);

this.state = { visible: true };

}

hideSpinner = () => {

this.setState({ visible: false });

};

showSpinner = () => {

this.setState({ visible: true });

};

render() {

return (

<View style={styles.container}>

<WebView

source={{ uri: "https://site.in" }}

onLoadStart={() => this.showSpinner()}

onLoad={() => this.hideSpinner()}

style={{ flex: 1 }}

/>

{this.state.visible && (

<ActivityIndicator

style={{

flex: 1,

left: 0,

right: 0,

top: 0,

bottom: 0,

position: "absolute",

alignItems: "center",

justifyContent: "center",

}}

size="large"

/>

)}

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

},

});