fix: resolve screen transition stutter with native stack (#345)

chengcheng84 · eeee0717 · web-flow · commit 3923ec454c10 · 2026-03-14T14:27:02.000+08:00
Co-authored-by: eeee0717 &lt;chentao020717Work@outlook.com&gt;
Co-authored-by: 槑囿脑袋 &lt;70054568+eeee0717@users.noreply.github.com&gt;
diff --git a/src/navigators/AssistantMarketStackNavigator.tsx b/src/navigators/AssistantMarketStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import AssistantMarketScreen from '@/screens/assistant/AssistantMarketScreen'
@@ -7,15 +7,16 @@ export type AssistantMarketStackParamList = {
   AssistantMarketScreen: undefined
 }
 
-const Stack = createStackNavigator<AssistantMarketStackParamList>()
+const Stack = createNativeStackNavigator<AssistantMarketStackParamList>()
 
 export default function AssistantMarketStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
       <Stack.Screen name="AssistantMarketScreen" component={AssistantMarketScreen} />
     </Stack.Navigator>
diff --git a/src/navigators/AssistantStackNavigator.tsx b/src/navigators/AssistantStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import AssistantDetailScreen from '@/screens/assistant/AssistantDetailScreen'
@@ -10,18 +10,23 @@ export type AssistantStackParamList = {
   AssistantDetailScreen: AssistantDetailScreenParams
 }
 
-const Stack = createStackNavigator<AssistantStackParamList>()
+const Stack = createNativeStackNavigator<AssistantStackParamList>()
 
 export default function AssistantStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
       <Stack.Screen name="AssistantScreen" component={AssistantScreen} />
-      <Stack.Screen name="AssistantDetailScreen" component={AssistantDetailScreen} />
+      <Stack.Screen
+        name="AssistantDetailScreen"
+        component={AssistantDetailScreen}
+        options={{ gestureEnabled: false, fullScreenGestureEnabled: false }}
+      />
     </Stack.Navigator>
   )
 }
diff --git a/src/navigators/HomeStackNavigator.tsx b/src/navigators/HomeStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import AssistantDetailScreen from '@/screens/assistant/AssistantDetailScreen'
@@ -29,20 +29,29 @@ export type HomeStackParamList = {
   AboutSettings: { screen?: string; params?: any } | undefined
 }
 
-const Stack = createStackNavigator<HomeStackParamList>()
+const Stack = createNativeStackNavigator<HomeStackParamList>()
 
 export default function HomeStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
       <Stack.Screen name="ChatScreen" component={ChatScreen} />
       <Stack.Screen name="TopicScreen" component={TopicScreen} />
-      <Stack.Screen name="AssistantDetailScreen" component={AssistantDetailScreen} />
-      <Stack.Screen name="SettingsScreen" component={SettingsScreen} />
+      <Stack.Screen
+        name="AssistantDetailScreen"
+        component={AssistantDetailScreen}
+        options={{ gestureEnabled: false, fullScreenGestureEnabled: false }}
+      />
+      <Stack.Screen
+        name="SettingsScreen"
+        component={SettingsScreen}
+        options={{ gestureEnabled: false, fullScreenGestureEnabled: false }}
+      />
       <Stack.Screen name="HtmlPreviewScreen" component={HtmlPreviewScreen} />
       <Stack.Screen name="GeneralSettings" component={GeneralSettingsStackNavigator} />
       <Stack.Screen name="AssistantSettings" component={AssistantSettingsStackNavigator} />
diff --git a/src/navigators/McpStackNavigator.tsx b/src/navigators/McpStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import McpDetailScreen from '@/screens/mcp/McpDetailScreen'
@@ -11,15 +11,16 @@ export type McpStackParamList = {
   McpDetailScreen: { mcpId?: string }
 }
 
-const Stack = createStackNavigator<McpStackParamList>()
+const Stack = createNativeStackNavigator<McpStackParamList>()
 
 export default function McpStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
       <Stack.Screen name="McpScreen" component={McpScreen} />
       <Stack.Screen name="McpMarketScreen" component={McpMarketScreen} />
diff --git a/src/navigators/SettingsStackNavigator.tsx b/src/navigators/SettingsStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import SettingsScreen from '@/screens/settings/SettingsScreen'
@@ -20,17 +20,22 @@ export type SettingsStackParamList = {
   AboutSettings: undefined
 }
 
-const Stack = createStackNavigator<SettingsStackParamList>()
+const Stack = createNativeStackNavigator<SettingsStackParamList>()
 
 export default function SettingsStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
-      <Stack.Screen name="SettingsScreen" component={SettingsScreen} />
+      <Stack.Screen
+        name="SettingsScreen"
+        component={SettingsScreen}
+        options={{ gestureEnabled: false, fullScreenGestureEnabled: false }}
+      />
       <Stack.Screen name="GeneralSettings" component={GeneralSettingsStackNavigator} />
       <Stack.Screen name="AssistantSettings" component={AssistantSettingsStackNavigator} />
       <Stack.Screen name="ProvidersSettings" component={ProvidersStackNavigator} />
