How to have an android app from any page

gustavogss — Thu, 17 Nov 2022 00:24:55 +0000

Here we will be using ReactNative technology with Expo
But first, your page needs to be very responsive, as this implementation only renders the website in an application. Even if you try to fix the styling, it won't provide a good experience.

1 – First of all, it is necessary to prepare the development environment according to your operating system, access the website and follow the instructions:
Configuration
2 – Once Expo is installed on your machine, it's time to create your application:
expo init yourappname
3 – Go to the application folder you just created and install this dependency:
npm install react-native-webview
4 – Go to the application folder, and open your project in the editor of your choice, I used VSCode.
Check if you have the assets folder, if not, create and place the favicon.png, icon.png and splash.png in the following sizes:

favicon.png - in size 40 x 44 px
icon.png - in size 150 x 150 px
splash.png - 1284 x 2778 px

5 – Configure the app.json file, like something similar:

"expo": {
"name": "yourappname",
"slug": "yourappname",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff" //change background color
"updates": {
"fallbackToCacheTimeout": 0
"assetBundlePatterns": [
"ios": {
"supportsTablet": true,
"bundleIdentifier": "br.com.nameofyourapp",//put your bundle domain
"buildNumber": "1.0.0"
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#373535" //change background color
"package": "com.betrybe.app"
"android": {
"package": "br.com.nameofyourapp", //put your package's domain
"versionCode": 1
}console.log( 'Code is Poetry' );

6 – After everything is configured, go to the main file of the App.js application, delete everything that is there. And import these dependencies:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { WebView } from 'react-native-webview';

7 – Then, in the same App.js file, create a constant with the name URL and put the address of your page:
const URL = 'https://suapagina.com.br'; //Place your page here
8 – Also implement a function named App, export it, and return a View:
export default function App() { return(<View />)}
9 – Structure the View as follows:

<View style={styles.container}>
<View style={styles.page}>
<WebView source={{ uri: URL }} onLoad={console.log('Loaded!')} />
</View>
<StatusBar style="auto" />
</View>

10 – Now let’s style our application. Within the same App.js file. Create this style:

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginTop: 30,

page: {
width: '100%',
height: '100%',

11 – After everything is done, your App.js file should look like this one:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { WebView } from 'react-native-webview';
const URL = 'https://suapagina.com.br'; //Place your page here
export default function App() {
return(
<View style={styles.container}>
<View style={styles.page}>
<WebView source={{ uri: URL }} onLoad={console.log('Loaded!')} />
</View>
<StatusBar style="auto" />
</View>

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginTop: 30,

page: {
width: '100%',
height: '100%',

12 – To run the application directly on your cell phone:
Connect via usb your device to your computer, and activate developer mode on your cell phone.
It is also necessary to install the Expo application on your cell phone through the playstore, to run your application: https://play.google.com/store/apps/details?id=host.exp.exponent
To check whether your computer is connected with your mobile phone. Go to the terminal and type the command:
adb devices
It should appear, something similar to:
List of attached devices
0055517386 deviceadb devices
13 – To run the application, just enter the project folder and type the command in a terminal:
expo start
You will be redirected to another page, choose the Local option and then the emulator you want to run your application, in our case:
Android → Run on Android device/emulator
That's it, wait for your home page to open on your cell phone, then your web page, and your application's logo will also be generated.
I couldn't create my application, is there an easier way?
1 – Even after all these steps, you still cannot create your page application.
I have a pre-made model already configured in my repository, which I can make available here, just by typing the command in a terminal of your choice:
https://github.com/gustavogss/webviewapp.git

DEV Community: gustavogss

How to have an android app from any page