Repository navigation
Underlying WKWebView instance is not disposed of after unmounting WebView component #22067
Description
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
Memory: 82.27 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.3 - /usr/local/bin/node
npm: 5.6.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
IDEs:
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.4 => 0.57.4
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
Description
When the useWebKit prop is set on the WebView component the underlying WKWebView instance does not get disposed of after the component is unmounted. These lingering instances can be seen using the Develop menu in Safari. This is only a problem when the useWebKit prop is set.
Reproducible Demo
- Run the following code using
react-native run-iosfrom the repository or by copy/pasting into App.js in a newly initialized React Native project. - Launch Safari and verify that you can see JSContext running in the simulator.
- Click the 'Toggle WebView' button to mount and unmount the WebView component.
- Verify that the unmounted WKWebView instances are still active and accessible via Safari.
- Remove the
useWebKitprop and re-run to verify this only happens when that prop is set.
Repository: https://github.com/jacamera/rnWebviewTest
App.js:
import React, {Component} from 'react';
import {View, Button, WebView} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = { showWebView: false };
this._toggleWebView = () => {
this.setState(prevState => ({ showWebView: !prevState.showWebView }));
};
}
render() {
return (
<View style={{ flex: 1, padding: 50 }}>
<Button
onPress={this._toggleWebView}
title="Toggle WebView"
/>
{this.state.showWebView ?
<WebView
source={{ uri: 'https://www.google.com' }}
useWebKit
/> :
null}
</View>
);
}
}
Screenshot:
Activity
bartolkaruza commentedon Nov 2, 2018
Have you tried this with the separate react-native-webview ? It looks like that's where more improvements for the Webview component land (faster) and the current one will be removed from the core at some point, according to this approved proposal. You can see the full discussion here.
jacamera commentedon Nov 2, 2018
@bartolkaruza Thank you for bringing this to my attention. I had fallen back to using https://github.com/CRAlpha/react-native-wkwebview since there was no mention of the separate WebView package in the docs. I just tested it and the separate react-native-webview disposes of the WebView instances properly so it's just an issue with the built-in component.
I feel like this issue should still be left open though since this seems like a pretty serious memory leak and there isn't any indication from the docs or console output that the built-in WebView component shouldn't be used.
hramos commentedon Nov 30, 2018
Please file an issue over at https://github.com/react-native-community/react-native-webview. The webview in this repository will be removed in a future version, and no WebView PRs are being merged on this repository.