1

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.

Atticus
  • 418
  • 2
  • 6
  • 20
  • What version of `react-router`/`react-router-native` are you trying to use? It seems you are mixing v5 and v6 APIs/syntax. – Drew Reese Oct 13 '22 at 23:58
  • both react-router and react-router-native are at v6.4.2 – Atticus Oct 14 '22 at 00:16
  • 1
    Ok, I think the `Switch` component is incorrect then. That *was* a v5 component. The v6 `Route` components should be wrapped in a `Routes` component, and the `element` prop takes a `React.ReactNode`, a.k.a. JSX, i.e. `element={}`. – Drew Reese Oct 14 '22 at 00:24
  • That helps a ton. The errors I was previously seeing have been resolved. Thanks! – Atticus Oct 14 '22 at 00:46

1 Answers1

0

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

ysaurabh33
  • 64
  • 1
  • 6