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,
+  };
+}