CODEWITHSUNDEEP
react-nativeandroid-webview
daveyloder
daveyloder

Reputation: 41

How to hide elements with React Native WebView

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

Upvotes: 2

Views: 2069

Answers (1)

Xhirazi
Xhirazi

Reputation: 857

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

Upvotes: 1

Related Questions