refactor(mobile): replace SafeModalScrollView with SafeNavigationScrollView across multiple screens

- Removed SafeModalScrollView component and replaced it with SafeNavigationScrollView in various files including FollowList, EditCondition, EditRewriteRules, EditWebhooks, and EditEmail screens.
- Updated import statements accordingly to reflect the changes.

This change enhances consistency in the navigation handling across the application.

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

apps/mobile/src/components/layouts/views/SafeModalScrollView.tsx

@@ -1,41 +0,0 @@
-import { useMemo } from "react"
-import type { ScrollView } from "react-native"
-import { View } from "react-native"
-import type { AnimatedScrollViewProps } from "react-native-reanimated"
-import { useAnimatedRef, useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated"
-import { useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context"
-
-import { ReAnimatedScrollView } from "../../common/AnimatedComponents"
-import { ModalScrollViewContext } from "../contexts/ModalScrollViewContext"
-import { getDefaultHeaderHeight } from "../utils"
-
-interface SafeModalScrollViewProps extends AnimatedScrollViewProps {}
-export const SafeModalScrollView = (props: SafeModalScrollViewProps) => {
-  const frame = useSafeAreaFrame()
-  const insets = useSafeAreaInsets()
-  const headerHeight = getDefaultHeaderHeight(frame, true, insets.top)
-  const animatedY = useSharedValue(0)
-  const animatedRef = useAnimatedRef<ScrollView>()
-  return (
-    <View className="flex-1">
-      <ModalScrollViewContext.Provider
-        value={useMemo(() => ({ scrollViewRef: animatedRef, animatedY }), [animatedRef, animatedY])}
-      >
-        <ReAnimatedScrollView
-          {...props}
-          ref={animatedRef}
-          onScroll={useAnimatedScrollHandler({
-            onScroll: (e) => {
-              animatedY.value = e.contentOffset.y
-            },
-          })}
-          scrollEventThrottle={16}
-          scrollIndicatorInsets={{ top: headerHeight, bottom: insets.bottom }}
-          contentContainerStyle={{ paddingTop: headerHeight, paddingBottom: insets.bottom }}
-        >
-          {props.children}
-        </ReAnimatedScrollView>
-      </ModalScrollViewContext.Provider>
-    </View>
-  )
-}

apps/mobile/src/modules/list/FollowList.tsx

@@ -7,8 +7,10 @@ import { ActivityIndicator, Alert, StyleSheet, Text, View } from "react-native"
 import { z } from "zod"
 
 import { HeaderSubmitButton } from "@/src/components/layouts/header/HeaderElements"
-import { SafeModalScrollView } from "@/src/components/layouts/views/SafeModalScrollView"
-import { NavigationBlurEffectHeader } from "@/src/components/layouts/views/SafeNavigationScrollView"
+import {
+  NavigationBlurEffectHeader,
+  SafeNavigationScrollView,
+} from "@/src/components/layouts/views/SafeNavigationScrollView"
 import { FormProvider } from "@/src/components/ui/form/FormProvider"
 import { FormLabel } from "@/src/components/ui/form/Label"
 import { FormSwitch } from "@/src/components/ui/form/Switch"
@@ -123,9 +125,9 @@ const Impl = (props: { id: string }) => {
     })
   }, [isDirty, setModalOptions])
   return (
-    <SafeModalScrollView
+    <SafeNavigationScrollView
       className="bg-system-grouped-background"
-      contentContainerClassName="gap-y-4 mt-2"
+      contentViewClassName="gap-y-4 mt-2"
     >
       <NavigationBlurEffectHeader
         title={`${isSubscribed ? "Edit" : "Follow"} - ${list?.title}`}
@@ -212,7 +214,7 @@ const Impl = (props: { id: string }) => {
           )}
         </FormProvider>
       </GroupedInsetListCard>
-    </SafeModalScrollView>
+    </SafeNavigationScrollView>
   )
 }
 

apps/mobile/src/modules/settings/routes/EditCondition.tsx

@@ -1,7 +1,9 @@
 import { Text, View } from "react-native"
 
