Try to inject js like this way:

   const jsCode = `document.querySelector('.HeaderHero').style.backgroundColor = 'purple';`;
    return (
      <View style={styles.container}>
        <WebView
          ref={ref => {
            this.webview = ref;
          }}
          source={{ uri: this.state.webViewUrl }}
          originWhitelist={['*']}
          injectedJavaScript={jsCode}
        />
      </View>
    );
  }

for more options take a look: Medium: Injecting JavaScript into React Native Webview

If you simply want to set global variable, you can use injectedJavaScript prop which will inject your js code into the web page when the view loads. Where you can simply pass js code as string.

And if you want to set global variable from any function then you can do the following: First of all take ref of webview.

<WebView
     ref={ref => (this.webview = ref)}
     ...
/>

then whenever you want to inject js code, do the following:

this.webview.injectJavaScript('window.testMessage = "hello world"; void(0);');

Have a look at link for reference.

https://snack.expo.io/Hke6dJFAW

Add onMessage method does work.

import React, { Component } from 'react';
import { Platform,
  StyleSheet,
  Text,
  View,
  WebView
} from 'react-native';

export default class App extends Component<{}> {
  render() {
    return 
      <WebView 
        javaScriptEnabled={true}
        injectedJavaScript={'alert("hello")'} 
        source={{uri:"https://www.google.com"}} style={{ marginTop: 20 }}
        onMessage={(event) => {
          console.log('event: ', event)
        }}
      />;
  }
}

You should include onMessage={(event) => {}} in the WebView

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md

An onMessage event is required as well to inject the JavaScript code into the WebView.

<WebView 
      source={{ uri: "https://www.google.com/" }}
      renderLoading={LoadingIndicatorView}
      startInLoadingState={true}
      javaScriptEnabled={true}
      injectedJavaScript={runFirst}
      onMessage={(event) => {}}
/>

After struggling I found the solution for second script. I am using below piece of code for second script to run. Hope it may help others.

  const jsCode = `setTimeout(() => {
    const extractCart = async () => {
      async function extractItems() {
        const responsePromise = await fetch('https://www2.hm.com/tr_tr/v1/carts', {
          credentials: 'include',
        });
        const response = await responsePromise.json();
        return response;
      }
      const res =  await extractItems();
      window.ReactNativeWebView.postMessage(JSON.stringify(res));
    };
    extractCart();
  }, 2000);`;

The main idea is to use injectJavaScript on page load.

const App = () => {
  const webViewRef = React.useRef<WebView>(null);
  const reloadsCount = React.useRef<number>(0);
  const onLoadInjected = `
    window.addEventListener('load', (event) => {
      window.ReactNativeWebView.postMessage('InjectNewCode');
    });
  `;

  const injectNewJsCode = () => {
    webViewRef.current?.injectJavaScript(`alert('new code injected')`)
    reloadsCount.current++
  }

  return (
    <WebView
      ref={ webViewRef }
      pullToRefreshEnabled={ true }
      source={{
        uri: 'https://stackoverflow.com/questions/74386954/how-to-reinject-javascript-when-a-react-native-webview-reloads',
      }}
      onMessage={ ({ nativeEvent }) => {
        if (nativeEvent.data === 'InjectNewCode') {
          // skip the inital load event
          if (reloadsCount.current > 0) {
            injectNewJsCode()
          }
          reloadsCount.current++
        }
      }}
      injectedJavaScript={ onLoadInjected }
    />
  );
};

As long as you have control over the javascript you want to invoke, you can change the hash context of a url without the webview reloading. So if you set the webview url to append #route-id=125123123 to the current url, listening in JS for the onhashchange event will let you perform the action.

Look at the official document of the webview and see how to use it. Always refer to official documents when writing modules.

You can use this

const WebAPICode = `alert('Hello')`;
...
      <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          javaScriptEnabled={true}
          injectedJavaScript={WebAPICode}
        />

If you have this function on your web, you can call it.

<html>
<head>
    <script language="javascript">
    function test()
    {
         alert('Hello');
    }
   </script>
</head>
<body>
...

const WebAPICode = `test()`;
...
      <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          javaScriptEnabled={true}
          injectedJavaScript={WebAPICode}
        />

To execute the data shown in the comments, you have to do this.

Your webview page do this

var data = {name: "getname"}
window.ReactNativeWebView.postMessage(data);

  handleMessage(e) {
    //여러 데이터가 리스트 형식으로 올때
    let parsedata = JSON.parse(e.nativeEvent.data);
    message = parsedata.name
    if(message == "get name") {
       const data = { name: "John"  }
    this.webview.postMessage(JSON.stringify(data));
    } 
  }
<WebView
 ref={webview => (this.webview = webview)}
 onMessage={mssage => this.handleMessage(mssage)}
}

Receive webview page

document.addEventListener("message", function(event) {
    console.log("Received post message", event);

    test(event.data);
}, false);