From f660a473d32940739f38063add476f9694d562cf Mon Sep 17 00:00:00 2001
From: "Natalie B." <22222885+espeon@users.noreply.github.com>
Date: Fri, 13 Jun 2025 12:39:07 -0500
Subject: [PATCH] slide the ui up when keyboard is shown

---
 js/app/components/mobile-player/ui.tsx      | 12 +++++++-
 js/app/hooks/useOuterAndInnerDimensions.tsx | 32 +++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 js/app/hooks/useOuterAndInnerDimensions.tsx

diff --git a/js/app/components/mobile-player/ui.tsx b/js/app/components/mobile-player/ui.tsx
index 75d13fb58..a632494a5 100644
--- a/js/app/components/mobile-player/ui.tsx
+++ b/js/app/components/mobile-player/ui.tsx
@@ -19,8 +19,10 @@ import Chat from "components/chat/chat";
 import ChatBox from "components/chat/chat-box";
 import { createLivestreamRecord } from "features/bluesky/blueskySlice";
 import useAvatars from "hooks/useAvatars";
+import { useKeyboard } from "hooks/useKeyboard";
+import { useOuterAndInnerDimensions } from "hooks/useOuterAndInnerDimensions";
 import { useEffect, useRef, useState } from "react";
-import { Animated, Dimensions, Image, Pressable } from "react-native";
+import { Animated, Dimensions, Image, Platform, Pressable } from "react-native";
 import { useAppDispatch } from "store/hooks";
 
 export function MobileUi({ playerId }: { playerId: string }) {
@@ -48,6 +50,13 @@ export function MobileUi({ playerId }: { playerId: string }) {
     playerId,
   );
 
+  const { keyboardHeight } = useKeyboard();
+  let { outerHeight, innerHeight } = useOuterAndInnerDimensions();
+  let slideKeyboard = 0;
+  if (Platform.OS === "ios" && keyboardHeight > 0) {
+    slideKeyboard = -keyboardHeight + (outerHeight - innerHeight);
+  }
+
   // Animation values
   const scaleAnim = useRef(new Animated.Value(1)).current;
   const opacityAnim = useRef(new Animated.Value(1)).current;
@@ -198,6 +207,7 @@ export function MobileUi({ playerId }: { playerId: string }) {
             w.percent[100],
             layout.flex.center,
             { opacity: inputOpacity },
+            { transform: [{ translateY: slideKeyboard }] },
           ]}
         >
           <View
diff --git a/js/app/hooks/useOuterAndInnerDimensions.tsx b/js/app/hooks/useOuterAndInnerDimensions.tsx
new file mode 100644
index 000000000..7efa8779c
--- /dev/null
+++ b/js/app/hooks/useOuterAndInnerDimensions.tsx
@@ -0,0 +1,32 @@
+import { useCallback, useState } from "react";
+import { LayoutChangeEvent } from "react-native";
+
+export function useOuterAndInnerDimensions() {
+  const [outerDimensions, setOuterDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  const [innerDimensions, setInnerDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  const onOuterLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setOuterDimensions({ width, height });
+  }, []);
+
+  const onInnerLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setInnerDimensions({ width, height });
+  }, []);
+
+  return {
+    outerWidth: outerDimensions.width,
+    outerHeight: outerDimensions.height,
+    innerWidth: innerDimensions.width,
+    innerHeight: innerDimensions.height,
+    onOuterLayout,
+    onInnerLayout,
+  };
+}
-- 
2.51.2