3. Props

Payment & Apple Pay

If your site has a payment system which needs access to Apple Pay, you need to use the paymentPattern prop.

Name	Required	Default Value	Type
paymentPattern	false	sberbank.ru	string or regex

This will only enable Apple Pay when the URL matches the string or regex.
We can't keep Apple Pay always enabled because this wouldn't allow the app to communicate with the website by injecting JavaScript (needed for swipe to refresh)

Push notifications

One reason you might want an app, is for its native features, such as push notifications.
Of course, PWAs have push notifications too, but their support on IOS is poor.

Thanks to the expo-notifications package, we can easily ask for notifications access on any device.

Request Push Token

Requesting the notification token is unbelievably simple.

Just pass the requestNotificationPermission.

Name	Required	Default Value	Type
requestNotificationPermission	false	false	boolean

Usually you don't want to ask for permission immediately.
That's why we recommend setting a timeout of 1 / 1.5 minutes, after which you set the prop to true:

const App = () => {
  const [requestNotif, setRequestNotif] = useState<boolean>(false);

  useEffect(() => {
    // Request Notifications after 1 minute
    setTimeout(() => setRequestNotif(true), 60 * 1000);
  }, [])

  return <WebApp requestNotificationPermission={requestNotif} />
}

---

Get Push Token

Once you requested the token, you need to get it. For this, use the onPushRegistered prop.

Name	Required	Default Value	Type
onPushRegistered	false	empty function	TOnPushRegistered

Example:

<WebApp 
   requestNotificationPermission
   onPushRegistered={({ pushToken, error }) => {
     if (error)
       return console.error("Error while push registration:", error);

     console.log("new push token", pushToken)
   }}
/>

---

How to use a Token

Expo has a complete documentation on how to use their tokens. Read it here.

Offline screen

When the user goes offline, the library shows an offline screen. This screen automatically disappears when the user is back online.

Text Font

If your brand has its own font, use the expo-font library to load it, then pass its name.

Name	Required	Default Value	Type
fontName	false	custom	string

const App = () => {
    let [fontsLoaded] = useFonts({
        myCustomFont: require("./assets/fonts/myfont.ttf"),
    });


    return (
       <WebApp fontName="myCustomFont" />
    );
}

Text Value

By default, this screen is in Russian, obviously you can change the text according to your website.

Name	Required	Default Value	Type
offlineText	false	{ message: "Вы не подключены к Интернету.", refreshButton: "Обновить" }	{ message?: string; refreshButton?: string; }

Theme

The offline screen has a refresh button in case that the app doesn't automatically detect that the user is back online. This button has a background color you can change:

Name	Required	Default Value	Type
themeColor	false	#583d72	string

Inject JS

Here is how to inject custom JS when the website is loading.

Name	Required	Default Value	Type
customJSInjection	false	empty string	string

Example:

<WebApp customJSInjection={`
   alert("I'm alerting this from the website");
   document.body.style.background="red";
`} />

Custom Events

You might want to send data from the website to the app containing custom information.
This might be used when the user signs in, signs out or other stuff. This is why we created a simple way to communicate with the app

Watch them

If you're using Typescript, it's best to use an enum to store event names and keep the typing:

enum CustomEvents {
  USER_LOGGED_IN = 'USER_LOGGED_IN',
  USER_LOGGED_OUT = 'USER_LOGGED_OUT'
}

If you're using basic JavaScript, you can just create an object containing the values:

const CustomEvents = {
  USER_LOGGED_IN: 'USER_LOGGED_IN',
  USER_LOGGED_OUT: 'USER_LOGGED_OUT'
}

To pass those event names to app, use the customEvents prop.

Name	Required	Default Value	Type
customEvents	false	empty array	string[]

Since the library requires an array, you need to convert your enum/object to an array.
Use our enumToArray function to convert an enum (it works with objects too) to an array.

Example:

import { WebApp, enumToArray } from "react-native-web-app"
<WebApp customEvents={enumToArray(customEvents)} />

Handle them

When the app receives an event from the website, and it corresponds to one of your custom events, the onCustomEvent handler is triggered.

Name	Required	Default Value	Type
onCustomEvent	false	empty function	TOnCustomEvent<T>

Example:

<WebApp
   customEvents={enumToArray(CustomEvents)}
   // The event param automatically has the type of CustomEvents
   onCustomEvent={(event, data) => {
      console.log("Custom event", event, "with data", data);
   }}
/>

How to send an event from the website

You need to use React Native Webview's API.
On your website, do:

window.ReactNativeWebView.postMessage(
   JSON.stringify({
     // event name
     event: "${CustomEvents.USER_LOGGED_IN}",
     // data
     jwt_token: "test123",
     username: "xxxxx"
   })
)

Make sure to stringify the object and always pass the event property (the event name) to the object