fix(mobile): sheet modal corners and view

background

- Updated the `EntryNormalItem` component to improve styling with rounded corners and overflow handling.
- Integrated `ThemedBlurView` for a better visual effect in the play button area.
- Modified layout structure in `_layout.tsx` and `(stack)/_layout.tsx` to ensure consistent background and overflow behavior.
- Enhanced the animated stack with dynamic border radius based on scaling.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx

@@ -2,10 +2,11 @@ import { FeedViewType } from "@follow/constants"
 import { formatEstimatedMins } from "@follow/utils"
 import { router } from "expo-router"
 import { useCallback, useEffect } from "react"
-import { ActivityIndicator, Text, TouchableOpacity, View } from "react-native"
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from "react-native"
 import ReAnimated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated"
 
 import { useUISettingKey } from "@/src/atoms/settings/ui"
+import { ThemedBlurView } from "@/src/components/common/ThemedBlurView"
 import { preloadWebViewEntry } from "@/src/components/native/webview/EntryContentWebView"
 import { RelativeDateTime } from "@/src/components/ui/datetime/RelativeDateTime"
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
@@ -127,7 +128,7 @@ export function EntryNormalItem({ entryId, extraData }: { entryId: string; extra
                     uri: image,
                   }}
                   blurhash={blurhash}
-                  className="border-secondary-system-background size-24 rounded-md border"
+                  className="border-secondary-system-background size-24 overflow-hidden rounded-lg border"
                   contentFit="cover"
                 />
               ) : (
@@ -156,7 +157,8 @@ export function EntryNormalItem({ entryId, extraData }: { entryId: string; extra
                   })
                 }}
               >
-                <View className="bg-gray-6/50 rounded-full p-2">
+                <View className="overflow-hidden rounded-full p-2">
+                  <ThemedBlurView style={StyleSheet.absoluteFillObject} intensity={30} />
                   {isPlaying ? (
                     <PauseCuteFiIcon color="white" width={24} height={24} />
                   ) : isLoading ? (
@@ -222,7 +224,7 @@ const AspectRatioImage = ({
             height: scaledHeight,
           }}
           blurhash={blurhash}
-          className="border-secondary-system-background border"
+          className="border-secondary-system-background rounded-md border"
           contentFit="cover"
         />
       </View>

apps/mobile/src/screens/(stack)/_layout.tsx

@@ -1,11 +1,20 @@
 import { Stack } from "expo-router"
+import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated"
+import { useSheet } from "react-native-sheet-transitions"
 
 export default function AppRootLayout() {
+  const { scale } = useSheet()
+
+  const style = useAnimatedStyle(() => ({
+    borderRadius: interpolate(scale.value, [0.8, 0.99, 1], [0, 50, 0]),
+  }))
   return (
-    <Stack
-      screenOptions={{
-        headerShown: false,
-      }}
-    />
+    <Animated.View className={"flex-1 overflow-hidden"} style={style}>
+      <Stack
+        screenOptions={{
+          headerShown: false,
+        }}
+      />
+    </Animated.View>
   )
 }

apps/mobile/src/screens/_layout.tsx

@@ -4,14 +4,13 @@ import analytics from "@react-native-firebase/analytics"
 import { Stack, usePathname } from "expo-router"
 import { useColorScheme } from "nativewind"
 import { useEffect } from "react"
-import { useSheet } from "react-native-sheet-transitions"
+import { View } from "react-native"
 
 import { FullWindowOverlay } from "../components/common/FullWindowOverlay"
 import { useIntentHandler } from "../hooks/useIntentHandler"
 import { DebugButton, EnvProfileIndicator } from "../modules/debug"
 import { RootProviders } from "../providers"
 import { usePrefetchSessionUser } from "../store/user/hooks"
-import { getSystemBackgroundColor } from "../theme/utils"
 
 export default function RootLayout() {
   useColorScheme()
@@ -34,35 +33,35 @@ export default function RootLayout() {
   }, [pathname])
 
   return (
-    <RootProviders>
-      <Session />
-      <AnimatedStack />
+    <View className="flex-1 bg-black">
+      <RootProviders>
+        <Session />
+        <AnimatedStack />
 
-      {__DEV__ && <DebugButton />}
-      <FullWindowOverlay>
-        <EnvProfileIndicator />
-      </FullWindowOverlay>
-    </RootProviders>
+        {__DEV__ && <DebugButton />}
+        <FullWindowOverlay>
+          <EnvProfileIndicator />
+        </FullWindowOverlay>
+      </RootProviders>
+    </View>
   )
 }
 
 function AnimatedStack() {
-  const systemBackgroundColor = getSystemBackgroundColor()
-  const { isScaling } = useSheet()
-
   return (
     <Stack
       screenOptions={{
-        contentStyle: { backgroundColor: systemBackgroundColor },
         headerShown: false,
+        contentStyle: {
+          backgroundColor: "#000",
+        },
       }}
     >
       <Stack.Screen
         name="(stack)"
         options={{
           title: "Follow",
           headerShown: false,
-          contentStyle: isScaling ? { borderRadius: 50, overflow: "hidden" } : {},
         }}
       />
       <Stack.Screen name="(headless)" options={{ headerShown: false, title: "Follow" }} />