React Native Integration

This example demonstrates how to integrate the Hubble Gift Card Store SDK in a React Native application.

import { router } from "expo-router";
import { useEffect, useRef, useState } from "react";
import { BackHandler, Linking, SafeAreaView, Text, View } from "react-native";
import WebView, { WebViewMessageEvent } from "react-native-webview";
import { ShouldStartLoadRequest } from "react-native-webview/lib/WebViewTypes";

type HubbleENV = "debug" | "prod";
type HubbleParams = {
  authToken: string;
  clientId: string;
  clientSecret: string;
  wrapPlt: string;
  page?: string;
  env: HubbleENV;
};

export default function HubbleWebView() {
  const params = {
    authToken: "authToken", // your auth token
    clientId: "id_given_by_hubble",
    clientSecret: "secret_given_by_hubble",
    env: "debug",
    wrapPlt: "rn",
    // page: "transactions", // optional initial page to load, default is home
  } as HubbleParams;

  const baseUrl = "https://vouchers.dev.myhubble.money/classic";
  const sourceUrl = `${baseUrl}?clientId=${params.clientId}&clientSecret=${params.clientSecret}&token=${params.authToken}&wrap-plt=${params.wrapPlt}&env=${params.env}&page=${params.page}`;

  const webViewRef = useRef<WebView>(null);

  //maintain a variable to keep track of state, if it can be popped or not
  const [canGoBack, setCanGoBack] = useState(false);

  useEffect(() => {
    const backAction = () => {
      if (canGoBack && webViewRef.current) {
        webViewRef.current.goBack();
        return true; // prevent default behavior (app exit)
      }
      return false; // allow default behavior
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, [canGoBack]);

  const onShouldStartLoadWithRequest = (e: ShouldStartLoadRequest) => {
    if (e.url?.indexOf(baseUrl) === 0) {
      return true;
    } else {
      Linking.openURL(e.url);
      return false;
    }
  };

  const handleEvent = (e: WebViewMessageEvent) => {
    console.log("event", e.nativeEvent.data);
    const eventData = JSON.parse(e.nativeEvent.data);
    const { properties, event, action } = eventData;
    let eventParams = {
      eventName: event,
    };
    if (properties) {
      eventParams = { ...eventParams, ...properties };
    }
    if (action === "close") {
      router.back();
    }
    logEvent(event, eventParams);
  };

  function logEvent(eventType: string, eventParams: any) {
    // your implementation of sending events to analytics
    console.log("eventType", eventType);
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        showsVerticalScrollIndicator={false}
        javaScriptEnabled={true}
        startInLoadingState={true}
        webviewDebuggingEnabled={true} // Disable at your end
        cacheEnabled={false} // Disable at your end
        source={{ uri: `${sourceUrl}` }}
        setSupportMultipleWindows={true}
        javaScriptCanOpenWindowsAutomatically={true} // has to be true
        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
        originWhitelist={["*"]}
        onMessage={handleEvent}
        onNavigationStateChange={(navState) => {
          setCanGoBack(navState.canGoBack);
        }}
      />
    </SafeAreaView>
  );
}