React Native Webview routing from a Webview to another Webview

Question

I'm working on a React Native page that's rendered in a Webview. My problem is that this page (/about) has links that'll open things like /:id but doesn't open them as a Webview. Here's my About component:

export const About = () => {
  return (
    <SafeAreaView edges={['right', 'top', 'left']} style={{ flex: 1 }}>
      <Webview url={`${BASE_URL}/about`} />
    </SafeAreaView>
  )
}

As things currently stand, I want /:id to be opened in a Webview as well, which has all the various overrides that I want. After digging into react-router-native, I've set up something like:

export const About = () => {
  return (
    <NativeRouter>
      <SafeAreaView edges={['right', 'top', 'left']} style={{ flex: 1 }}>
          // no idea if this link is necessary?
          <Link to="/:id" />
          <Webview url={`${BASE_URL}/about`} />

        <Switch>
          <Route path="/:id" element={OtherWebview} />
        </Switch>
      </SafeAreaView>
    </NativeRouter>
  )
}

But that ended up causing errors elsewhere. I'd love some help on determining if I'm going down the right direction. I have limited experience with React Router, so your input is greatly appreciated. Again, all I want to figure out is a clean way to open the pages from /about to also be in a Webview. I'd be happy to provide more details.

Answer 1

Communicating from WebView Component to react native I think is not possible at this point until you have access to source code of webpage.

Incase you can make changes to webpage code. You can trigger onMessage function from webpage i.e.

<script>
  const sendDataToReactNativeApp = async () => {
    // Replace {id} with your about page id
    window.ReactNativeWebView.postMessage(`{id}`);
  };
</script>

On React native

<WebView onMessage={(data) => console.log("WEBPAGE MSG: ", data)} />

Then you can create State varible and update it from onMessage i.e. id response which can be used for redirect to new screen or update the WebView Component url prop (How ever you like to take it on)

onMessage Docs