-import { SafeModalScrollView } from "@/src/components/layouts/views/SafeModalScrollView"
-import { NavigationBlurEffectHeader } from "@/src/components/layouts/views/SafeNavigationScrollView"
+import {
+  NavigationBlurEffectHeader,
+  SafeNavigationScrollView,
+} from "@/src/components/layouts/views/SafeNavigationScrollView"
 import { Select } from "@/src/components/ui/form/Select"
 import { PlainTextField } from "@/src/components/ui/form/TextField"
 import {
@@ -24,11 +26,11 @@ export const EditConditionScreen: NavigationControllerView<{
   conditionIndex: number
 }> = (params) => {
   return (
-    <SafeModalScrollView className="bg-system-grouped-background">
+    <SafeNavigationScrollView className="bg-system-grouped-background">
       <NavigationBlurEffectHeader title="Edit Condition" />
 
       <ConditionForm index={params} />
-    </SafeModalScrollView>
+    </SafeNavigationScrollView>
   )
 }
 

apps/mobile/src/modules/settings/routes/EditRewriteRules.tsx

@@ -1,7 +1,9 @@
 import { Text } from "react-native"
 
-import { SafeModalScrollView } from "@/src/components/layouts/views/SafeModalScrollView"
-import { NavigationBlurEffectHeader } from "@/src/components/layouts/views/SafeNavigationScrollView"
+import {
+  NavigationBlurEffectHeader,
+  SafeNavigationScrollView,
+} from "@/src/components/layouts/views/SafeNavigationScrollView"
 import { PlainTextField } from "@/src/components/ui/form/TextField"
 import {
   GroupedInsetListBaseCell,
@@ -17,7 +19,7 @@ export const EditRewriteRulesScreen: NavigationControllerView<{ index: number }>
   const rule = useActionRule(index)
 
   return (
-    <SafeModalScrollView className="bg-system-grouped-background">
+    <SafeNavigationScrollView className="bg-system-grouped-background">
       <NavigationBlurEffectHeader title="Edit Rewrite Rules" />
       <GroupedInsetListSectionHeader label="Rewrite Rules" marginSize="small" />
       {rule?.result.rewriteRules?.map((rewriteRule, rewriteRuleIndex) => (
@@ -63,6 +65,6 @@ export const EditRewriteRulesScreen: NavigationControllerView<{ index: number }>
         />
       </GroupedInsetListCard>
       {__DEV__ && <Text>{JSON.stringify(rule?.result.rewriteRules, null, 2)}</Text>}
-    </SafeModalScrollView>
+    </SafeNavigationScrollView>
   )
 }

apps/mobile/src/modules/settings/routes/EditWebhooks.tsx

@@ -1,7 +1,9 @@
 import { Text } from "react-native"
 
-import { SafeModalScrollView } from "@/src/components/layouts/views/SafeModalScrollView"
-import { NavigationBlurEffectHeader } from "@/src/components/layouts/views/SafeNavigationScrollView"
+import {
+  NavigationBlurEffectHeader,
+  SafeNavigationScrollView,
+} from "@/src/components/layouts/views/SafeNavigationScrollView"
 import { PlainTextField } from "@/src/components/ui/form/TextField"
 import {
   GroupedInsetButtonCell,
@@ -17,7 +19,7 @@ export const EditWebhooksScreen: NavigationControllerView<{ index: number }> = (
   const rule = useActionRule(index)
 
   return (
-    <SafeModalScrollView className="bg-system-grouped-background">
+    <SafeNavigationScrollView className="bg-system-grouped-background">
       <NavigationBlurEffectHeader title="Edit Webhooks" />
       <GroupedInsetListSectionHeader label="Webhooks" marginSize="small" />
       <GroupedInsetListCard>
@@ -41,6 +43,6 @@ export const EditWebhooksScreen: NavigationControllerView<{ index: number }> = (
         />
       </GroupedInsetListCard>
       {__DEV__ && <Text>{JSON.stringify(rule?.result.webhooks, null, 2)}</Text>}
-    </SafeModalScrollView>
+    </SafeNavigationScrollView>
   )
 }

apps/mobile/src/screens/(modal)/edit-email.tsx

@@ -3,8 +3,10 @@ import { useMemo, useState } from "react"
 import { View } from "react-native"
 
 import { HeaderSubmitButton } from "@/src/components/layouts/header/HeaderElements"
-import { SafeModalScrollView } from "@/src/components/layouts/views/SafeModalScrollView"
-import { NavigationBlurEffectHeader } from "@/src/components/layouts/views/SafeNavigationScrollView"
+import {
+  NavigationBlurEffectHeader,
+  SafeNavigationScrollView,
+} from "@/src/components/layouts/views/SafeNavigationScrollView"
 import { PlainTextField } from "@/src/components/ui/form/TextField"
 import {
   GroupedInsetListCard,
@@ -43,7 +45,7 @@ export const EditEmailScreen: NavigationControllerView = () => {
   })
 
   return (
-    <SafeModalScrollView className="bg-system-grouped-background">
+    <SafeNavigationScrollView className="bg-system-grouped-background">
       <NavigationBlurEffectHeader
         title="Edit Email"
         headerRight={
@@ -85,6 +87,6 @@ export const EditEmailScreen: NavigationControllerView = () => {
           </GroupedInsetListCard>
         )}
       </View>
-    </SafeModalScrollView>
+    </SafeNavigationScrollView>
   )
 }

apps/mobile/src/screens/(modal)/list.tsx

@@ -7,8 +7,10 @@ import { View } from "react-native"
 import { z } from "zod"
 
 import { HeaderSubmitButton } from "@/src/components/layouts/header/HeaderElements"
-import { SafeModalScrollView } from "@/src/components/layouts/views/SafeModalScrollView"
-import { NavigationBlurEffectHeader } from "@/src/components/layouts/views/SafeNavigationScrollView"
+import {
+  NavigationBlurEffectHeader,
+  SafeNavigationScrollView,
+} from "@/src/components/layouts/views/SafeNavigationScrollView"
 import { FormProvider, useFormContext } from "@/src/components/ui/form/FormProvider"
 import { FormLabel } from "@/src/components/ui/form/Label"
 import { NumberField, TextField } from "@/src/components/ui/form/TextField"
@@ -66,7 +68,7 @@ export const ListScreen: NavigationControllerView<{
   const navigation = useNavigation()
   return (
     <FormProvider form={form}>
-      <SafeModalScrollView className="bg-system-grouped-background pb-safe flex-1">
+      <SafeNavigationScrollView className="bg-system-grouped-background pb-safe flex-1">
         <ScreenOptions title={list?.title} listId={listId} />
 
         <GroupedInsetListCard showSeparator={false} className="mt-2 px-3 py-6">
@@ -187,7 +189,7 @@ export const ListScreen: NavigationControllerView<{
             />
           </GroupedInsetListCard>
         )}
-      </SafeModalScrollView>
+      </SafeNavigationScrollView>
     </FormProvider>
   )
 }