I'm trying to call a function defined on the web, but nothing happens

I'm trying to open a simple page with React Native WebView. It's a single page web, and when you do a search, it prints out some information about your search.

After that, if you want to search again, press the back button on the device to move to the search box.

Because it is a single page, I cannot use goBack, so I created a function called cancel.

The problem is that when I click the device's back button, the function called cancel defined on the web is not executed.

The cancel function deletes the searched information and returns to the search window.

I will upload my code.

Please advise.

export default function App() {
  const webviewRef = useRef(null);
  
  const backAction = () => {
    setBackTapping((prev) => prev += 1);
    webviewRef.current.injectJavaScript('window.cancel()')
    return true;
  }

  useEffect(() => {
    const timer = setInterval(() => {
      setBackTapping(0)
    }, 1000)
    return () => clearInterval(timer);
  }, [])

  useEffect(() => {
    const backHandler = BackHandler.addEventListener('hardwareBackPress',backAction);
    return () => backHandler.remove()
  }, [])

  useEffect(() => {
    if(backTapping >= 2){
      return BackHandler.exitApp();
    }
  },[backTapping])
  

  return (
    <KeyboardAvoidingView style={{ flex: 1 }}>
    <StatusBar hidden />
    
    <WebView
      ref={webviewRef}
      textZoom={100}
      originWhitelist={['*']}
      javaScriptEnabled
      source={{ uri: 'myhome.com'}}
      startInLoadingState={true}
    />
    </KeyboardAvoidingView>
  );
}

Expected behavior:

The cancel function is executed, all open windows are closed, and you are returned to the search window.

in my case, calling is wrong.

instead of :

webviewRef.current.injectJavaScript('window.cancel()')

use :

  const generateOnMessageFunction = (data) => `
    (function(){
      window.dispatchEvent(new MessageEvent('message',{data: ${JSON.stringify(data)}}));
    })()
  `;
  webviewRef.current.injectJavaScript(generateOnMessageFunction('cancel'));

detail referance : https://github.com/react-native-webview/react-native-webview/issues/809