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-cliThen create a new React Native project:
expo init react-native-webview-exampleChange into your project directory:
cd react-native-webview-exampleWebView
Install React Native WebView:
npm install --save react-native-webviewUpdate App.js with the source URI to your example site:
Run your React Native application:
npm startInstall the Expo client app on iOS or Android to run the app on your phone.
Example
See GitHub repository.
To apply leverage to software development:
- Instead of building on AWS, use a PaaS like Heroku.
- Instead of creating a custom app, use a framework like Next.js.
- Instead of styling from scratch, use a design system like Material UI.
- Instead of architecting a CMS, use an open source or paid alternative like WordPress.
- Instead of writing security functions, use a battle-tested module like Auth0.
With leverage, you increase feedback loops but give up control. It’s more valuable when working with small teams trying to move fast.
