@momo-kits/foundation 0.167.1-duotest.2 → 0.167.1

package/Application/BottomSheet.tsx

@@ -1,24 +1,14 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import {
   BackHandler,
   Dimensions,
-  Keyboard,
   KeyboardAvoidingView,
-  KeyboardEvent,
-  LayoutAnimation,
   Modal,
   PanResponder,
   Platform,
   Pressable,
   StyleSheet,
   TouchableOpacity,
-  useWindowDimensions,
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -32,38 +22,22 @@ import Animated, {
   Easing,
   Extrapolation,
   interpolate,
+  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
-import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
-import { getDuoTopInset, isIPhoneDuo } from './device';
-
-// iPhone Duo inner display: center the sheet instead of spanning the width
-const DUO_REGULAR_MIN_WIDTH = 600;
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const windowSize = useWindowDimensions();
-  const isDuo = isIPhoneDuo();
-  const isDuoCentered = isDuo && windowSize.width >= DUO_REGULAR_MIN_WIDTH;
-  const isPortrait = windowSize.height > windowSize.width;
-  // 'screen' is the outer display on iPhone Duo, even when unfolded
-  const heightDevice = isDuo
-    ? windowSize.height
-    : Dimensions.get('screen').height;
+  const heightDevice = Dimensions.get('screen').height;
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const topGap = Math.max(
-    getDuoTopInset(insets, windowSize.width, windowSize.height),
-    Spacing.XL,
-  );
-  const bottomInset =
-    Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+  const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -84,43 +58,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
-  const [keyboardLift, setKeyboardLift] = useState(0);
-
-  // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
-  // so lift it here and shrink maxHeight by the same amount instead
-  useEffect(() => {
-    if (!isDuo || !useKeyboardAvoidingView) {
-      return;
-    }
-    const onKeyboardChange = (e: KeyboardEvent) => {
-      const overlap = windowSize.height - e.endCoordinates.screenY;
-      const lift = Math.max(
-        overlap - bottomInset - (keyboardVerticalOffset ?? 0),
-        0,
-      );
-      if (e.duration) {
-        LayoutAnimation.configureNext({
-          duration: e.duration,
-          update: {
-            duration: e.duration,
-            type: LayoutAnimation.Types[e.easing] || 'keyboard',
-          },
-        });
-      }
-      setKeyboardLift(lift);
-    };
-    const subscriptions = [
-      Keyboard.addListener('keyboardWillChangeFrame', onKeyboardChange),
-      Keyboard.addListener('keyboardWillHide', onKeyboardChange),
-    ];
-    return () => subscriptions.forEach(sub => sub.remove());
-  }, [
-    bottomInset,
-    isDuo,
-    keyboardVerticalOffset,
-    useKeyboardAvoidingView,
-    windowSize.height,
-  ]);
 
   const openAnimation = useCallback(() => {
     translateY.value = withTiming(0, {
@@ -137,7 +74,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           duration: 200,
           easing: Easing.bezier(0.3, 0.0, 0.8, 0.15),
         },
-        () => scheduleOnRN(callback),
+        () => runOnJS(callback)(),
       );
     },
     [heightDevice, translateY],
@@ -200,9 +137,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }
       closeAnimation(() => {
         navigator?.pop();
-        scheduleOnRN(() => {
+        runOnJS(() => {
           callback?.();
-        });
+        })();
       });
     },
     [barrierDismissible, closeAnimation, navigator],
@@ -311,23 +248,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   });
 
-  // landscape side buttons span the full height, so inset the content; in
-  // portrait the side status bar only covers the top corner
-  const sideInsetStyle = isDuo &&
-    !isDuoCentered &&
-    !isPortrait && {
-      paddingLeft: insets.left,
-      paddingRight: insets.right,
-    };
-
-  const screen = (
-    <Screen
-      {...props}
-      {...props.route.params}
-      onRequestClose={onRequestClose}
-    />
-  );
-
   return (
     <Container
       transparent
@@ -344,7 +264,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           android: undefined,
         })}
         keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
