@momo-kits/foundation 0.169.9 → 0.169.10-beta.1

package/Application/BottomSheet.hooks.ts

@@ -21,8 +21,6 @@ import { BottomSheetParams, NavigatorProps } from './types';
 import { isIPhoneDuo } from './utils';
 import { useModalLayout } from './modalLayout';
 
-const MAX_IOS_BOTTOM_INSET = 21;
-
 /**
  * Sheet geometry for the current window: foldable placement and size from
  * `useModalLayout`, plus the insets and offsets the keyboard handling needs.
@@ -37,10 +35,7 @@ export const useBottomSheetLayout = () => {
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
   const isIOS = Platform.OS === 'ios';
-  let bottomInset = insets.bottom;
-  if (isIOS) {
-    bottomInset = Math.min(insets.bottom, MAX_IOS_BOTTOM_INSET);
-  }
+  const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
 
   return {
@@ -73,7 +68,7 @@ export const useDuoKeyboardLift = (
     if (!isDuo || !useKeyboardAvoidingView) {
       return;
     }
-    const handleKeyboardChange = (e: KeyboardEvent) => {
+    const onKeyboardChange = (e: KeyboardEvent) => {
       const overlap = windowHeight - e.endCoordinates.screenY;
       const lift = Math.max(
         overlap - bottomInset - (keyboardVerticalOffset ?? 0),
@@ -91,8 +86,8 @@ export const useDuoKeyboardLift = (
       setKeyboardLift(lift);
     };
     const subscriptions = [
-      Keyboard.addListener('keyboardWillChangeFrame', handleKeyboardChange),
-      Keyboard.addListener('keyboardWillHide', handleKeyboardChange),
+      Keyboard.addListener('keyboardWillChangeFrame', onKeyboardChange),
+      Keyboard.addListener('keyboardWillHide', onKeyboardChange),
     ];
     return () => subscriptions.forEach(sub => sub.remove());
   }, [
@@ -154,7 +149,7 @@ export const useSheetDismiss = ({
   leftOptions,
   action,
 }: SheetDismissParams) => {
-  const handleDismiss = useCallback(
+  const onDismiss = useCallback(
     (force = false, callback?: () => void) => {
       if (barrierDismissible && !force) {
         return;
@@ -169,37 +164,32 @@ export const useSheetDismiss = ({
     [barrierDismissible, closeAnimation, navigator],
   );
 
-  const handleRequestClose = useCallback(
+  const onRequestClose = useCallback(
     (callback?: () => void) => {
-      handleDismiss(true, callback);
+      onDismiss(true, callback);
     },
-    [handleDismiss],
+    [onDismiss],
   );
 
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
-        handleDismiss();
+        onDismiss();
         return true;
       },
     );
     return () => backHandler.remove();
-  }, [barrierDismissible, handleDismiss]);
+  }, [barrierDismissible, onDismiss]);
 
-  const handlePressBack = useCallback(() => {
-    handleDismiss(true, leftOptions?.onPressIconLeft);
-  }, [leftOptions, handleDismiss]);
+  const onPressBack = useCallback(() => {
+    onDismiss(true, leftOptions?.onPressIconLeft);
+  }, [leftOptions, onDismiss]);
 
-  const handlePressClose = useCallback(() => {
+  const onPressClose = useCallback(() => {
     action.current = 'icon_close';
-    handleDismiss(true);
-  }, [action, handleDismiss]);
+    onDismiss(true);
+  }, [action, onDismiss]);
 
-  return {
-    handleDismiss,
-    handleRequestClose,
-    handlePressBack,
-    handlePressClose,
-  };
+  return { onDismiss, onRequestClose, onPressBack, onPressClose };
 };

package/Application/BottomSheet.tsx

@@ -30,23 +30,6 @@ import {
   renderSheetHeader,
 } from './BottomSheet.parts';
 
-const OPEN_TIMING = {
-  duration: 350,
-  easing: Easing.bezier(0.05, 0.7, 0.1, 1),
-};
-const CLOSE_TIMING = {
-  duration: 200,
-  easing: Easing.bezier(0.3, 0.0, 0.8, 0.15),
-};
-const SETTLE_SPRING = {
-  damping: 20,
-  mass: 1,
-  stiffness: 100,
-  overshootClamping: false,
-  energyThreshold: 1e-10,
-};
-const DISMISS_DRAG_DISTANCE = 100;
-
 /**
  * Bottom sheet route of the modal stack: slides the given screen up under a
  * drag handle and header, and reports how it was closed through `onDismiss`.
@@ -96,14 +79,22 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 
   const openAnimation = useCallback(() => {
-    translateY.value = withTiming(0, OPEN_TIMING);
+    translateY.value = withTiming(0, {
+      duration: 350,
+      easing: Easing.bezier(0.05, 0.7, 0.1, 1),
+    });
   }, [translateY]);
 
   const closeAnimation = useCallback(
     (callback = () => {}) => {
-      translateY.value = withTiming(heightDevice, CLOSE_TIMING, () => {
-        return scheduleOnRN(callback);
-      });
+      translateY.value = withTiming(
+        heightDevice,
+        {
+          duration: 200,
+          easing: Easing.bezier(0.3, 0.0, 0.8, 0.15),
+        },
+        () => scheduleOnRN(callback),
+      );
     },
     [heightDevice, translateY],
   );
@@ -120,11 +111,17 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         }
       },
       onPanResponderRelease: (_, gestureState) => {
-        if (gestureState.dy > DISMISS_DRAG_DISTANCE) {
+        if (gestureState.dy > 100) {
           action.current = 'gesture';
-          handleDismiss(true);
+          onDismiss(true);
         } else {
-          translateY.value = withSpring(0, SETTLE_SPRING);
+          translateY.value = withSpring(0, {
+            damping: 20,
+            mass: 1,
+            stiffness: 100,
+            overshootClamping: false,
+            energyThreshold: 1e-10,
+          });
         }
       },
     }),
@@ -154,12 +151,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     leftOptions,
     action,
   });
-  const {
-    handleDismiss,
-    handleRequestClose,
-    handlePressBack,
-    handlePressClose,
-  } = handlers;
+  const { onDismiss, onRequestClose, onPressBack, onPressClose } = handlers;
 
   const showBack = !!leftOptions?.onPressIconLeft;
   const iconBack = leftOptions?.iconLeft ?? 'ic_back';
@@ -169,8 +161,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     useDivider,
     theme,
     showBack,
-    onPressBack: handlePressBack,
-    onPressClose: handlePressClose,
+    onPressBack,
+    onPressClose,
     iconBack,
     options,
     leftOptions,
@@ -186,7 +178,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     <Screen
       {...props}
       {...props.route.params}
-      onRequestClose={handleRequestClose}
+      onRequestClose={onRequestClose}
     />
   );
 
@@ -213,7 +205,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       transparent
       visible={true}
       onRequestClose={() => {
-        handleDismiss();
+        onDismiss();
       }}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
@@ -233,7 +225,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           style={StyleSheet.absoluteFillObject}
           onPress={() => {
             action.current = 'touch';
-            handleDismiss();
+            onDismiss();
           }}
         >
           <Animated.View style={[styles.overlay, animatedOverlayStyle]} />

package/Application/BottomTab/BottomTabBar.tsx

@@ -54,16 +54,16 @@ const useCenterActionPress = () => {
   const buttonStyle = useAnimatedStyle(() => ({
     transform: [{ scale: scale.value }],
   }));
-  const handlePressIn = () => {
+  const onPressIn = () => {
     scale.value = withTiming(
       TabBarMotion.ctaPressedScale,
       TabBarMotion.ctaPress,
     );
   };
-  const handlePressOut = () => {
+  const onPressOut = () => {
     scale.value = withTiming(1, TabBarMotion.ctaPress);
   };
-  return { buttonStyle, handlePressIn, handlePressOut };
+  return { buttonStyle, onPressIn, onPressOut };
 };
 
 /**
@@ -77,7 +77,7 @@ const CenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
   const context = useContext<any>(MiniAppContext);
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const { icon, label, onPress, labelContent } = floatingButton;
-  const { buttonStyle, handlePressIn, handlePressOut } = useCenterActionPress();
+  const { buttonStyle, onPressIn, onPressOut } = useCenterActionPress();
   let iconNode = icon;
   if (typeof icon === 'string') {
     iconNode = (
@@ -95,8 +95,8 @@ const CenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
         accessibilityRole={'button'}
         accessibilityLabel={label}
         onPress={onPress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         style={styles.cta}
       >
         <Animated.View

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -94,14 +94,14 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
   floatingButton,
 }) => {
   const { theme } = useContext(ApplicationContext);
-  const { buttonStyle, handlePressIn, handlePressOut } = useCenterActionPress();
+  const { buttonStyle, onPressIn, onPressOut } = useCenterActionPress();
   return (
     <Pressable
       accessibilityRole={'button'}
       accessibilityLabel={floatingButton.label}
       onPress={floatingButton.onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
       style={styles.railCta}
     >
       <Animated.View
@@ -190,8 +190,8 @@ const DuoRailTabBar: React.FC<DuoTabBarProps> = props => {
             accessibilityLabel={current?.label}
             accessibilityHint={'bottom_tab_bar'}
             activeOpacity={1}
-            onPressIn={compactLift.handlePressIn}
-            onPressOut={compactLift.handlePressOut}
+            onPressIn={compactLift.onPressIn}
+            onPressOut={compactLift.onPressOut}
             onPress={expandTabBar}
             style={styles.railCompact}
           >

package/Application/BottomTab/TabScreen.tsx

@@ -15,8 +15,6 @@ import { useScreenLayout } from '../../Layout';
 import { getHeaderRowOptions } from '../../Layout/utils';
 import { BottomTabInsetContext } from './BottomTabInset';
 
-const NAVIGATED_REPORT_DELAY = 100;
-
 const Stack = createStackNavigator();
 
 /**
@@ -31,15 +29,16 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
   const screenName = screen?.name || screen?.type?.name || 'Invalid';
   const { isBackgroundToForeground } = useAppState();
+  // Pad clear of the floating bar unless a Screen inside claims the inset to scroll under it.
   const { inset: tabBarInset } = useContext(BottomTabInsetContext);
-  const [isInsetClaimed, setIsInsetClaimed] = useState(false);
+  const [insetClaimed, setInsetClaimed] = useState(false);
   const tabInsetValue = useMemo(
-    () => ({ inset: tabBarInset, claim: () => setIsInsetClaimed(true) }),
+    () => ({ inset: tabBarInset, claim: () => setInsetClaimed(true) }),
     [tabBarInset],
   );
-  const tabInsetStyle = { paddingBottom: isInsetClaimed ? 0 : tabBarInset };
+  const tabInsetStyle = { paddingBottom: insetClaimed ? 0 : tabBarInset };
 
-  const handleScreenNavigated = (pre: string, current: string) => {
+  const onScreenNavigated = (pre: string, current: string) => {
     if (!isBackgroundToForeground) {
       const data: any = {
         preScreenName: pre,
@@ -69,13 +68,13 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
           navigator?.maxApi?.getDataObserver?.(
             'current_screen',
             (data: any) => {
-              handleScreenNavigated(data?.screenName, screenName);
+              onScreenNavigated(data?.screenName, screenName);
               navigator?.maxApi?.setObserver?.('current_screen', {
                 screenName,
               });
             },
           );
-        }, NAVIGATED_REPORT_DELAY);
+        }, 100);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [],
@@ -84,12 +83,12 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
   useEffect(
     () => {
-      const focusAppListener = navigator?.maxApi?.listen?.('onFocusApp', () => {
+      const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
         if (navigation.isFocused()) {
           navigator?.maxApi?.getDataObserver?.(
             'current_screen',
             (data: any) => {
-              handleScreenNavigated(data?.screenName, screenName);
+              onScreenNavigated(data?.screenName, screenName);
               navigator?.maxApi?.setObserver?.('current_screen', {
                 screenName,
               });
@@ -99,7 +98,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
       });
 
       return () => {
-        focusAppListener?.remove?.();
+        onFocusApp?.remove?.();
       };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/Application/BottomTab/index.tsx

@@ -99,16 +99,16 @@ const BottomTab: React.FC<BottomTabProps> = ({
     }, []),
   );
 
-  const handleFocus = (e: any) => {
+  const onFocus = (e: any) => {
     activeIndex.current = tabs.findIndex(i => e.target.includes(i.name));
 
     const isFirstTab = activeIndex.current === 0;
-    const isGestureEnabled = Platform.OS === 'ios' && isFirstTab;
+    const gestureEnabled = Platform.OS === 'ios' && isFirstTab;
     navigation?.setOptions({
-      gestureEnabled: isGestureEnabled,
+      gestureEnabled: gestureEnabled,
     });
     NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(
-      !isGestureEnabled,
+      !gestureEnabled,
     );
   };
 
@@ -123,7 +123,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       listeners?.tabPress?.(e);
     },
     focus: e => {
-      handleFocus(e);
+      onFocus(e);
       StatusBar.setBarStyle('dark-content', true);
       listeners?.focus?.(e);
     },

package/Application/BottomTab/usePressLift.ts

@@ -18,15 +18,15 @@ const usePressLift = () => {
   const style = useAnimatedStyle(() => ({
     transform: [{ scale: 1 + lift.value * (PRESSED_SCALE - 1) }],
   }));
-  const handlePressIn = () => {
+  const onPressIn = () => {
     if (!reduceMotion) {
       lift.value = withSpring(1, SPRING);
     }
   };
-  const handlePressOut = () => {
+  const onPressOut = () => {
     lift.value = withSpring(0, SPRING);
   };
-  return { style, handlePressIn, handlePressOut };
+  return { style, onPressIn, onPressOut };
 };
 
 export { usePressLift };

package/Application/Components/HeaderAnimated.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -9,6 +10,7 @@ import React from 'react';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
 import { useNormalizedSharedValue } from '../hooks';
+import { HeaderBarMetrics, useHeaderLayout } from '../headerLayout';
 
 const ASPECT_RATIOS: Record<
   NonNullable<HeaderAnimatedProps['aspectRatio']>,
@@ -21,16 +23,20 @@ const ASPECT_RATIOS: Record<
 
 /**
  * Parallax header image (or `children`): stretches when pulled down and fades out
- * as the content scrolls up.
+ * as the content scrolls up. Wide windows and the iPhone Duo inner display keep
+ * it at phone size, centered.
  */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
   useScale = true,
   aspectRatio = '16/9',
