react-native-webview: onMessage did not triggering in release apk but worked in debug mode

When Its is in debug mode OnMessage function triggered but when I build the Apk file it does not triggered

onWebviewLoaded = () => { if(this.props.storeName) { let storeName = this.props.storeName.toLowerCase(); storeName = storeName.replace(/ +/g, “”); console.log("storeName: ", storeName);

        let storeAttribute = this.props.scrapingAttributes[storeName];
        console.log("storeAttribute: ", storeAttribute);
        let jsCode = `
                     ${getMultipleInfoFromXpath}
                     ${trimString}
                     ${getValueByRegEx}
                     ${removeByRegEx}
                     let attributes = ${JSON.stringify(storeAttribute)};
                     let data = {};
                     for(let i in attributes){
                          data[i] = getMultipleInfoFromXpath(attributes[i])
                     }
                     window.ReactNativeWebView.postMessage(JSON.stringify(data))
                  `;

        this.setState({
            loaded: true,
            jsCode
        })
    }
};

onMessage = (data) => {
    let {productBrand, productImage, productName, productNewPrice ,productColor, productSize} = JSON.parse(data) ;
    this.setState({
        webInfo: JSON.parse(data),
        brand: productBrand[0],
        imageUrl:productImage[0],
        name: productName[0],
        newPrice: productNewPrice[0],
        productColor,
        productSize
    });
    Alert.alert(
        'onMessage',
        'My Alert Msg',
        [
            {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
            {
                text: 'Cancel',
                onPress: () => console.log('Cancel Pressed'),
                style: 'cancel',
            },
            {text: 'OK', onPress: () => console.log('OK Pressed')},
        ],
        {cancelable: false},
    );
};

<WebView ref={r => this.webview = r} source={{uri: url}} renderLoading={this.renderLoading} startInLoadingState={true} onLoadEnd={this.onWebviewLoaded} onNavigationStateChange={(webViewState)=>{this.setState({ trackedUrl: webViewState.url, brand: ‘’, imageUrl:‘’, name: ‘’, newPrice: ‘’, productColor:[], productSize:[] })}} injectedJavaScript={loaded ? jsCode : null} onMessage = {(e) => {this.onMessage(e.nativeEvent.data)}} javaScriptEnabled={true} />

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 22

Most upvoted comments

I have the same problem with you, Android debug and iOS are all running smoothly. only android release is never called onMessage. any solution?

hiennguyen92 on May 28, 2019

@expouic Is there any console.log which is printing event of onMessage callback if yes, then please strip it out.

codesinghanoop on Aug 27, 2019

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

github-actions[bot] on Oct 27, 2019

same

2linziyi2 on Jun 12, 2019

@expouic Is there any console.log which is printing event of onMessage callback if yes, then please strip it out.

After hours of debugging i found the solution ( for my case ) just removing console.log of response of onMessage action!

onMessage(event){
    console.log('callback from webView', event);
}

just replace event to event.nativeEvent.data

onMessage(event){
    console.log('callback from webView', event.nativeEvent.data);
}

jon-moreira on Aug 27, 2019

i had the same issue. 2 solutions:

use window.ReactNativeWebView.postMessage insteam of window.postMessage add event.isDefaultPrevented(true) in the first line of your onMessage method

BhaveshLakhpati on Aug 22, 2019

@Titozzz I have a similar case. When I serve an HTTPS website, window.ReactNativeWebView.postMessage does not work on android. But everything works fine at HTTP version of the website.

I use “react-native”: “0.59.3”, “react-native-webview”: “^5.10.0”

alisivgin on Jun 24, 2019

try adding originWhitelist={[‘*’]} to your WebView. i had the same problem few days ago. also posting message on last versions changed : window.ReactNativeWebView.postMessage

kamiky on Jun 14, 2019

I can’t use your component with this bug. I stay use default RN webView. RN implementation (RN v 0.59.9):

<WebView                      
        injectedJavaScript={patchPostMessageJsCode}  <-- FIX for IOS 
        source={{ uri: url }}            
        onMessage={({nativeEvent}) =>  { 
                   console.log('messageObj ', 
                      decodeURIComponent(decodeURIComponent(nativeEvent.data)));  <-- MUST decode twice for get norma string                      
              }
          }            
/>

JS implementation in site:

window.postMessage(JSON.stringify(data), window.origin);

AndreyPatseiko on Jun 14, 2019