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