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

Prerequisites

• Node.js

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:

// App.js
import { WebView } from 'react-native-webview';

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

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.