javascriptandroidiosmobileexpo

Expo WebView not displaying on iOS but works on Android

I'm working on an Expo project that uses a WebView component to display web content. While everything works fine on Android devices, the screen appears blank on iOS. Below is the relevant code and details about my environment and the steps I've taken to debug the issue.

My Environment: Expo SDK Version: 51 React Native WebView Version: 11.26.1 Development Environment: macOS Target iOS Version: iOS 16 Testing Device/Simulator: iPhone 14 simulator Code Example: Here’s the simple implementation of the WebView component in my app:

import React from 'react';
import { WebView } from 'react-native-webview';

export default function App() {
  return (
    <WebView
      source={{ uri: 'https://example.com' }} // Loading a test URL
      style={{ flex: 1 }} // Ensuring it takes the full screen
    />
  );
}

What I've Tried: Verified Basic Setup: Ensured that the WebView is correctly imported and configured as shown in the code above. Checked iOS Permissions: Reviewed app.json and Info.plist to ensure necessary permissions are added (e.g., NSAppTransportSecurity for HTTP URLs). Simplified Testing: Used a basic URL (https://example.com) to eliminate potential issues with the target content. Rebuilt the Project: Tried clearing the cache and rebuilding the app using expo build. Despite these efforts, the issue persists.

Observed Behavior: Android: The WebView loads the content as expected. iOS: The screen remains blank with no error messages in the Expo logs. My Questions: Are there any additional iOS-specific configurations required for the WebView to work properly? Has anyone encountered a similar issue and found a solution? Thanks in advance for your help!

Solution

  • This is how i fixed it for

    "react-native-web": "~0.19.12",
"react-native-webview": "13.12.2",

    const [ ready, setReady ] = useState(false);
const [ webkey, setWebkey ] = useState(0);
<Webview
  key = { webkey }

  onLoadEnd={()=>{
    if( !ready ){
     setWebKey(Date.now());
       setReady(true)
   }
  }}
/>

    Source: https://github.com/react-native-webview/react-native-webview/issues/3616#issuecomment-2494300117