@momo-kits/foundation 0.165.1-beta.1 → 0.165.1-beta.2

package/Application/BottomTab/index.tsx

@@ -24,7 +24,12 @@ import { Icon } from '../../Icon';
 import { exportFontFamily, Text } from '../../Text';
 import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
-import { getOptions, getStackOptions, useAppState } from '../utils';
+import {
+  getOptions,
+  getStackOptions,
+  useAppState,
+  useFloatingArrowBack,
+} from '../utils';
 import BottomTabBar from './BottomTabBar';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 
@@ -153,7 +158,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
               initialParams,
               bottomTab: 'nested',
             }}
-            options={{ ...getStackOptions({ swipeBack: false }) }}
+            options={{ ...getStackOptions() }}
           />
         </Stack.Navigator>
       </Animated.View>
@@ -188,7 +193,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
                 initialParams,
                 bottomTab: 'default',
               }}
-              options={{ ...getStackOptions({ swipeBack: false }), ...options }}
+              options={{ ...getStackOptions(), ...options }}
             />
           </Stack.Navigator>
         </NavigationContainer>
@@ -212,6 +217,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   const indicatorAnimated = useSharedValue(0);
   const activeIndex = React.useRef(initialIndex > 0 ? initialIndex : 0);
   const itemWidth = dimensions.width / tabs.length;
+  const reportFloatingArrowBack = useFloatingArrowBack();
 
   const indicatorStyle = useAnimatedStyle(() => ({
     width: itemWidth,
@@ -232,11 +238,38 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
   }, [itemWidth, indicatorAnimated]);
 
+  // `initialRouteName` can start on a later tab, so report where we actually begin instead of
+  // waiting for the first tab switch to correct it.
+  useEffect(() => {
+    reportFloatingArrowBack(activeIndex.current !== 0);
+  }, [reportFloatingArrowBack]);
+
+  /**
+   * Two halves of one decision, so they are set together.
+   *
+   * On the first tab the stack card owns the swipe and runs the usual transition. On any other
+   * tab it must not: every tab lives inside that single card, and the gesture pops it with
+   * `StackActions.pop()` aimed at the stack rather than a back the tab router could claim — so
+   * the swipe would take all the tabs with it instead of returning to the first one. Turning the
+   * card gesture off there would leave the swipe doing nothing, so hand it to the host's
+   * floating-arrow interaction instead.
+   */
+  const syncBackOwnership = (index: number) => {
+    const isFirstTab = index === 0;
+
+    navigation?.setOptions({
+      gestureEnabled: Platform.OS === 'ios' && isFirstTab,
+    });
+    reportFloatingArrowBack(!isFirstTab);
+  };
+
   const onFocus = (e: any) => {
     activeIndex.current = tabs.findIndex(i => e.target.includes(i.name));
     indicatorAnimated.value = withTiming(itemWidth * activeIndex.current, {
       duration: 200,
     });
+
+    syncBackOwnership(activeIndex.current);
   };
 
   const handler: {
@@ -275,9 +308,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
               },
             ]}
           >
-            <Animated.View
-              style={[styles.indicatorContainer, indicatorStyle]}
-            >
+            <Animated.View style={[styles.indicatorContainer, indicatorStyle]}>
               <View
                 style={[
                   styles.indicator,
@@ -296,7 +327,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
           activeTintColor={theme.colors.primary}
           style={[
             {
-              height: 64 + (Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom),
+              height:
+                64 +
+                (Platform.OS === 'ios'
+                  ? Math.min(insets.bottom, 21)
+                  : insets.bottom),
             },
           ]}
         />

package/Application/utils.tsx

@@ -59,10 +59,8 @@ const forStackTransitionWithOverlay = (
 /**
  * default options for stack screen
  */
-const getStackOptions = ({
-  swipeBack = true,
-}: { swipeBack?: boolean } = {}): StackNavigationOptions => {
-  const base: StackNavigationOptions = {
+const getStackOptions = (): StackNavigationOptions => {
+  return {
     headerTitleAlign: 'left',
     headerTitle: props => <HeaderTitle {...props} />,
     headerTitleContainerStyle: {
@@ -78,25 +76,6 @@ const getStackOptions = ({
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
-  };
-
-  /**
-   * A bottom tab stack holds a single route, so the card transition never runs and
-   * `CardContainer` pins `gestureEnabled` to false at index 0 regardless. What does bite is
-   * `cardOverlayEnabled`: `current.progress` rests at 1, so the overlay would sit at its full
-   * 0.6 forever instead of only during a push, tinting any tab screen that paints no
-   * background of its own. This branch is the option set from before swipe back, unchanged.
-   */
-  if (!swipeBack) {
-    return {
-      ...base,
-      gestureEnabled: false,
-      ...TransitionPresets.SlideFromRightIOS,
-    };
-  }
-
-  return {
-    ...base,
     gestureEnabled: Platform.OS === 'ios',
     ...TransitionPresets.SlideFromRightIOS,
     cardStyleInterpolator: forStackTransitionWithOverlay,
@@ -355,6 +334,45 @@ const useNativeCanGoBack = () => {
   );
 };
 
+/**
+ * Hands the swipe back to the host's floating-arrow interaction while a bottom tab other than
+ * the first one is showing.
+ *
+ * The whole tab navigator lives inside a single stack card, and the card gesture pops that card
+ * through `StackActions.pop()` aimed at the stack — it never dispatches a back the tab router
+ * could claim. So on tab 2 a swipe would take all four tabs with it instead of returning to tab
+ * 1. The host already owns an interaction for exactly this, so report the state and let it run.
+ *
+ * Reports `false` on unmount: the flag lives on the host and would otherwise outlive the tabs
+ * that asked for it.
+ */
+const useFloatingArrowBack = () => {
+  const lastValue = useRef<boolean | undefined>(undefined);
+
+  const report = useCallback((shouldUse: boolean) => {
+    if (lastValue.current === shouldUse) {
+      return;
+    }
+
+    const setShouldUseFloatingArrowBack =
+      NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack;
+    if (typeof setShouldUseFloatingArrowBack !== 'function') {
+      return;
+    }
+
+    lastValue.current = shouldUse;
+    try {
+      setShouldUseFloatingArrowBack(shouldUse);
+    } catch (error) {
+      console.warn('[BottomTab] setShouldUseFloatingArrowBack failed:', error);
+    }
+  }, []);
+
+  useEffect(() => () => report(false), [report]);
+
+  return report;
+};
+
 /**
  * Union of the two animation runtimes an internal foundation component might
  * receive. Public Screen props still accept React Native Animated.Value only;
@@ -506,6 +524,7 @@ export {
   useComponentId,
   useAppState,
   useNativeCanGoBack,
+  useFloatingArrowBack,
   useNormalizedSharedValue,
   SwipeBackHaptic,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.165.1-beta.1",
+    "version": "0.165.1-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},