refactor(mobile): remove useBottomTabInset, rely on NativeTabs automatic insets

Author: gaboesquivel

apps/mobile/src/app/explore.tsx

@@ -9,15 +9,13 @@ import { ThemedView } from '@/components/themed-view'
 import { Collapsible } from '@/components/ui/collapsible'
 import { WebBadge } from '@/components/web-badge'
 import { MaxContentWidth, Spacing } from '@/constants/theme'
-import { useBottomTabInset } from '@/hooks/use-bottom-tab-inset'
 import { useTheme } from '@/hooks/use-theme'
 
 export default function TabTwoScreen() {
   const safeAreaInsets = useSafeAreaInsets()
-  const { full: bottomTabInset } = useBottomTabInset()
   const insets = {
     ...safeAreaInsets,
-    bottom: bottomTabInset + Spacing.three,
+    bottom: safeAreaInsets.bottom + Spacing.three,
   }
   const theme = useTheme()
 

apps/mobile/src/app/index.tsx

@@ -8,7 +8,6 @@ import { ThemedText } from '@/components/themed-text'
 import { ThemedView } from '@/components/themed-view'
 import { WebBadge } from '@/components/web-badge'
 import { MaxContentWidth, Spacing } from '@/constants/theme'
-import { useBottomTabInset } from '@/hooks/use-bottom-tab-inset'
 
 function getDevMenuHint() {
   if (Platform.OS === 'web') return <ThemedText type="small">use browser devtools</ThemedText>
@@ -29,10 +28,9 @@ function getDevMenuHint() {
 }
 
 export default function HomeScreen() {
-  const { tabBarOnly } = useBottomTabInset()
   return (
     <ThemedView style={styles.container}>
-      <SafeAreaView style={[styles.safeArea, { paddingBottom: tabBarOnly + Spacing.three }]}>
+      <SafeAreaView style={[styles.safeArea, { paddingBottom: Spacing.three }]}>
         <ThemedView style={styles.heroSection}>
           <AnimatedIcon />
           <ThemedText type="title" style={styles.title}>