How to Build a WebView App for Your Website Using React Native and Electron

Building a WebView app is one of the fastest ways to turn your website into a mobile or desktop application. It’s ideal for businesses looking to expand their reach without rebuilding their application from scratch. In this guide, you’ll learn how to create a WebView app for iOS and Android using React Native, and for desktop platforms using Electron.

What Is a WebView App?

A WebView app essentially acts as a browser embedded in a native application. It loads your website inside the app, providing users with a seamless experience that feels like using a native application.

Building a Mobile WebView App with React Native

React Native allows you to build cross-platform apps for iOS and Android using JavaScript. Let’s get started:

Prerequisites:

• Node.js installed on your system.
• Expo CLI or React Native CLI installed globally.
• A basic understanding of React and JavaScript.

Steps:

1. Initialize the Project

   npx react-native init WebViewApp
   cd WebViewApp
   

   Or, if using Expo:

   npx expo init WebViewApp
   cd WebViewApp
   

2. Install React Native WebView React Native provides a react-native-webview library for embedding WebView in your app:

   npm install react-native-webview
   

3. Create the WebView Component Replace the code in App.js with the following:

   import React from 'react';
   import { StyleSheet, View } from 'react-native';
   import { WebView } from 'react-native-webview';
   
   const App = () => {
     return (
       <View style={styles.container}>
         <WebView source={{ uri: 'https://yourwebsite.com' }} />
       </View>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
     },
   });
   
   export default App;
   

4. Run the App For iOS:

   npx react-native run-ios
   

   For Android:

   npx react-native run-android
   

   If using Expo:

   npx expo start
   

Building a Desktop WebView App with Electron

Electron is a powerful framework that lets you build cross-platform desktop applications using web technologies.

Prerequisites:

• Node.js installed.
• Basic knowledge of JavaScript and HTML.

Steps:

1. Initialize the Electron Project Create a new directory and initialize a Node.js project:

   mkdir WebViewDesktopApp
   cd WebViewDesktopApp
   npm init -y
   

2. Install Electron Install Electron as a dependency:

   npm install electron --save-dev
   

3. Set Up the Main Script Create a main.js file:

   const { app, BrowserWindow } = require('electron');
   
   let mainWindow;
   
   app.on('ready', () => {
     mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true,
       },
     });
   
     mainWindow.loadURL('https://yourwebsite.com');
   });
   
   app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') {
       app.quit();
     }
   });
   
   app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) {
       createWindow();
     }
   });
   

4. Configure the Scripts Update the package.json file to include a start script:

   "scripts": {
     "start": "electron ."
   }
   

5. Run the Application Start your Electron app:

   npm start
   

Packaging Your Applications

Mobile (React Native)

To distribute your mobile app:

• For Android: Build the APK using npx react-native run-android --variant=release.
• For iOS: Archive the app in Xcode for submission to the App Store.

Desktop (Electron)

Use electron-packager to package your desktop app:

npm install electron-packager -g
electron-packager . WebViewDesktopApp --platform=win32 --arch=x64

Conclusion

By leveraging React Native for mobile platforms and Electron for desktops, you can quickly transform your website into fully functional applications accessible across devices. These tools save time and resources while ensuring your users have a seamless experience on all platforms.

With this guide, you’re ready to extend your website’s reach with minimal effort. Happy coding!