Bug description:
When rendering an HTML page inside a WebView in a React Native (Expo) app, we first download a React production build (static zip file) and save it in the app's document directory. We then open the index.html
file from the extracted content using WebView.
This works correctly on the iOS Simulator, Android devices, and Android Emulator, where all referenced assets (CSS, JS, images) are loaded properly. However, on a physical iOS device, WebView only renders the content of index.html
but does not load or apply any indirectly referenced files (such as external CSS, JS, or images linked inside index.html
). The page appears unstyled and non-functional, as if the external dependencies are missing.
To Reproduce:
- Use react-native-webview inside an Expo React Native app.
- Load an HTML page that references an external CSS file (or inject styles via JavaScript).
- Run the app on an iOS Simulator → Styles are applied correctly.
- Run the app on a physical iOS device → Styles are missing or default browser styles are used.
Expected behavior:
The HTML page should render identically on both the iOS Simulator and a real iOS device, applying the referenced CSS properly.
Actual Behavior
- Simulator: Loads and applies external/injected CSS correctly.
- Physical iOS Device: WebView ignores external CSS and falls back to default fonts and styles.
Environment:
- OS: iOS
- OS version: 16.6
- react-native version: 0.76.7
- react-native-webview version: 13.12.5