onMessage not triggering on Android (working fine on iOS)

I’m implementing a web scraper in my managed Expo app, which requires injecting JavaScript to capture certain elements.

Below is a snapshot of my WebView class:

import Colors from 'constants/Colors'
import React, { useRef } from 'react'
import { StyleSheet, View } from 'react-native'
import { WebView } from 'react-native-webview'
import ....

const buildIdDefault="00000000.00_v0.00.0"
const WebView2 = () => {
    const webviewRef = useRef(null)
    const buildIdRef = useRef(null)
    const { insert } = useReceiptDb()

    const injectGetBuildId = `
     console.defaultLog = console.log.bind(console);
                console.logs = [];
                console.log = function(log){
                    // default &  console.log()
                    console.defaultLog.apply(console, arguments);
                    // new & array data
                    console.logs.push(Array.from(arguments));
                    // window.ReactNativeWebView.postMessage(log);
                    window.ReactNativeWebView.postMessage(Array.from(arguments));
                }
    `

/// further operations....

return (
        <View style={styles.outerContainer}>
            <WebView
                ref={webviewRef}
                source={{
                    uri: 'https://...',
                }}
                style={styles.container}
                onMessage={async (event) => {
                    const data = event.nativeEvent.data
                    Log(`onMessage`, data)
                    if (data?.toLowerCase().includes('package version')) {
                        return
                    }
                    if (data?.toLowerCase()?.includes('build id')) {
                        const splits = data?.split(',')
                        buildIdRef.current = splits?.[1]
                        Log('build id', splits)
                        return
                    }
                    handleOnMessage(data)
                }}
                javaScriptEnabled={true}
                onLoad={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent
                    const url = nativeEvent.url
                    handleInjectJS(url)
                }}
                injectedJavaScript={injectGetBuildId}
            />
        </View>
    )
}

The issue is that onMessage is not being triggered in the Android environment to retrieve the correct buildId from the WebView console. Instead, it defaults to buildIdDefault, which is declared at the top. It works perfectly fine on iOS.

Environment:

Managed Expo, running the latest SDK 51

I would greatly appreciate any assistance in identifying the issue.

You need to sign in to view this answers