cralpha / react-native-wkwebview Goto Github PK
View Code? Open in Web Editor NEWWKWebview Component for React Native
License: MIT License
WKWebview Component for React Native
License: MIT License
Element type is invalid: expected a string for built-in components or a class/function but got: undefined. Check the render method of
WKWebview
I'm using the RN 0.39 version on the branch 0.5.0-for-RN0.39
This is how I loaded it:
import WKWebView from 'react-native-wkwebview-reborn';
<WKWebView
ref="webview"
onProgress={(progress) => console.log(progress)}
sendCookies={true}
source={{
uri: gameUri,
headers: {
'Authorization': `${token_type} ${access_token}`,
'Accept': 'text/html; charset=utf-8',
'rooplay-installid': installId
},
method: 'get'
}}
automaticallyAdjustContentInsets={true}
style={webView}
bounces={false}
startInLoadingState={true}
/>
Would be nice to support toggling this property, so that back/forward gestures work: https://developer.apple.com/reference/webkit/wkwebview/1414995-allowsbackforwardnavigationgestu
I'll put together a PR for this when I have some time if someone else doesn't get to it first. :)
when i use the js to update cookie in WKWebView, but when use react-native-cookieManager to read it is still old.
Thanks a lot for your work and commitment in implementing this library.
Are you planning active supporting and maintaining it, as I can see there a couple of pull request pending merge and release.
https://share.iclient.ifeng.com/shareNews?fromType=vampire&forward=1&aid=sub_24943526
(after opening click play video)
_onShouldStartLoadWithRequest = (navigator) => {
let scheme = navigator.url.split('://')[0]
if (scheme === 'http' || scheme === 'https') {
return true;
}
// intercept an invalid url: comifengnewsclient://call?type=doc&id
// return false not work, i got a 'NSURLErrorDomain'
return false;
}
npm shows version 1.7.0. Git repo shows 1.6.0
Can you push the latest changes please?
Is there currently a JS option to disable the link preview as seen here?
https://developer.apple.com/documentation/webkit/wkwebview/1415000-allowslinkpreview
I'm reopening this issue. Testing a non-alert scenario doesn't appear to work, and neither of the debugging techniques I've tried produce positive results.
On the native side, I inject a piece of JS code like this:
let js = "window.globalVariable = 'tom rules';";
return (
<WKWebView
source={{ uri: `file://${FS.MainBundlePath}/dist/index.html` }}
injectedJavaScript={js}
/>
);
Then, inside dist/index.html, I have this js:
console.log('window.globalVariable=' + window.globalVariable);
After launching the simulator, I attach Safari's debugger, and I inspect the document. The code I wanted to inject doesn't appear anywhere in the source. Thinking that maybe the injection is accomplished in a moar magical way, I click the reload button I've put in the web page (it does `window.location='./index.html'), and watch to see the console.log statement. I see this output:
window.globalVariable=undefined
At this point, I have yet to see a test case in which the injectedJavaScript
prop has any effect. Any tips? How have you folks validated that it works?
We are experiencing an issue in our app. We are still building with Xcode 8.3.3 so we aren't explicitly targeting iOS 11. However, when we upload a beta to TestFlight, we check how it works in different iOS versions, and that includes the upcoming, still in beta, iOS 11.
Only on iOS 11, we see a crash when we restart the React/ReactNative portion of the app. The ReactNative framework releases all components in order to get these recreated. In the particular case of this project, we are getting a low-level crash as RCTWKWebViewManager gets destroyed.
Crashed: com.facebook.react.JavaScript
0 WebKit 0x1918d5590 <redacted> + 464
1 WebKit 0x1918d53dc <redacted> + 28
2 WebKit 0x1919c9514 <redacted> + 224
3 WebKit 0x191a6f1d8 <redacted> + 36
4 Alchemy 0x100747120 -[RCTWKWebViewManager .cxx_destruct] (RCTWKWebViewManager.m:16)
5 libobjc.A.dylib 0x181f3eef4 object_cxxDestructFromClass(objc_object*, objc_class*) + 148
6 libobjc.A.dylib 0x181f4c638 objc_destructInstance + 88
7 libobjc.A.dylib 0x181f4c690 object_dispose + 16
8 Alchemy 0x1006d1638 -[RCTModuleData .cxx_destruct] (RCTModuleData.mm:23)
9 libobjc.A.dylib 0x181f3eef4 object_cxxDestructFromClass(objc_object*, objc_class*) + 148
10 libobjc.A.dylib 0x181f4c638 objc_destructInstance + 88
11 libobjc.A.dylib 0x181f4c690 object_dispose + 16
12 CoreFoundation 0x1829b3108 <redacted> + 112
13 CoreFoundation 0x182a5a344 <redacted> + 212
14 CoreFoundation 0x1829b3b40 <redacted> + 52
15 Alchemy 0x1006cbedc __30-[RCTBatchedBridge invalidate]_block_invoke_2 (RCTBatchedBridge.m:728)
16 Alchemy 0x1006c7274 -[RCTJSCExecutor executeBlockOnJavaScriptQueue:] (RCTJSCExecutor.mm:800)
17 Foundation 0x183418a50 <redacted> + 340
18 CoreFoundation 0x1829d4358 <redacted> + 24
19 CoreFoundation 0x1829d42d8 <redacted> + 88
20 CoreFoundation 0x1829d3b60 <redacted> + 204
21 CoreFoundation 0x1829d1738 <redacted> + 1048
22 CoreFoundation 0x1828f22d8 CFRunLoopRunSpecific + 436
23 Alchemy 0x1006c4278 +[RCTJSCExecutor runRunLoopThread] (RCTJSCExecutor.mm:211)
24 Foundation 0x183418860 <redacted> + 996
25 libsystem_pthread.dylib 0x18265832c <redacted> + 308
26 libsystem_pthread.dylib 0x1826581f8 _pthread_start + 310
27 libsystem_pthread.dylib 0x182656c38 thread_start + 4
We are not trying to build the project using Xcode 9 Beta. Maybe rebuilding everything for iOS 11 would fix the issue. That would imply the adapt of our Swift 3 logic to Swift 4 (which we plan to do at some point anyway). However, as there aren't guarantees that that would fix the issue, we prefer to contact the team and see if you guys have noticed this issue as well, have a better understanding of how it happens, how can be avoided.
I linked the library with rnpm link and I always get one of two errors when trying to build. It fails on "#import <React/RCTView.h>" in RCTWKWebView.h or "#import <React/RCTViewManager.h>" in RCTWKWebViewManager.h.
Rather than having to link things ourselves (as mentioned in the readme), this package should use rnpm.
If you agree, I'd be happy to submit a pull request for this.
hello! thanks for your code!(sorry!forgive my English skill...)
I used RCTWKWebview for a long time and run well.But nowadays i use ten or more canvas component in my page .When I quickly slide the page it will be white screen and no response on iPhone7Plus(but iPhone6/7 runs well)
When i look for some in Xcode's console, I found this mistake:
wk unable to acquire assertion for process 0.
There seems to be a problem with memory or CPU rendering,I can't find the reason, I hope if you see can help guide,really thanks very much!!
Even with using sendCookies
, different instances of WKWebView do not share cookies as the react-native WebWiew does. Using sendCookies
works for most cookies but for some reason it does not work for session cookies set by the server.
See:
http://stackoverflow.com/questions/33156567/getting-all-cookies-from-wkwebview/34190447#34190447
http://stackoverflow.com/questions/25797972/cookie-sharing-between-multiple-wkwebviews
http://stackoverflow.com/questions/39772007/wkwebview-persistent-storage-of-cookies
when use postMessage, I received twice onMessasge, how to avoid this case?
Hi everyone,
More than a year ago, we have created this component as some of our webview pages (mostly some charts) have performance issues with UIWebView. Even though we don't have lots of interactions between webview and react native code, we have implemented the "bridge" functionality. As time goes by it's got much more feature requests and PRs. However, since we do not use them in our own code base, this results in following problems:
Thus we are looking to add more contributors to this project to move it forward. If you are interested, please do let us know in this thread. We will add you as the collaborators first. And then we can figure out a better governance of this project.
My build fails - probably because I use Expo...
Any chance for pod support?
ExceptionsManager.js:71Warning: Native component for "RCTWKWebView" does not existreactConsoleErrorHandler @ ExceptionsManager.js:71printWarning @ warning.js:36warning @ warning.js:60requireNativeComponent @ requireNativeComponent.js:52(anonymous function) @ WKWebView.ios.js:391loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ index.js:3loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ WebViewPage.ios.js:17loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ GameCell.js:11loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ HotPage.js:10loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ HomePage.js:9loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ WelcomePage.js:13loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:123_require @ require.js:107(anonymous function) @ index.ios.js:13loadModuleImplementation @ require.js:171guardedLoadModule @ require.js:116_require @ require.js:107(anonymous function) @ require-0.js:1executeApplicationScript @ debuggerWorker.js:40(anonymous function) @ debuggerWorker.js:65
Firstly, thank you for the work on this library - given the performance issues with UIWebView
, I'm surprised this hasn't been merged into React Native as the default.
I was wondering whether there is a specific reason for not supporting mediaPlaybackRequiresUserAction
(and/or mediaTypesRequiringUserActionForPlayback
on iOS 10)? No problems if it just hasn't been added yet, but I figured it would be worth checking why it isn't currently available before I spend time implementing it or looking for workarounds.
Page jump headers is missing Encountered a similar problem?
Within the createWebViewWithConfiguration
implementation. The WkNavigationAction.request.URL always seems to be an empty string when I'm trying to open an external URL. I'm still investigating the source of the issue, but it seems that there's a pretty good chance that the issue is in this module so I've created the issue in case someone else has dealt with this. Thanks.
Note: this is not an issue with target="_blank"
I've seen plenty of answers on that, but the issue is that the URL isn't even being populated.
I'm seeing the following error when using a require'd HTML resource as the source:
Possible Unhandled Promise Rejection (id: 0):
In this environment the sources for assign MUST be an object.This error is a performance optimization and not spec compliant.
Looks like it's due to this assign:
var source = Object.assign({}, this.props.source || {} , {
sendCookies: this.props.sendCookies,
customUserAgent: this.props.customUserAgent
});
At this point this.props.source
is an integer from the packager, and the babel version of assign doesn't like that.
See facebook/react-native#321 (comment)
Also solves RN core's currently lousy implementation of 2 way data communication too, between RN and webview: facebook/react-native#10941 (comment)
So, I have an iOS app that has multiple WebViews in it. I wanted to replace the UIWebView in it, with this great WKWebView component. But I'm not sure it fulfills my needs.
When I login on the site, inside the WebView, I get an HttpOnly session cookie.
If I then display another WebView, with the same site, will it have the cookie? If I restart the app, will it have the cookie?
From my initial testing, it appears that cookies are not stored and shared at all. Is this the case? And if so, are there any plans on adding this?
react-native's official WebView uses userAgent
as the property name for customization the user agent header (Android only though). see http://facebook.github.io/react-native/releases/0.43/docs/webview.html#useragent
So just wondering is there any special reason to use a different property name?
Wouldn't it better to keep the property names consistent?
Thank you.
Hey! Good to see someone is taking this on since I don't use it now. I don't have any issue with having the project be a fork or not. However, per this comment the original MIT license and copyright notice must be preserved. Specifically:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
You're not obligated in any way to maintain a fork, or even link to the original if you don't want to, but the terms of the license require that the original license be distributed with the software. Just add your own copyright line to it as well, like this. It seems like you're more actively developing this than I am, but I'll happily pull request any updates I end up making in my own code.
<WKWebView
ref="chart"
scrollEnabled = {false}
style={{
backgroundColor: 'red',
height: this.props.height || 400,
}}
/>
source={{uri:this.state.uri}}
webview can setState({uri:'javascript:alert(1)'})
wkwebview can not
how could i do
Since @jordansexton is not maintaining his version anymore, maybe this repo should be in charge of the npm package?
Hello,
Im using the CRAlpha react native wkwebview,
I have a fixed set of URLs, which the user can select and which should be displayed in the webview.
It takes a very long time for the webview to display the URLs, it seems to load all the page before displaying anything, so I just see the activity wheel until the whole page is loaded.
Note: the first page load is especially slow compared to the rest.
I'd like for there to be partial loading of the page, or even a convenient way to pre load/cache URLs
Hi!
Is there a reason why javaScriptEnabled is not supported?
Thanks!
how to work with react-native-webview-bridge
We have to replace every header. Duplicate interface definition for class 'RCTBridge'.
The module is not working in React Native 0.40.0: facebook/react-native#11725.
I ran a test to compare react-native's built-in WebView with react-native-wkwebview's WKWebView. The WebView executes the injected script, and the WKWebView does not appear to.
Sample code:
'use strict';
import React, {
Component
} from 'react';
import {
Text,
WebView,
View
} from 'react-native';
import Styles from './styles';
import WKWebView from 'react-native-wkwebview';
export default class Scene extends Component {
render() {
let js = `alert('test');`;
return (
<View style={Styles.SCENE}>
<WKWebView style={Styles.BROWSER}
source={{uri: `http://localhost:3000`}}
messagingEnabled={true}
onMessage={this.onMessage}
injectedJavaScript={js}
/>
</View>
);
}
};
When I render a WebView
, the javascript alert appears once the web page has loaded. When I render a WKWebView
, the javascript alert never appears. Unless WKWebView has some kind of setting that suppresses alert
, this seems prove that WKWebView's support for the injectedJavaScript
prop is broken.
This issue will probably take some time. We are not actively working on it (since we don't really use this). So any contribution is welcome. This will address some of the issues in PR #49.
NSHTTPCookieStorage
to document.cookie
. This will enable AJAX requests to share the cookie. You can simply use document.cookie = newCookie;
to set/update cookies.updateCookie
to force an update from Set-Cookie
header to NSHTTPCookieStorage
. I believe Set-Cookie
will eventually end up in NSHTTPCookieStorage
, it's just a matter of when.webView:decidePolicyForNavigationResponse:decisionHandler:
and WKUserScript
.The native WebView supports postMessage for communication between the embedded web page and the native app.
WKWebView has vastly better performance, but doesn't appear to support postMessage. For us, that's a deal-breaker. I'm investigating workarounds, but am not optimistic (I'm neither an Obj-C nor Java dev).
Please add support for postMessage.
Hi,
First off, thanks for all the hard work. This module looks really promising!
Now over to the issue; for some reason it does not seem to work properly with HTTP POST requests. More specifically the POST-body seems to be missing from the request.
Basically what I've done is drop this module in place of the old WebView. The only change in my code is doing import WKWebView from 'react-native-wkwebview-reborn';
and replacing my old WebView
with WKWebView
.
Setting the following as source
on the old WebView works;
source={
method: 'POST',
body: `samlResponse=${encodeURIComponent(saml)}`,
uri: authUrl
}
But it fails on this WKWebView module.
What I'm trying to do is POST an authentication SAML to a certain URL. Just setting a breakpoint in the code I can see that the properties are set on source:
But for some reason, the samlResponse
is empty on the receiving endpoint. I've also checked with Charles Proxy that the POST-body is empty.
Seems like this might be a general problem with WKWebView
though:
Hi
I was wondering what the approach should be for modifying immutable properties of WKWebView, specifically it's configuration
.
I want to enable the allowsInlineMediaPlayback
, however it's part of the WKWebView's WKWebViewConfiguration
, which is a readonly
copy property, so we cannot modify it after WKWebView has been initialized.
For my specific purposes I'm going to fork and hard code it, but how would I go about exposing this properly to ReactNative?
Thanks
WebView does not see any cookies from Safari. This is bug?
Additional Information
React Native version: 0.36.1
Platform: iOS
Although undocumented, the UIWebView Component implements a postMessage command to communicate also from react native into the webview.
It would be great after having the onMessage prop in place to have a communication channel for the other direction as well.
Hi,
Is there any way to take a screenshot of web page inside the react-native-wkwebview and save it as jpg, etc?
Similar as what phantomJS offers.
Thanks!
According to the docs it says "Try replacing your existing WebView with WKWebView and it should work in most cases."
This works:
<WebView source={{uri: 'https://www.google.se/'}} />
This doesn't. It shows a white page with a red color on the left side, why is this?
<WKWebView source={{uri: 'https://www.google.se/'}} />
i did import WKWebView from 'react-native-wkwebview-reborn';
and also added the files to Libraries in Xcode. I have react native 0.43.2.
When trying to use react-native-wkwebview I noticed that sometimes props fail to get passed down. I noticed that when I set a breakpoint at https://github.com/CRAlpha/react-native-wkwebview/blob/master/ios/RCTWKWebView/RCTWKWebView.m#L57 sendCookies wasn't being set and tracing it further back, the only props set were source and style.
Here's the initial jsx:
if (!this.state.loadedCookie) {
return null;
}
if (!this.state.loggedIn && this.state.loadedCookie) {
return (
<View style={{marginTop: 20}}>
<Text>Email</Text>
<TextInput style={inputStyle} onChangeText={this.changeEmail} />
<Text>Password</Text>
<TextInput style={inputStyle} onChangeText={this.changePassword} />
<Button title="Submit" onPress={this.submitLogin}>Submit</Button>
</View>
)
}
<WKWebView
source={{url: URL_STRING}}
ref={ref => { this.web = ref; }}
sendCookies={true}
style={{marginTop: 20}}
/>
It started working when I added more props:
<WKWebView
source={{url: URL_STRING}}
onProgress={(progress) => console.log(progress)}
automaticallyAdjustContentInsets={true}
ref={ref => { this.web = ref; }}
sendCookies={true}
style={{marginTop: 20}}
automaticallyAdjustContentInsets={true}
startInLoadingState={true}
/>
Additionally, when I turned on hot reloading, and changed the URL_STRING, it would refresh properly with all props set. I'm wondering if someone with more experience contributing to this can help me figure out what's causing this to fail. But as far as I can tell there seems to be some race condition on initial load.
I'm using react-native-cookies for my cookie manager. I'm running react-native on my mac OS:10.12.2 through the xcode simulator. Thanks
As far as I understood, straining memory with WKWebView
should terminate individual processes, but not crash the whole app.
Instantiating blank (ie uri: undefined
) WKWebView
s causes no issues. It depends on available memory how many views can a device handle. First gen. App on first iPad mini crashes already with 3 instances of WKWebView
.
I tried various techniques of removing unused web views or unloading their content (ie setting their source to { uri: undefined }
), however was not able to avoid the crashes.
Is there something missing in the native bridge (for example response to didReceiveMemoryWarning
)? Or am I missing something? Thank you!
Reference gist: https://gist.github.com/tomasc/6e0efe94c388f293b60da1d191a1e89e
Hi,
While the react-native-wkwebview loads the iframe content elements correctly, I cannot get the iframe elements by issuing evaluateJavaScript js code:
var ifrm = document.getElementById("iframeID");
var ifrmContent = (ifrm.contentWindow || ifrm.contentDocument);
ifrmContent.document throws js error.
How to work around this (cors)?
Thanks!
I need to debug the webview, is there a way to see the console logs from the WebView?
When you try to use this link it fails with error below:
https://cdn.plaid.com/link/v2/stable/link.html?isWebview=true&isMobile=true&key=XXX&env=tartan&product=connect&selectAccount=true&clientName=Test
Same thing happens on slideshare links as well:
http://www.slideshare.net/branchmetrics/the-2016-mobile-growth-handbook-64218146
Reference: facebook/react-native#9037
WebView shouldn't trigger onLoadingError if the URL scheme itself is not supported, just like Safari.
Any ideas on how to resolve this? Also here is the code they provide using in WKWebView: https://github.com/plaid/link/blob/master/examples/wkwebview/wkwebview/LinkViewController.swift
usr play three website'ex: http://xxx.com/gamex.html',
i want remove one cache .so ,i use clearCacheForSingleFile, like this:
clearCacheForSingleFile('http://xxx.com/gamex.html'); ???
it's not work fine~ how i do ,pls help ~ _ ~
btw:
how set cache mode in crosswalk ? tytyty
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.