+  bannerBackgroundColor,
   children,
 }) => {
   const sharedValue = useNormalizedSharedValue(animatedValue);
+  const { isBannerCentered, bannerWidth } = useHeaderLayout();
+  const ratio = ASPECT_RATIOS[aspectRatio];
   const animatedStyle = useAnimatedStyle(() => {
     let scale = 1;
     if (useScale) {
@@ -59,22 +65,36 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
     };
   });
 
+  const content = children ?? (
+    <Image
+      source={{
+        uri: image,
+      }}
+      style={styles.full}
+    />
+  );
+
+  if (!isBannerCentered) {
+    return (
+      <Animated.View
+        style={[styles.container, { aspectRatio: ratio }, animatedStyle]}
+      >
+        {content}
+      </Animated.View>
+    );
+  }
+
   return (
     <Animated.View
-      style={[
-        styles.container,
-        { aspectRatio: ASPECT_RATIOS[aspectRatio] },
-        animatedStyle,
-      ]}
+      style={[styles.container, { height: bannerWidth / ratio }, animatedStyle]}
     >
-      {children ?? (
-        <Image
-          source={{
-            uri: image,
-          }}
-          style={styles.full}
+      {!!bannerBackgroundColor && (
+        <LinearGradient
+          colors={[bannerBackgroundColor, bannerBackgroundColor + '00']}
+          style={StyleSheet.absoluteFill}
         />
       )}
+      <View style={styles.phoneBanner}>{content}</View>
     </Animated.View>
   );
 };
@@ -90,6 +110,11 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   full: { width: '100%', height: '100%' },
+  phoneBanner: {
+    width: HeaderBarMetrics.bannerWidth,
+    height: '100%',
+    alignSelf: 'center',
+  },
 });
 
 export { HeaderAnimated };

