How to hide elements with React Native WebView

user_12960235 0
Viewed 662

Is there a way to hide elements of a source webpage using WebView in React Native? I am working to convert a web app that my company uses to complete meter replacements and make it available on mobile devices such as a phone and I need to hide some elements or certain toggles need to be disabled. I can show code if possible to better help explain. The source web app uses Angularjs

react-native android-webview
1 Answers

You need to write a function on your web side in js which will perform these action when call. Like write a function toggleView which contain your business logic.

You can pass some js code to Webview on start on webpage using injectedJavaScript prop.

So what you should have to do just write a JS code like below

const injectedJavaScript =
  (function() {
    toggleView();
    // other functions aswell
  })();

and pass this js to Webview like

<WebView
      source={{uri}}
      injectedJavaScript={injectedJavaScript}
    />

You can also communicate from your web to mobile app by passing

window.ReactNativeWebView.postMessage(event);

from web.

and now get this event in Webview prop onMessage

user_68904140
Related