-        enabled={useKeyboardAvoidingView && !isDuo}
+        enabled={useKeyboardAvoidingView}
         contentContainerStyle={styles.container}
         style={styles.container}
       >
@@ -367,34 +287,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               borderTopRightRadius: Radius.M,
               overflow: 'hidden',
             },
-            isDuo && {
-              maxHeight: windowSize.height - topGap - keyboardLift,
-              marginBottom: keyboardLift,
-            },
-            isDuoCentered && {
-              // keeps the portrait width in landscape, like system sheets
-              width: Math.min(
-                Math.min(windowSize.width, windowSize.height) - Spacing.L * 2,
-                windowSize.width -
-                  Math.max(insets.left, insets.right, Spacing.L) * 2,
-              ),
-              alignSelf: 'center',
-            },
             showBaseLineDebug && styles.debugBaseLine,
           ]}
         >
-          {isDuo ? (
-            // content shrinks so a tall sheet keeps its header and footer
-            <View style={[styles.shrink, sideInsetStyle]}>
-              {renderHeader()}
-              <View style={styles.shrink}>{screen}</View>
-            </View>
-          ) : (
-            <>
-              {renderHeader()}
-              {screen}
-            </>
-          )}
+          {renderHeader()}
+          <Screen
+            {...props}
+            {...props.route.params}
+            onRequestClose={onRequestClose}
+          />
           {footerComponent && (
             <View
               style={[
@@ -403,7 +304,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                   paddingBottom: Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
-                sideInsetStyle,
               ]}
             >
               {footerComponent}
@@ -453,7 +353,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: Spacing.M,
   },
-  shrink: { flexShrink: 1 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/BottomTab/BottomTabBar.tsx

@@ -58,13 +58,11 @@ export default function BottomTabBar({
   const { theme } = useContext(ApplicationContext);
   const { routes } = state;
   const widthDevice = useWindowDimensions()?.width;
-  const insets = useSafeAreaInsets();
   const useFloating = floatingButton && state.routes.length % 2 === 0;
-  const itemWidth =
-    (widthDevice - insets.left - insets.right) /
-    (state.routes.length + (useFloating ? 1 : 0));
+  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
   const indicatorAnimated = useSharedValue(0);
+  const insets = useSafeAreaInsets();
 
   const indicatorStyle = useAnimatedStyle(() => ({
     width: itemWidth,
@@ -248,8 +246,7 @@ export default function BottomTabBar({
         },
         {
           paddingBottom: paddingBottom,
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
+          paddingHorizontal: Math.max(insets.left, insets.right),
         },
         style,
       ]}

package/Application/BottomTab/index.tsx

@@ -27,15 +27,7 @@ import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
 import { getOptions, getStackOptions, useAppState } from '../utils';
 import BottomTabBar from './BottomTabBar';
-import { DuoTabBar } from './DuoTabBar';
-import { DuoBarCompressionProvider } from './DuoBarCompression';
-import {
-  ApplicationContext,
-  MiniAppContext,
-  ScreenContext,
-} from '../../Context';
-import { useScreenLayout } from '../../Layout';
-import { getHeaderRowOptions } from '../../Layout/utils';
+import { ApplicationContext, MiniAppContext } from '../../Context';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -44,7 +36,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { nested, options, screen, initialParams } = route?.params;
-  const headerStyleOptions = getHeaderRowOptions(useScreenLayout());
+  const insets = useSafeAreaInsets();
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
@@ -147,7 +139,11 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
     return (
       <Animated.View style={[styles.container, tabAnimatedStyle]}>
         <Stack.Navigator
-          screenOptions={headerStyleOptions}
+          screenOptions={{
+            headerStyle: {
+              height: 52 + insets.top,
+            },
+          }}
         >
           <Stack.Screen
             name="Stack"
@@ -178,7 +174,11 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
       <NavigationIndependentTree>
         <NavigationContainer>
           <Stack.Navigator
-            screenOptions={headerStyleOptions}
+            screenOptions={{
+              headerStyle: {
+                height: 52 + insets.top,
+              },
+            }}
           >
             <Stack.Screen
               name="Stack"
@@ -205,17 +205,8 @@ const BottomTab: React.FC<BottomTabProps> = ({
   navigation,
   initialRouteName,
   floatingButton,
-  compressionBehavior,
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
-  const screen: any = useContext(ScreenContext);
-  const { isIPhoneDuo } = useScreenLayout();
-  // each tab lays itself out, the hosting stack screen must not add a header or insets
-  screen?.claimHeader?.();
-  useEffect(() => {
-    screen?.syncHeader?.();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   const dimensions = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
@@ -289,156 +280,138 @@ const BottomTab: React.FC<BottomTabProps> = ({
   };
 
   return (
-    <DuoBarCompressionProvider
-      behavior={compressionBehavior}
-      tabCount={tabs.length}
-      hasQr={!!floatingButton}
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        headerTransparent: true,
+        headerBackground: undefined,
+        tabBarLabelPosition: 'below-icon',
+        tabBarBackground: () => (
+          <View
+            style={[
+              styles.container,
+              {
+                backgroundColor: theme.colors.background.surface,
+              },
+            ]}
+          >
+            <Animated.View style={[styles.indicatorContainer, indicatorStyle]}>
+              <View
+                style={[
+                  styles.indicator,
+                  { backgroundColor: theme.colors.primary },
+                ]}
+              />
+            </Animated.View>
+          </View>
+        ),
+      }}
+      tabBar={props => (
+        <BottomTabBar
+          {...props}
+          floatingButton={floatingButton}
+          inactiveTintColor={theme.colors.text.hint}
+          activeTintColor={theme.colors.primary}
+          style={[
+            {
+              height:
+                64 +
+                (Platform.OS === 'ios'
+                  ? Math.min(insets.bottom, 21)
+                  : insets.bottom),
+            },
+          ]}
+        />
+      )}
+      initialRouteName={initialRouteName}
     >
-      <Tab.Navigator
-        screenOptions={{
-          headerShown: false,
-          headerTransparent: true,
-          headerBackground: undefined,
-          tabBarLabelPosition: 'below-icon',
-          tabBarBackground: () => (
-            <View
-              style={[
-                styles.container,
-                {
-                  backgroundColor: theme.colors.background.surface,
-                },
-              ]}
-            >
-              <Animated.View
-                style={[styles.indicatorContainer, indicatorStyle]}
-              >
-                <View
-                  style={[
-                    styles.indicator,
-                    { backgroundColor: theme.colors.primary },
-                  ]}
-                />
-              </Animated.View>
-            </View>
-          ),
-        }}
-        tabBar={props =>
-          isIPhoneDuo ? (
-            <DuoTabBar
-              {...props}
-              floatingButton={floatingButton}
-              inactiveTintColor={theme.colors.text.default}
-              activeTintColor={theme.colors.primary}
-            />
-          ) : (
-            <BottomTabBar
-              {...props}
-              floatingButton={floatingButton}
-              inactiveTintColor={theme.colors.text.hint}
-              activeTintColor={theme.colors.primary}
-              style={[
-                {
-                  height:
-                    64 +
-                    (Platform.OS === 'ios'
-                      ? Math.min(insets.bottom, 21)
-                      : insets.bottom),
-                },
-              ]}
-            />
-          )
+      {tabs.map((item, index) => {
+        const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
+        const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
+        const isNumZero = isNum && Number(item.badgeLabel) === 0;
+
+        let badgeLabel = item?.badgeLabel;
+        if (isNumZero) {
+          badgeLabel = undefined;
         }
-        initialRouteName={initialRouteName}
-      >
-        {tabs.map((item, index) => {
-          const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
-          const isDot =
-            typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
-          const isNumZero = isNum && Number(item.badgeLabel) === 0;
 
-          let badgeLabel = item?.badgeLabel;
-          if (isNumZero) {
-            badgeLabel = undefined;
-          }
+        let badgeStyle: {
+          marginRight: number;
+          top: number;
+          backgroundColor: string;
+          width?: number;
+        } = {
+          marginRight: -8,
+          top: -4,
+          backgroundColor: Colors.orange_03,
+        };
 
-          let badgeStyle: {
-            marginRight: number;
-            top: number;
-            backgroundColor: string;
-            width?: number;
-          } = {
-            marginRight: -8,
+        if (isNum) {
+          badgeStyle = {
+            marginRight: -4,
             top: -4,
+            backgroundColor: Colors.red_03,
+          };
+        }
+        if (isDot) {
+          badgeStyle = {
+            marginRight: -2,
+            top: -2,
             backgroundColor: Colors.orange_03,
+            width: 12,
           };
+        }
 
-          if (isNum) {
-            badgeStyle = {
-              marginRight: -4,
-              top: -4,
-              backgroundColor: Colors.red_03,
-            };
-          }
-          if (isDot) {
-            badgeStyle = {
-              marginRight: -2,
-              top: -2,
-              backgroundColor: Colors.orange_03,
-              width: 12,
-            };
-          }
-
-          return (
-            <Tab.Screen
-              key={`BottomTab-${item.name}`}
-              name={item.name}
-              component={TabScreen}
-              initialParams={{ ...item, nested, index }}
-              listeners={handler}
-              options={{
-                tabBarLabel: ({ focused, color }) => {
-                  return (
-                    <Text
-                      numberOfLines={1}
-                      typography={
-                        focused ? 'label_xs_medium' : 'description_xs_regular'
-                      }
-                      color={color}
-                    >
-                      {item.label}
-                    </Text>
-                  );
+        return (
+          <Tab.Screen
+            key={`BottomTab-${item.name}`}
+            name={item.name}
+            component={TabScreen}
+            initialParams={{ ...item, nested, index }}
+            listeners={handler}
+            options={{
+              tabBarLabel: ({ focused, color }) => {
+                return (
+                  <Text
+                    numberOfLines={1}
+                    typography={
+                      focused ? 'label_xs_medium' : 'description_xs_regular'
+                    }
+                    color={color}
+                  >
+                    {item.label}
+                  </Text>
+                );
+              },
+              title: item.label,
+              tabBarStyle: [
+                {
+                  height: 64,
                 },
-                title: item.label,
-                tabBarStyle: [
-                  {
-                    height: 64,
-                  },
-                  styles.tabStyle,
-                ],
-                tabBarBadge: badgeLabel,
-                tabBarBadgeStyle: [
-                  {
-                    borderColor: 'white',
-                    borderWidth: 2,
-                    fontSize: 10,
-                    lineHeight: 14,
-                    fontWeight: 'bold',
-                    alignSelf: 'center',
-                    fontFamily: exportFontFamily('bold'),
-                  },
-                  badgeStyle,
-                ],
-                tabBarIcon: ({ color }) => (
-                  <Icon source={item.icon} color={color} size={28} />
-                ),
-                ...item,
-              }}
-            />
-          );
-        })}
-      </Tab.Navigator>
-    </DuoBarCompressionProvider>
+                styles.tabStyle,
+              ],
+              tabBarBadge: badgeLabel,
+              tabBarBadgeStyle: [
+                {
+                  borderColor: 'white',
+                  borderWidth: 2,
+                  fontSize: 10,
+                  lineHeight: 14,
+                  fontWeight: 'bold',
+                  alignSelf: 'center',
+                  fontFamily: exportFontFamily('bold'),
+                },
+                badgeStyle,
+              ],
+              tabBarIcon: ({ color }) => (
+                <Icon source={item.icon} color={color} size={28} />
+              ),
+              ...item,
+            }}
+          />
+        );
+      })}
+    </Tab.Navigator>
   );
 };