package/Application/Components/HeaderBackground.tsx

@@ -8,10 +8,12 @@ import { Colors, Styles } from '../../Consts';
 import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
 import { useNormalizedSharedValue } from '../hooks';
+import { HeaderBarMetrics, useHeaderLayout } from '../headerLayout';
 
 /**
  * Header background: surface and image that fade in on scroll, with an optional
- * gradient (custom or theme) on top. Outlined when `showBaseLineDebug` is on.
+ * gradient (custom or theme) on top, at phone height on wide windows. Outlined
+ * when `showBaseLineDebug` is on.
  */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
@@ -25,6 +27,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerImage = headerBackground ?? theme.assets?.headerBackground;
   const sharedValue = useNormalizedSharedValue(animatedValue);
+  const { isWide } = useHeaderLayout();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -38,14 +41,19 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       />
       <View style={styles.gradientContainer}>
         {useGradient && !!gradientColor && (
-          <Animated.View style={styles.extendedHeader}>
+          <Animated.View
+            style={[styles.extendedHeader, isWide && styles.phoneHeight]}
+          >
             <LinearGradient
               colors={[gradientColor, gradientColor + '00']}
               style={StyleSheet.absoluteFill}
             >
               {!!headerImage && (
                 <Image
-                  style={styles.headerBackground}
+                  style={[
+                    styles.headerBackground,
+                    isWide && styles.phoneHeight,
+                  ]}
                   source={{ uri: headerImage }}
                   loading={false}
                 />
@@ -75,6 +83,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
     aspectRatio: 375 / 154,
   },
+  // wide windows keep the phone gradient height instead of scaling with the width
+  phoneHeight: {
+    aspectRatio: undefined,
+    height: HeaderBarMetrics.gradientHeight,
+  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });