Javascript injection into React Native Webview is not working

Question

I am trying to inject javascript into React Native Web view and code I have checked with Google Chrome Inspect does not affect my web view. Even alert function is not displaying any changes in web view. I am checking on iOS simulator.

const runFirst = `
let footer = document.getElementsByTagName("#footer")[0];
footer.style.display='none';
    true;
  `;

return (
  <View style={styles.container}>
    <WebView
      source={{ uri: 'https://mobex.az/' }}
      style={{ flex: 1, marginTop: 40 }}
      bounces={false}
      automaticallyAdjustContentInsets={false}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      startInLoadingState={true}
      injectedJavaScript={runFirst}
    />
  </View>
);

Answer 1

You can try another way to inject the javascript using the webView ref like this

const webViewRef = useRef(null)
<WebView
  source={{ uri: 'https://mobex.az/' }}
  style={{ flex: 1, marginTop: 40 }}
  bounces={false}
  automaticallyAdjustContentInsets={false}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  startInLoadingState={true}
  // instead of injectedJavaScript={runFirst}
  onLoadEnd={() => {
    webViewRef?.current?.injectJavaScript(runFirst)
  }}
/>

you can use onLoadStart if you want the script to be executed first.