From 7624890ffc0ad40d22eaceee2c9e7ec1d45b8271 Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@stream.place>
Date: Fri, 10 Apr 2026 15:07:31 -0500
Subject: [PATCH] requested fixes :)

---
 js/app/components/get-apps.tsx          | 17 ++----------
 js/app/components/mobile-app-banner.tsx | 37 ++++++++-----------------
 js/app/constants/store-urls.ts          |  9 ++++++
 js/app/hooks/usePlatform.native.tsx     |  3 ++
 js/app/hooks/usePlatform.shared.tsx     |  7 +++++
 js/app/hooks/usePlatform.tsx            |  3 ++
 6 files changed, 36 insertions(+), 40 deletions(-)
 create mode 100644 js/app/constants/store-urls.ts

diff --git a/js/app/components/get-apps.tsx b/js/app/components/get-apps.tsx
index 79dadd7c5..313bbd60d 100644
--- a/js/app/components/get-apps.tsx
+++ b/js/app/components/get-apps.tsx
@@ -1,3 +1,4 @@
+import { STORE_URLS } from "constants/store-urls";
 import { Image } from "expo-image";
 import { Linking, TouchableOpacity, View } from "react-native";
 
@@ -8,25 +9,13 @@ const HEIGHT = 200 / RATIO;
 export default function GetApps() {
   return (
     <View style={[{ justifyContent: "center" }, { flexDirection: "row" }]}>
-      <TouchableOpacity
-        onPress={() =>
-          Linking.openURL(
-            "https://apps.apple.com/us/app/streamplace/id6535653195",
-          )
-        }
-      >
+      <TouchableOpacity onPress={() => Linking.openURL(STORE_URLS.ios)}>
         <Image
           style={[{ width: WIDTH, height: HEIGHT, marginHorizontal: 8 }]}
           source={require("../assets/images/appstore.svg")}
         />
       </TouchableOpacity>
-      <TouchableOpacity
-        onPress={() =>
-          Linking.openURL(
-            "https://play.google.com/store/apps/details?id=tv.aquareum",
-          )
-        }
-      >
+      <TouchableOpacity onPress={() => Linking.openURL(STORE_URLS.android)}>
         <Image
           style={[{ width: WIDTH, height: HEIGHT, marginHorizontal: 8 }]}
           source={require("../assets/images/playstore.svg")}
diff --git a/js/app/components/mobile-app-banner.tsx b/js/app/components/mobile-app-banner.tsx
index b90377e2b..e1e53e3f3 100644
--- a/js/app/components/mobile-app-banner.tsx
+++ b/js/app/components/mobile-app-banner.tsx
@@ -10,37 +10,16 @@ import {
   py,
   r,
 } from "@streamplace/components/src/lib/theme/atoms";
+import { STORE_LABELS, STORE_URLS } from "constants/store-urls";
 import { Image } from "expo-image";
+import usePlatform from "hooks/usePlatform.native";
 import { X } from "lucide-react-native";
 import { useState } from "react";
-import { Linking, Platform, Pressable } from "react-native";
+import { Linking, Pressable } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const DISMISSED_KEY = "mobile_app_banner_dismissed";
 
-function getMobilePlatform(): "ios" | "android" | null {
-  if (Platform.OS !== "web") return null;
-  const ua = navigator.userAgent;
-  const isIOS = /iPhone|iPad|iPod/.test(ua);
-  const isSafari = /Safari/.test(ua) && !/CriOS|FxiOS|EdgiOS/.test(ua);
-  const isAndroid = /Android/.test(ua);
-  if (isAndroid) return "android";
-  // iOS Safari shows the native Smart App Banner via the apple-itunes-app meta
-  // tag, so only show our custom banner for other browsers on iOS.
-  if (isIOS && !isSafari) return "ios";
-  return null;
-}
-
-const STORE_URLS = {
-  ios: "https://apps.apple.com/us/app/streamplace/id6535653195",
-  android: "https://play.google.com/store/apps/details?id=tv.aquareum",
-};
-
-const STORE_LABELS = {
-  ios: "App Store",
-  android: "Google Play",
-};
-
 export function MobileAppBanner() {
   const [dismissed, setDismissed] = useState(() => {
     try {
@@ -51,9 +30,13 @@ export function MobileAppBanner() {
   });
 
   const insets = useSafeAreaInsets();
-  const mobilePlatform = getMobilePlatform();
+  const platform = usePlatform();
 
-  if (dismissed || !mobilePlatform) return null;
+  if (
+    dismissed ||
+    !((platform.isWebIOS && !platform.isMobileSafari) || platform.isWebAndroid)
+  )
+    return null;
 
   const dismiss = () => {
     try {
@@ -62,6 +45,8 @@ export function MobileAppBanner() {
     setDismissed(true);
   };
 
+  const mobilePlatform = platform.isWebIOS ? "ios" : "android";
+
   return (
     <View
       style={[
diff --git a/js/app/constants/store-urls.ts b/js/app/constants/store-urls.ts
new file mode 100644
index 000000000..ca605d85b
--- /dev/null
+++ b/js/app/constants/store-urls.ts
@@ -0,0 +1,9 @@
+export const STORE_URLS = {
+  ios: "https://apps.apple.com/us/app/streamplace/id6535653195",
+  android: "https://play.google.com/store/apps/details?id=tv.aquareum",
+};
+
+export const STORE_LABELS = {
+  ios: "App Store",
+  android: "Google Play",
+};
diff --git a/js/app/hooks/usePlatform.native.tsx b/js/app/hooks/usePlatform.native.tsx
index cfacb8d91..0548fa4e7 100644
--- a/js/app/hooks/usePlatform.native.tsx
+++ b/js/app/hooks/usePlatform.native.tsx
@@ -14,5 +14,8 @@ export default function usePlatform(): IsPlatform {
     isSafari: false,
     isChrome: false,
     isFirefox: false,
+    isMobileSafari: false,
+    isWebAndroid: false,
+    isWebIOS: false,
   };
 }
diff --git a/js/app/hooks/usePlatform.shared.tsx b/js/app/hooks/usePlatform.shared.tsx
index 442adb108..5a2362f4d 100644
--- a/js/app/hooks/usePlatform.shared.tsx
+++ b/js/app/hooks/usePlatform.shared.tsx
@@ -4,6 +4,9 @@ export type IsPlatform = {
   isAndroid: boolean;
 
   isWeb: boolean;
+  isWebAndroid: boolean;
+  isWebIOS: boolean;
+
   isElectron: boolean;
   isBrowser: boolean;
 
@@ -14,5 +17,9 @@ export type IsPlatform = {
   // don't rely on this! just for defaults
   isFirefox: boolean;
 
+  // True for Mobile Safari, which already shows a native app banner,
+  // so we skip our custom one.
+  isMobileSafari: boolean;
+
   topSafeHeight: () => number;
 };
diff --git a/js/app/hooks/usePlatform.tsx b/js/app/hooks/usePlatform.tsx
index d92f4366d..44b39e6cc 100644
--- a/js/app/hooks/usePlatform.tsx
+++ b/js/app/hooks/usePlatform.tsx
@@ -25,10 +25,13 @@ export default function usePlatform(): IsPlatform {
     isIOS: false,
     isAndroid: false,
     isWeb: true,
+    isWebAndroid: /Android/.test(ua),
+    isWebIOS: /iPhone|iPad|iPod/.test(ua),
     isElectron: electron,
     isBrowser: !electron,
     isSafari: ua.browser.name.includes("Safari"),
     isFirefox: ua.browser.name === "Firefox",
     isChrome: ua.browser.name === "Chrome",
+    isMobileSafari: /Safari/.test(ua) && !/CriOS|FxiOS|EdgiOS/.test(ua),
   };
 }
-- 
2.51.2