d72c2ae144
* Extract WebChromeClient from an anonymous class * Support fullscreen videos on Android Forces landscape mode while playing. * Use sticky immersive mode for fullscreen videos No longer forces landscape mode as that is a problem for portrait videos - allow the user to rotate as necessary. Only supports KitKat or greater, and falls back to leaving the status and navigation bars visible for lower than KitKat. This is the easiest way to prevent issues with resizing the video during playback. Also implement a lifecyle event listener which means if a user backgrounds the app or locks the screen with the video fullscreen, the UI visibility is re-applied. * Add allowsFullscreenVideo prop to control whether videos can be fullscreen on Android Luckily, we're able to change the WebChromeClient on demand in response to prop changes without seeming to do any harm. If you switch to disallow fullscreen, it will attempt to close the currently fullscreened video (if there is one) so users aren't stuck. I did notice a bug that if you go from fullscreen allowed, to fullscreen disallowed, the fullscreen button will remain on the video. Tapping the button will have no effect.
React Native WebView - a Modern, Cross-Platform WebView for React Native
React Native WebView is a modern, well-supported, and cross-platform WebView for React Native. It is intended to be a replacement for the built-in WebView (which will be removed from core).
Core Maintainers - Sponsoring companies
This project is maintained for free by these people using both their free time and their company work time.
- Thibault Malbranche (Twitter @titozzz) from Brigad
- Jamon Holmgren (Twitter @jamonholmgren) from Infinite Red
Platforms Supported
- iOS (both UIWebView and WKWebView)
- Android
Note: React Native WebView is not currently supported by Expo unless you "eject".
Getting Started
Read our Getting Started Guide. If any step seems unclear, please create a detailed issue.
Versioning
This project follows semantic versioning. We do not hesitate to release breaking changes but they will be in a major version.
Breaking History:
Current Version:
- 5.0.1 - Refactored the old postMessage implementation for communication from webview to native.
- 4.0.0 - Added cache (enabled by default).
- 3.0.0 - WKWebview: Add shared process pool so cookies and localStorage are shared across webviews in iOS (enabled by default).
- 2.0.0 - First release this is a replica of the core webview component
Upcoming:
- UIWebView removal
- this.webView.postMessage() removal (never documented and less flexible than injectJavascript)
- Kotlin rewrite
- Maybe Swift rewrite
Usage
Import the WebView component from react-native-webview and use it like so:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
// ...
class MyWebComponent extends Component {
render() {
return (
<WebView source={{ uri: 'https://facebook.github.io/react-native/' }} />
);
}
}
For more, read the API Reference and Guide. If you're interested in contributing, check out the Contributing Guide.
Common issues
- If you're getting
Invariant Violation: Native component for "RNCWKWebView does not exist"it likely means you forgot to runreact-native linkor there was some error with the linking process
Contributing
See Contributing.md
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT