React Native Blog Aug 27, 2018

WKWebView Integration in React Native

Article Summary

React Native just made a critical infrastructure shift that every iOS developer needs to know about. Apple's deprecation of UIWebView forced the framework to completely rebuild its WebView implementation.

The React Native team announced the migration from UIWebView to WKWebView in version 0.57, responding to Apple's formal deprecation in iOS 12. This represents a fundamental change to how WebViews work in React Native apps, affecting communication patterns and performance characteristics.

Key Takeaways

Critical Insight

React Native's WKWebView implementation eliminates security vulnerabilities and improves performance, but requires testing for apps using specific layout props.

The article reveals the clever (and somewhat terrifying) hack React Native used for WebView communication before this change.

About This Article

Problem

React Native's UIWebView used an unreliable and insecure method to let JavaScript in the WebView talk to React Native. It encoded message data into URLs with special schemes that had to be intercepted and parsed on the native side.

Solution

React Native switched to WKWebView and used its built-in features for message passing instead. This replaced the URL scheme hack and removed the need for navigation interception and data encoding.

Impact

Version 0.57 moved to WKWebView and gained faster JavaScript execution and a multi-process architecture. It also eliminated security vulnerabilities that came from UIWebView's communication approach.