Avoid overlap against phone header when tabs selector is open

1 files changed, 22 insertions, 8 deletions

diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index 25e572ddb..3067f3976 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -8,12 +8,14 @@ import {
   StyleSheet,
   Text,
   TouchableOpacity,
+  useColorScheme,
   View,
   ViewStyle,
 } from 'react-native'
 import {ScreenContainer, Screen} from 'react-native-screens'
 import LinearGradient from 'react-native-linear-gradient'
 import {GestureDetector, Gesture} from 'react-native-gesture-handler'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -142,6 +144,8 @@ export const MobileShell: React.FC = observer(() => {
   const winDim = useWindowDimensions()
   const swipeGestureInterp = useSharedValue<number>(0)
   const tabMenuInterp = useSharedValue<number>(0)
+  const colorScheme = useColorScheme()
+  const safeAreaInsets = useSafeAreaInsets()
   const screenRenderDesc = constructScreenRenderDesc(store.nav)
 
   const onPressHome = () => {
@@ -274,6 +278,15 @@ export const MobileShell: React.FC = observer(() => {
           </ScreenContainer>
         </GestureDetector>
       </SafeAreaView>
+      {isTabsSelectorActive ? (
+        <View
+          style={[
+            styles.topBarProtector,
+            colorScheme === 'dark' ? styles.topBarProtectorDark : undefined,
+            {height: safeAreaInsets.top},
+          ]}
+        />
+      ) : undefined}
       <TabsSelector
         active={isTabsSelectorActive}
         tabMenuInterp={tabMenuInterp}
@@ -379,15 +392,16 @@ const styles = StyleSheet.create({
     backgroundColor: '#000',
     opacity: 0.5,
   },
-  topBar: {
-    flexDirection: 'row',
+  topBarProtector: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 50, // will be overwritten by insets
     backgroundColor: colors.white,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.gray2,
-    paddingLeft: 10,
-    paddingRight: 10,
-    paddingTop: 40,
-    paddingBottom: 5,
+  },
+  topBarProtectorDark: {
+    backgroundColor: colors.black,
   },
   avi: {
     width: 34,