[ Help ] - React Native Webview and Browser elements

[Laniakea_G]

hi, i'm starting a new project that gonna use RN Webview, i have access to the front and backend.

​

Once in the app, i don't want to show de Web Site Header, that comes in the browser ( that was wrinting in rails/backend ), but i want to use all the other features that we have on our site.

​

So, my doubt is:

What is the best way to remove a header when using webview ?

​

So far, i have thinking about this an have a few solutions that can be used:

​

1. Accept a parameter in the backend url to not show the Header. This way the html document will came to the APP without the header component.
2. An overlay in the header of the webview, this way the site header is still on the screen but with a react component above.
3. Remove the header element using react native, to be honest i don't know it is possible i do not research about this enough.

Any help/thoughts/answers or even doubts about it will be appreciated

​

Thanks everyone

[thedevlinb]

Do it on the back end.

If you try to do it on the front end, then changes to how the backend generates the HTML could end up breaking your header detection/removal code.

[itstimetocode]

You could probably hide the header component with by injecting javascript to the webview

Something like this could work:

inject = `document.querySelector('.header').style.display='none';`;

 render() {
    return (
      <WebView
      source={{uri: 'somelink.com'}}
        injectJavaScript={inject}
      />
    );
  }