From fa6a540dd6c231c853013abb72a825e9be9a3733 Mon Sep 17 00:00:00 2001
From: duogenesis <136373989+duogenesis@users.noreply.github.com>
Date: Mon, 30 Oct 2023 04:16:13 +1100
Subject: [PATCH] Make the browser back button work (#113)

---
 App.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/App.tsx b/App.tsx
index 060f0964..3fb5aa1e 100644
--- a/App.tsx
+++ b/App.tsx
@@ -15,6 +15,7 @@ import {
 import {
   DefaultTheme,
   NavigationContainer,
+  NavigationContainerRef,
 } from '@react-navigation/native';
 
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
@@ -139,6 +140,7 @@ const App = () => {
   const [serverStatus, setServerStatus] = useState<ServerStatus>("ok");
   [signedInUser, setSignedInUser] = useState<SignedInUser | undefined>();
   [referrerId, setReferrerId] = useState<string | undefined>();
+  const navigationContainerRef = useRef<any>();
 
   const loadFonts = useCallback(async () => {
     await Font.loadAsync({
@@ -266,6 +268,26 @@ const App = () => {
     })();
   }, [signedInUser?.personId, signedInUser?.sessionToken]);
 
+  const pushBrowserState = Platform.OS !== 'web' ? undefined : useCallback(() => {
+    history.pushState((history?.state ?? 0) + 1, "", "#");
+  }, []);
+
+  if (Platform.OS === 'web') {
+    useEffect(() => {
+      const handlePopstate = (ev) => {
+        ev.preventDefault();
+
+        const navigationContainer = navigationContainerRef?.current;
+
+        if (navigationContainer) {
+          navigationContainer.goBack();
+        }
+      };
+
+      window.addEventListener('popstate', handlePopstate);
+    }, []);
+  }
+
   const onLayoutRootView = useCallback(async () => {
     if (!isLoading) {
       await SplashScreen.hideAsync();
@@ -280,6 +302,8 @@ const App = () => {
     <>
       {!isLoading &&
         <NavigationContainer
+          ref={navigationContainerRef}
+          onStateChange={pushBrowserState}
           theme={{
             ...DefaultTheme,
             colors: {