From 9101e102a2de4d88da6f6d3d395651632da7bedb Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 19 Jun 2025 15:14:00 -0700
Subject: [PATCH] [qa-1758] Fix Android keyboard and bottom bar

---
 .../bottom-tab-bar/BottomTabBar.tsx           | 19 ++++++++++++++++---
 .../components/core/Screen/ScreenContent.tsx  |  2 +-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/mobile/src/components/bottom-tab-bar/BottomTabBar.tsx b/packages/mobile/src/components/bottom-tab-bar/BottomTabBar.tsx
index f5acde274ba..f43b9e6888d 100644
--- a/packages/mobile/src/components/bottom-tab-bar/BottomTabBar.tsx
+++ b/packages/mobile/src/components/bottom-tab-bar/BottomTabBar.tsx
@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 import type { BottomTabBarProps as RNBottomTabBarProps } from '@react-navigation/bottom-tabs'
 import type { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs/lib/typescript/src/types'
 import type { NavigationHelpers, ParamListBase } from '@react-navigation/native'
-import { Animated } from 'react-native'
+import { Animated, Platform } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { Flex } from '@audius/harmony-native'
@@ -102,11 +102,24 @@ export const BottomTabBar = (props: BottomTabBarProps) => {
     })
   }, [navigation])
 
+  const isAndroid = Platform.OS === 'android'
+
   return (
     <Animated.View
       style={[
-        { zIndex: 4, elevation: 4 },
-        interpolatePostion(translationAnim, insets.bottom)
+        {
+          zIndex: 4,
+          elevation: 4,
+          // If not absolutely positioned, the bottom tab bar will float above the keyboard
+          ...(isAndroid && {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: 'white'
+          })
+        },
+        !isAndroid && interpolatePostion(translationAnim, insets.bottom)
       ]}
     >
       <Flex
diff --git a/packages/mobile/src/components/core/Screen/ScreenContent.tsx b/packages/mobile/src/components/core/Screen/ScreenContent.tsx
index fd7bf57b023..4a45d96d462 100644
--- a/packages/mobile/src/components/core/Screen/ScreenContent.tsx
+++ b/packages/mobile/src/components/core/Screen/ScreenContent.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import React, { type ReactNode } from 'react'
 
 import { reachabilitySelectors } from '@audius/common/store'
 import Animated, { FadeIn } from 'react-native-reanimated'