expo: onMessage/postMessage WebView Communication not work on Expo 32 but work on Expo 31 or below
I am using Expo to integrate webview. I use onMessage/postMessage WebView Communication for WebView Communication.
onMessage/postMessage WebView Communication not work on Expo 32 but work on Expo 31 or below.
import React, { Component } from 'react';
import { View, StyleSheet, WebView, Text , Alert} from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={{flex: 1, paddingTop: Constants.statusBarHeight}}>
<WebViewAutoHeight />
</View>
);
}
}
class WebViewAutoHeight extends React.Component {
constructor(props) {
super(props);
this.state = {
receivedMessageCount:0,
receivedMessages: [],
}
}
addMessage(message){
Alert.alert("Something", "Something");
this.setState({
receivedMessages: [...this.state.receivedMessages, message]
})
}
render() {
return (
<View style={{flex:1, width:'100%'}}>
<Text style={{backgroundColor:'black', color:'white', fontSize:20}}>{this.state.receivedMessages.length} Messages from webview</Text>
<Text style={{backgroundColor:'black', color:'white', fontSize:14}}>
{this.state.receivedMessages.join('\n')}
</Text>
<WebView
source={{html:`
<html>
<head>
<script>
function test(){
window.postMessage("abc", '*')
alert("test");
}
</script>
</head>
<body>
<button onClick="test()">Test7</button>
</body>
</html>
`}}
scrollEnabled={false}
onMessage={(evt)=>{
this.addMessage(evt.nativeEvent.data);
}}
javaScriptEnabled={true}
/>
</View>
);
}
}
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 7
- Comments: 29 (6 by maintainers)
Links to this issue
Commits related to this issue
- [ios] Fix WebView navigation scheme on SDK32 (#3173) # Why Fixes #3168 # How Looks like the navigation scheme of WebView remained incorrect after versioning the code for SDK32. Fixed an iss... — committed to expo/expo by tsapeta 5 years ago
- [ios] Fix WebView navigation scheme on SDK32 (#3173) # Why Fixes #3168 # How Looks like the navigation scheme of WebView remained incorrect after versioning the code for SDK32. Fixed an iss... — committed to expo/expo by tsapeta 5 years ago
Since nobody mentioned yet: Another workaround is to use
useWebKit={true}option. If you choose to do that you might want to check this: https://facebook.github.io/react-native/blog/2018/08/27/wkwebview@lgandecki besides downgrading
expopackage to31.0.6, you should also setsdkVersionin yourapp.jsonconfig to31.0.0, otherwise Expo Client will continue to use the native code for SDK32 which has this bug.We also apologize that the fix is not available to use yet, but it happened for reasons beyond our control š Weāre really working hard to get it out asap.
Just submitted a new Expo Client build that fixes this issue for Apple review š An update will be available once they approve it.
Glad to see that the
react-native-webviewwill be added to SDK33. As far as I see, I have 2 options for now:react-native-webviewJust wanna be sure: is there any other solution rather than these two?
If not, I really donāt want to downgrade, but Iām wondering whether I can un-eject safely and continue to use
react-native-webviewwith SDK33?@schellack what steps do you take to ādowngrade and reloadā?
Is this released somewhere, or is there a way to use this fix? I wasted a few very frustrating hours today trying to understand what am I doing wrongā¦ š¦ I tried the 32.0.1 but it doesnāt seem to be fixed. I also tried the 31.0.6 and 31.0.0 and they also produce the same result. I changed the expo version and the react-native sdk. to sdk-31. Not sure if this is beacuse of some cache. I removed and reinstalled node_modules, and run expo with expo start -c. I Erased all content and settings on the simulator, and this is still happening.
Donāt want to complain - I understand that this is a free and open source project and I appreciate that. I maintain a few of those by myself. Nonetheless, I would feel bad leaving a regression that brakes applications for weeks on end, especially if the fix is known and mergedā¦
I have the same problem, though only on iOS. Here is a simple snack you can also use as another example: https://snack.expo.io/@salus/posting-from-webview-to-rn
Note that in my example, I am calling an external url as the WebView source. This is to show that the web server is returning a 404, because the
window.postMessagecall is not posting back to the web view (or the web view is not accepting it properly). Instead, the web view is attempting to navigate toReactABI32_0_0-js-navigation://postMessage. Thatās less apparent when running inline html in the web view.If you downgrade the snack to sdk version 31 and reload the app, the problem goes away.
For anyone who may be interested: https://github.com/expo/expo/milestone/22
Sorry @lgandecki for not responding. Yes, weāre still struggling with their review, so Iām afraid that if you want this bug fixed in Expo Client you would have to downgrade to SDK31 š Anyway, the fix for this has been deployed to turtles, so standalone apps should work as expected - I hope thatās enough for you š
Any ideas when this will be published? I just realized that the expo 31 uses the old version of webview which causes iOS really unusable (half a second lag after a click, among other things). Iāve actually rearchitectured my app from ejected back to non-ejected once 32 was released (the only reason for ejection was to use a custom, performant, webview). I would really like to avoid migrating it again to ejected because of this bug, but I do need to release this in a week. š¦
Thank you for an immediate response, and on Sunday! šÆ Yes, app.json did the trick and the āReactABI32_0_0-js-navigation://postMessageā issue disappeared.
The functionality still doesnāt work but I probably messed something up while trying to figure out whatās wrong, so itās probably on my side.
thanks again!
Ok, fixed my problem, so I can confirm - works like a charm on 31 š