diff --git a/src/navigators/WelcomeStackNavigator.tsx b/src/navigators/WelcomeStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import WelcomeScreen from '@/screens/welcome/WelcomeScreen'
@@ -7,14 +7,14 @@ export type WelcomeStackParamList = {
   WelcomeScreen: undefined
 }
 
-const Stack = createStackNavigator<WelcomeStackParamList>()
+const Stack = createNativeStackNavigator<WelcomeStackParamList>()
 
 export default function WelcomeStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right'
       }}>
       <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
     </Stack.Navigator>
diff --git a/src/navigators/settings/AboutStackNavigator.tsx b/src/navigators/settings/AboutStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import AboutScreen from '@/screens/settings/about/AboutScreen'
@@ -9,15 +9,16 @@ export type AboutStackParamList = {
   AboutScreen: undefined
 }
 
-const Stack = createStackNavigator<AboutStackParamList>()
+const Stack = createNativeStackNavigator<AboutStackParamList>()
 
 export default function AboutStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
       <Stack.Screen name="PersonalScreen" component={PersonalScreen} />
       <Stack.Screen name="AboutScreen" component={AboutScreen} />
diff --git a/src/navigators/settings/AssistantSettingsStackNavigator.tsx b/src/navigators/settings/AssistantSettingsStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import AssistantDetailScreen from '@/screens/assistant/AssistantDetailScreen'
@@ -9,18 +9,23 @@ export type AssistantSettingsStackParamList = {
   AssistantDetailScreen: { assistantId: string; tab?: string }
 }
 
-const Stack = createStackNavigator<AssistantSettingsStackParamList>()
+const Stack = createNativeStackNavigator<AssistantSettingsStackParamList>()
 
 export default function AssistantSettingsStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
       <Stack.Screen name="AssistantSettingsScreen" component={AssistantSettingsScreen} />
-      <Stack.Screen name="AssistantDetailScreen" component={AssistantDetailScreen} />
+      <Stack.Screen
+        name="AssistantDetailScreen"
+        component={AssistantDetailScreen}
+        options={{ gestureEnabled: false, fullScreenGestureEnabled: false }}
+      />
     </Stack.Navigator>
   )
 }
diff --git a/src/navigators/settings/DataSourcesStackNavigator.tsx b/src/navigators/settings/DataSourcesStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import BasicDataSettingsScreen from '@/screens/settings/data/BasicDataSettingsScreen'
@@ -11,15 +11,16 @@ export type DataSourcesStackParamList = {
   LanTransferScreen: { redirectToHome?: boolean } | undefined
 }
 
-const Stack = createStackNavigator<DataSourcesStackParamList>()
+const Stack = createNativeStackNavigator<DataSourcesStackParamList>()
 
 export default function DataSourcesStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
       <Stack.Screen name="DataSettingsScreen" component={DataSettingsScreen} />
       <Stack.Screen name="BasicDataSettingsScreen" component={BasicDataSettingsScreen} />
diff --git a/src/navigators/settings/GeneralSettingsStackNavigator.tsx b/src/navigators/settings/GeneralSettingsStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import GeneralSettingsScreen from '@/screens/settings/general/GeneralSettingsScreen'
@@ -7,15 +7,16 @@ export type GeneralSettingsStackParamList = {
   GeneralSettingsScreen: undefined
 }
 
-const Stack = createStackNavigator<GeneralSettingsStackParamList>()
+const Stack = createNativeStackNavigator<GeneralSettingsStackParamList>()
 
 export default function GeneralSettingsStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
       <Stack.Screen name="GeneralSettingsScreen" component={GeneralSettingsScreen} />
     </Stack.Navigator>
diff --git a/src/navigators/settings/ProvidersStackNavigator.tsx b/src/navigators/settings/ProvidersStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import AddProviderScreen from '@/screens/settings/providers/AddProviderScreen'
@@ -15,15 +15,16 @@ export type ProvidersStackParamList = {
   AddProviderScreen: undefined
 }
 
-const Stack = createStackNavigator<ProvidersStackParamList>()
+const Stack = createNativeStackNavigator<ProvidersStackParamList>()
 
 export default function ProvidersStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
       <Stack.Screen name="ProviderSettingsScreen" component={ProviderSettingsScreen} />
       <Stack.Screen name="ProviderListScreen" component={ProviderListScreen} />
diff --git a/src/navigators/settings/WebSearchStackNavigator.tsx b/src/navigators/settings/WebSearchStackNavigator.tsx
@@ -1,4 +1,4 @@
-import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 
 import WebSearchProviderSettingsScreen from '@/screens/settings/websearch/WebSearchProviderSettingsScreen'
@@ -9,15 +9,16 @@ export type WebSearchStackParamList = {
   WebSearchProviderSettingsScreen: { providerId: string }
 }
 
-const Stack = createStackNavigator<WebSearchStackParamList>()
+const Stack = createNativeStackNavigator<WebSearchStackParamList>()
 
 export default function WebSearchStackNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        gestureResponseDistance: 9999,
-        ...TransitionPresets.SlideFromRightIOS
+        animation: 'ios_from_right',
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true
       }}>
       <Stack.Screen name="WebSearchSettingsScreen" component={WebSearchSettingsScreen} />
       <Stack.Screen name="WebSearchProviderSettingsScreen" component={WebSearchProviderSettingsScreen} />
