fix: adjust ios styles

Signed-off-by: Innei <[email protected]>

apps/mobile/app.config.ts

@@ -2,12 +2,14 @@ import { resolve } from "node:path"
 
 import type { ConfigContext, ExpoConfig } from "expo/config"
 
+import PKG from "./package.json"
+
 // const roundedIconPath = resolve(__dirname, "../../resources/icon.png")
 const iconPath = resolve(__dirname, "./assets/icon.png")
 const adaptiveIconPath = resolve(__dirname, "./assets/adaptive-icon.png")
-
 export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
+
   extra: {
     eas: {
       projectId: "a6335b14-fb84-45aa-ba80-6f6ab8926920",
@@ -23,7 +25,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
 
   name: "Follow",
   slug: "follow",
-  version: "1.0.0",
+  version: __DEV__ ? "dev" : PKG.version,
   orientation: "portrait",
   icon: iconPath,
   scheme: "follow",

apps/mobile/package.json

@@ -92,6 +92,7 @@
     "shiki": "1.24.1",
     "tailwindcss": "3.4.16",
     "usehooks-ts": "3.1.0",
+    "zeego": "2.0.4",
     "zod": "3.24.1",
     "zustand": "5.0.2"
   },

apps/mobile/src/components/ui/tabview/TabBar.tsx

@@ -20,7 +20,7 @@ import type {
 import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native"
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated"
 
-import { accentColor } from "@/src/theme/colors"
+import { accentColor, useColor } from "@/src/theme/colors"
 
 import type { Tab } from "./types"
 
@@ -210,9 +210,12 @@ const styles = StyleSheet.create({
 })
 
 const TabItemInner = ({ tab, isSelected }: { tab: Tab; isSelected: boolean }) => {
+  const gray = useColor("gray")
   return (
     <View className="p-2">
-      <Text style={{ color: isSelected ? accentColor : "gray" }}>{tab.name}</Text>
+      <Text style={{ color: isSelected ? accentColor : gray }} className="text-[15px] leading-none">
+        {tab.name}
+      </Text>
     </View>
   )
 }

apps/mobile/src/modules/discover/search-tabs/SearchFeed.tsx

@@ -47,7 +47,6 @@ export const SearchFeed = () => {
       refreshing={isLoading}
       onRefresh={refetch}
       keyExtractor={keyExtractor}
-      contentContainerClassName={"-mt-4"}
       renderScrollComponent={RenderScrollComponent}
       data={data?.data}
       renderItem={renderItem}
@@ -68,7 +67,7 @@ const SearchFeedItem: FC<ListRenderItemInfo<SearchResultItem>> = ({ item }) => {
   return (
     <Animated.View entering={FadeInUp}>
       <ItemPressable
-        className="py-6"
+        className="py-4"
         onPress={() => {
           if (item.feed?.id) {
             router.push(`/follow?id=${item.feed.id}`)

apps/mobile/src/screens/(stack)/(tabs)/settings.tsx

@@ -1,12 +1,13 @@
 import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs"
+import { getDefaultHeaderHeight } from "@react-navigation/elements"
 import { useIsFocused } from "@react-navigation/native"
 import { createNativeStackNavigator } from "@react-navigation/native-stack"
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react"
 import type { NativeScrollEvent, NativeSyntheticEvent, ScrollView } from "react-native"
 import { findNodeHandle, Text, UIManager } from "react-native"
 import type { SharedValue } from "react-native-reanimated"
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated"
-import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context"
 import { useEventCallback } from "usehooks-ts"
 
 import { ReAnimatedScrollView } from "@/src/components/common/AnimatedComponents"
@@ -114,13 +115,18 @@ function Settings() {
     </>
   )
 }
-
 const SettingHeader = ({ scrollY }: { scrollY: SharedValue<number> }) => {
+  const frame = useSafeAreaFrame()
+  const insets = useSafeAreaInsets()
+  const headerHeight = getDefaultHeaderHeight(frame, false, insets.top)
   const styles = useAnimatedStyle(() => {
     return {
       opacity: scrollY.value / 100,
+      height: headerHeight,
+      paddingTop: insets.top,
     }
   })
+
   return (
     <Animated.View
       pointerEvents="none"
@@ -129,7 +135,7 @@ const SettingHeader = ({ scrollY }: { scrollY: SharedValue<number> }) => {
     >
       <BlurEffect />
 
-      <Text className="text-label flex-1 text-center text-lg font-medium">Settings</Text>
+      <Text className="text-label flex-1 text-center text-[17px] font-semibold">Settings</Text>
     </Animated.View>
   )
 }