How to hide header element using react-native-webview

Question

I want to hide the header element from webview. I have written code as below, but i am not able to hide the header bar from webview. I am using react-native-webview library to implement this. Can someone help me with this. Thank you in Advance.

const jsCode = `
  let selector = document.querySelector("header");
  selector.style.display = "none"
  true; 
`;

return (
  <WebView
    source={{
      uri: 'url',
    }}
    onMessage={(event) => {}}
    startInLoadingState={true}
    injectedJavaScript={jsCode}
  />
);

Answer 1

Try using, CSS Injection (consider browser compatibility): Inject CSS code to hide the header element using injectedJavaScript or other methods.

Example:

const injectedJavaScript = `
  const style = document.createElement('style');
  style.innerHTML = `
    #header-id {
      display: none;
    }
  `;
  document.head.appendChild(style);
`;