React Native 0.57 coming soon with new iOS WebViews

2 min read

WebView is used to display web content in your iOS applications.Yesterday, React Native announced a new native iOS backend to the WebView component that uses WKWebView. This WebView component will be available in the upcoming React Native 0.57 release.

Apple has discouraged the use of UIWebViews for a long time. This is due to its being formally deprecated in the upcoming months. It is advised that you use the WKWebView class instead of using UIWebView for the apps that run in iOS 8 and above.

You can use the useWebKit property to opt into this implementation:

What problems does WKWebView solve?

Earlier, to embed web content in our applications we had two options, UIWebView and WKWebView.

UIWebView is the original WebView introduced in 2.0. It is known to have some pitfalls and problems. The main drawback is that it has no legitimate way to facilitate communication between the JavaScript running in the WebView and React Native. The newly introduced WKWebView aims to solve this problem. Other benefits of WKWebView over UIWebView include faster JavaScript execution and a multi-process architecture.

What to consider when switching to WKWebView?

You must avoid using the following properties, for the time being:

Using automaticallyAdjustContentInsets and contentInsets may result in inconsistent behavior. When we add contentInsets to UIWebView, the viewport size changes (gets smaller, if the content insets are positive). In case of WKWebView, the viewport size remain unchanged.
If you use the backgroundColor property there is a chance that WKWebView may render transparent backgrounds differently from UIWebView and can also flicker into view.

Per React Native community, WKWebView doesn’t support the scalesPageToFit property. Hence, they couldn’t implement this on the WebView React Native component.

To know more about the new WebViews, check out their announcement on React Native’s official website and their GitHub repository.