How to render a website as a native mobile app

remarkablemark
Jun 21, 2022

--

iPhone 8 simulator rendering example.com website

This story goes over how to render a website in a native mobile app by wrapping it inside a React Native WebView.

Prerequisites

React Native

Install the Expo CLI:

npm install --global expo-cli

Then create a new React Native project:

expo init react-native-webview-example

Change into your project directory:

cd react-native-webview-example

WebView

Install React Native WebView:

npm install --save react-native-webview

Update App.js with the source URI to your example site:

Run your React Native application:

npm start

Install the Expo client app on iOS or Android to run the app on your phone.

Example

See GitHub repository.

--

--