How to hide specific buttons in Webview while rendering HTML in react native

Question

I am showing embedded iframe document in my application, what I am trying to do is hiding menu button from top bar in Webview and full screen button from bottom of this embedded iframe. I am using DocumentCloud platform for storing and retrieving the documents, DocumentCloud gives me the link of my document and I add that my html and rendering it using react-native-webview . This is my iframe tag link, you can open it browser. I did tried achieving this using changing fields/options in iframe src url which is probably best solution for it, but I couldn't find any option to turn that thing off in document cloud documentation. I am getting this results.

I want to hide the icons I have highlighted in above image.

iFrame looks like this

 <iframe loading="lazy" src="https://embed.documentcloud.org/documents/23488817-introductory-material-to-the-final-report-of-the-select-committee2/?embed=1&responsive=1&title=1" title="introductory-material-to-the-final-report-of-the-select-committee2 (Hosted by DocumentCloud)" width="700" height="800" sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox" frameborder="0"></iframe>

This is how I am rendering Webview.

<WebView
          scrollEnabled={false}
          onMessage={onWebMessage}
          allowsInlineMediaPlayback
          style={styles.webView}
          containerStyle={styles.webViewContainer}
          mediaPlaybackRequiresUserAction={false}
          source={{
            html: MAIN_HTML(
              iframeTag,
              viewportWidth
            ),
          }}

        />

MainHTML method is wrapping iframe tag within in html and doing some styling and reporting the height and width of iframe.

Answer 1

You can injectJavaScript and query these buttons with 2 selectors:

document.querySelector('.hamburger')

returns div with svg

document.querySelector('.fullscreen')

returns span with svg

Hiding is something like:

document.querySelector('.hamburger').style.display = "none";