Skip to main content

Webviews

What is a Web View?​

Some of our app screens, or views, are not implemented in the react native app itself. They are instead displayed through a screen that renders an in-app browser view, called a webviews, displaying the desired content through the current VueJS web app that runs our websites.

To do this, we use the React Native Community's Webview library.

Webviews in our native apps​

The Webview loads a web app with a query param isBodyOnly=true to hide header and footer.

At some point we need to go back and add them as part of a react native app.

They are:

  • How to (/how-to/*)

  • Multibuilder (/multibuilder)

  • Merchant card (/${brand}-card)

  • Verification (/account/verification)

  • Find a store for Cashin and Flexepin (/account/deposit/cash-in/find-store)

  • Punter Assist - Activity Statement (/account/punter-assist/activity-statement)

  • Punter Assist - Block Out (/account/punter-assist/block-out)

  • Punter Assist - Responsible Gambling (/account/punter-assist/responsible-gambling)

  • Live Vision (/racing-live-vision and /sports-live-vision)

  • Terms & Conditions (/rules-terms-and-conditions)

Hiding other Frontend content from React Native WebViews​

In the frontend repository, there are many features and functions that we want to hide from a page when the page is viewed via a React Native Web View. This code usually looks something like if (!window.ReactNativeWebView) { do something on the page but not if it's a webview }

When using the <WebView /> component within React Native, to enable this window property to be injected into the rendered web page, you must include the onMessage prop on the WebView component. E.g:

import { WebView } from "react-native-webview";
import { onMessage } from "@app/utils/webview";

const SomeComponentOrScreen = () => {
  return (
    <WebView
      // other props...
      onMessage={(event) => onMessage({ event })}
    />
  );
};