Fixes the composer on iOS showing behind the liquid glass nav

Changelog: fix

Author: markharding

apps/polycentric/app/(tabs)/_layout.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@/src/common/theme';
-import { isWeb } from '@/src/common/util/platform';
+import { isIOS, isWeb } from '@/src/common/util/platform';
 import { Slot } from 'expo-router';
 import { NativeTabs } from 'expo-router/unstable-native-tabs';
 
@@ -11,6 +11,7 @@ export default function TabsLayout() {
 
   return (
     <NativeTabs
+      backBehavior="history"
       minimizeBehavior="onScrollDown"
       backgroundColor={theme.palette.neutral_0}
       iconColor={theme.palette.neutral_900}
@@ -33,6 +34,16 @@ export default function TabsLayout() {
         <NativeTabs.Trigger.Label>Activity</NativeTabs.Trigger.Label>
         <NativeTabs.Trigger.Icon sf="bell.fill" md="notifications" />
       </NativeTabs.Trigger>
+
+      {isIOS ? (
+        <NativeTabs.Trigger name="compose" role="search">
+          <NativeTabs.Trigger.Label hidden>Compose</NativeTabs.Trigger.Label>
+          <NativeTabs.Trigger.Icon
+            sf={{ default: 'square.and.pencil', selected: 'square.and.pencil' }}
+            md="edit"
+          />
+        </NativeTabs.Trigger>
+      ) : null}
     </NativeTabs>
   );
 }

apps/polycentric/app/(tabs)/compose.tsx

@@ -1 +1 @@
-export { default } from '@/src/features/composer/ComposeScreen';
+export { default } from '@/src/features/composer/ComposeTabScreen';

apps/polycentric/src/common/components/composites/Fab.tsx

@@ -21,18 +21,18 @@ export function Fab({ onPress, icon, title = '' }: FabProps) {
   const shadow =
     Platform.OS === 'web'
       ? {
-          boxShadow: `0 6px 16px ${withHexOpacity(
-            theme.palette.primary_900,
-            isLight ? '28' : '40',
-          )}`,
-        }
+        boxShadow: `0 6px 16px ${withHexOpacity(
+          theme.palette.primary_900,
+          isLight ? '28' : '40',
+        )}`,
+      }
       : {
-          shadowColor: theme.palette.primary_900,
-          shadowOpacity: isLight ? 0.16 : 0.26,
-          shadowRadius: isLight ? 14 : 10,
-          shadowOffset: { width: 0, height: isLight ? 3 : 4 },
-          elevation: isLight ? 4 : 6,
-        };
+        shadowColor: theme.palette.primary_900,
+        shadowOpacity: isLight ? 0.16 : 0.26,
+        shadowRadius: isLight ? 14 : 10,
+        shadowOffset: { width: 0, height: isLight ? 3 : 4 },
+        elevation: isLight ? 4 : 6,
+      };
 
   return (
     <View style={[Atoms.absolute, { bottom: 0, right: 0 }, Atoms.p_lg]}>

apps/polycentric/src/common/components/layout/Layout.tsx

@@ -1,5 +1,5 @@
 import { Atoms, Breakpoints, typography, useTheme } from '@/src/common/theme';
-import { isWeb } from '@/src/common/util/platform';
+import { isIOS, isWeb } from '@/src/common/util/platform';
 import { Image } from 'expo-image';
 import { ExternalPathString, Link } from 'expo-router';
 import {
@@ -80,13 +80,15 @@ type PrimaryColumnProps = {
 function PrimaryColumn({ children }: PrimaryColumnProps) {
   const { theme } = useTheme();
   const { height: windowHeight } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
 
   return (
     <View
       testID="primaryColumn"
       style={[
         Atoms.flex_1,
         isWeb && Atoms.pb_lg,
+        !isWeb && { paddingBottom: insets.bottom },
         isWeb && {
           maxWidth: 600,
           borderLeftColor: theme.palette.neutral_25,

apps/polycentric/src/common/theme/tokens.ts

@@ -405,6 +405,9 @@ export const Atoms = StyleSheet.create({
   pb_3xl: {
     paddingBottom: Spacing['3xl'],
   },
+  pb_4xl: {
+    paddingBottom: Spacing['4xl'],
+  },
 
   pl_0: {
     paddingLeft: Spacing['0'],

apps/polycentric/src/common/util/platform.ts

@@ -1,3 +1,4 @@
 import { Platform } from 'react-native';
 
 export const isWeb = Platform.OS === 'web';
+export const isIOS = Platform.OS === 'ios';