React Native offers a powerful way to create hybrid mobile applications that combine web content with native mobile features. Using WebViews, developers can embed web content while maintaining access to device capabilities like navigation, network detection, and native UI elements. This approach is ideal for:

• Converting existing web projects to mobile apps

• Progressive Web Apps (PWAs) with native enhancements

• Content-focused applications requiring frequent updates

• Prototyping cross-platform solutions quickly

Required Packages

Here are the key packages we'll use and their purposes:

1. Navigation

   • @react-navigation/native (v7.0.14) - Core navigation library

   • @react-navigation/native-stack (v7.2.0) - Stack navigation

   • react-native-screens (v4.6.0) - Native navigation components

2. WebView & UI

   • react-native-webview (v13.13.2) - Web content container

   • react-native-progress (v5.0.1) - Loading indicators

3. Utilities

   • @react-native-community/netinfo (v11.4.1) - Network detection

   • react-native-safe-area-context (v5.2.0) - Safe area handling

Step 1: Project Setup

Initialize your React Native project:

npx @react-native-community/cli@latest init webappproject
cd webappproject

Install required dependencies:

npm install @react-native-community/netinfo @react-navigation/native @react-navigation/native-stack react-native-progress react-native-webview react-native-safe-area-context react-native-screens

Step 2: Splash Screen Implementation

Create SplashScreen.jsx:
 

import { Dimensions, Image, StyleSheet, View } from 'react-native';
import React from 'react';
import logo from './logo.png';

const SplashScreen = () => (
  <View style={styles.container}>
    <Image source={logo} style={styles.logo} />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2f2f55',
  },
  logo: {
    height: 150,
    width: 150,
    resizeMode: 'contain'
  },
});

Step 3: Main Application Structure (App.jsx)

import { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import SplashScreen from './SplashScreen';
import MainScreen from './MainScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  const [showSplash, setShowSplash] = useState(true);

  useEffect(() => {
    setTimeout(() => setShowSplash(false), 3000);
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {showSplash ? (
          <Stack.Screen name="Splash" component={SplashScreen} />
        ) : (
          <Stack.Screen name="Main" component={MainScreen} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Step 4: WebView Screen with Advanced Features (MainScreen.jsx)

import React, { useRef, useState, useEffect } from 'react';
import { BackHandler, StyleSheet, View, Alert } from 'react-native';
import WebView from 'react-native-webview';
import ProgressBar from 'react-native-progress/Bar';
import NetInfo from '@react-native-community/netinfo';

const MainScreen = () => {
  const webViewRef = useRef(null);
  const [progress, setProgress] = useState(0);
  const [loaded, setLoaded] = useState(false);
  const [canGoBack, setCanGoBack] = useState(false);
  const [isOnline, setIsOnline] = useState(true);

  // Network detection
  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsOnline(state.isConnected);
      if (!state.isConnected) {
        Alert.alert('Offline', 'Internet connection required');
      }
    });
    return () => unsubscribe();
  }, []);

  // Android back button handling
  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      () => {
        if (canGoBack && webViewRef.current) {
          webViewRef.current.goBack();
          return true;
        }
        return false;
      }
    );
    return () => backHandler.remove();
  }, [canGoBack]);

  return (
    <View style={styles.container}>
      {!loaded && (
        <View style={styles.loadingContainer}>
          <ProgressBar
            progress={progress}
            width={null}
            color="#2f2f55"
            style={styles.progress}
          />
        </View>
      )}

      <WebView
        ref={webViewRef}
        source={{ uri: 'https://your-web-app-url.com' }}
        onLoadProgress={({ nativeEvent }) => setProgress(nativeEvent.progress)}
        onLoadEnd={() => setLoaded(true)}
        onNavigationStateChange={navState => setCanGoBack(navState.canGoBack)}
        startInLoadingState={true}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
    </View>
  );
};

Key Features Explained

1. Splash Screen Transition

   • 3-second timer using setTimeout

   • Smooth navigation transition using React Navigation

2. Network Detection

   • Real-time connection monitoring with NetInfo

   • Automatic alerts when offline

3. WebView Enhancements

   • Loading progress visualization

   • Back button navigation within WebView history

   • Native error handling

4. Android Back Button

   • Double-tap exit confirmation

   • WebView history navigation support

Final Considerations

1. Performance Optimization

   • Add WebView caching strategies

   • Implement error boundaries

   • Use loading spinners during navigation

2. Platform-Specific Tweaks

npx react-native run-android
npx react-native run-ios

1. Security Enhancements

   • Add SSL pinning

   • Implement content security policies

   • Use WebView user agent detection

This approach provides a solid foundation for hybrid mobile apps. Remember to test thoroughly across different network conditions and device sizes.