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

package/Application/BottomSheet.hooks.ts

@@ -21,6 +21,8 @@ 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.
@@ -35,7 +37,10 @@ export const useBottomSheetLayout = () => {
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
   const isIOS = Platform.OS === 'ios';
-  const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
+  let bottomInset = insets.bottom;
+  if (isIOS) {
+    bottomInset = Math.min(insets.bottom, MAX_IOS_BOTTOM_INSET);
+  }
   const keyboardOffset = heightHeader - bottomInset;
 
   return {
@@ -68,7 +73,7 @@ export const useDuoKeyboardLift = (
     if (!isDuo || !useKeyboardAvoidingView) {
       return;
     }
-    const onKeyboardChange = (e: KeyboardEvent) => {
+    const handleKeyboardChange = (e: KeyboardEvent) => {
       const overlap = windowHeight - e.endCoordinates.screenY;
       const lift = Math.max(
         overlap - bottomInset - (keyboardVerticalOffset ?? 0),
@@ -86,8 +91,8 @@ export const useDuoKeyboardLift = (
       setKeyboardLift(lift);
     };
     const subscriptions = [
-      Keyboard.addListener('keyboardWillChangeFrame', onKeyboardChange),
-      Keyboard.addListener('keyboardWillHide', onKeyboardChange),
+      Keyboard.addListener('keyboardWillChangeFrame', handleKeyboardChange),
+      Keyboard.addListener('keyboardWillHide', handleKeyboardChange),
     ];
     return () => subscriptions.forEach(sub => sub.remove());
   }, [
@@ -149,7 +154,7 @@ export const useSheetDismiss = ({
   leftOptions,
   action,
 }: SheetDismissParams) => {
-  const onDismiss = useCallback(
+  const handleDismiss = useCallback(
     (force = false, callback?: () => void) => {
       if (barrierDismissible && !force) {
         return;
@@ -164,32 +169,37 @@ export const useSheetDismiss = ({
     [barrierDismissible, closeAnimation, navigator],
   );
 
-  const onRequestClose = useCallback(
+  const handleRequestClose = useCallback(
     (callback?: () => void) => {
-      onDismiss(true, callback);
+      handleDismiss(true, callback);
     },
-    [onDismiss],
+    [handleDismiss],
   );
 
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
-        onDismiss();
+        handleDismiss();
         return true;
       },
     );
     return () => backHandler.remove();
-  }, [barrierDismissible, onDismiss]);
+  }, [barrierDismissible, handleDismiss]);
 
-  const onPressBack = useCallback(() => {
-    onDismiss(true, leftOptions?.onPressIconLeft);
-  }, [leftOptions, onDismiss]);
+  const handlePressBack = useCallback(() => {
+    handleDismiss(true, leftOptions?.onPressIconLeft);
+  }, [leftOptions, handleDismiss]);
 
-  const onPressClose = useCallback(() => {
+  const handlePressClose = useCallback(() => {
     action.current = 'icon_close';
-    onDismiss(true);
-  }, [action, onDismiss]);
+    handleDismiss(true);
+  }, [action, handleDismiss]);
 
-  return { onDismiss, onRequestClose, onPressBack, onPressClose };
+  return {
+    handleDismiss,
+    handleRequestClose,
+    handlePressBack,
+    handlePressClose,
+  };
 };

package/Application/BottomSheet.tsx

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

package/Application/BottomTab/ActiveIndicator.tsx

@@ -5,6 +5,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { defaultTheme } from '../../Consts';
 import { ApplicationContext } from '../../Context';
 import { getIndicatorShadow, TabBarMotion } from './metrics';
 
@@ -70,7 +71,10 @@ const ActiveIndicator: React.FC<Props> = ({
         styles.indicator,
         {
           borderRadius: radius,
-          backgroundColor: theme.colors.background.tonal,
+          // a mini app's own theme may lack `tonal`; without the fallback the indicator is transparent
+          backgroundColor:
+            theme.colors.background.tonal ??
+            defaultTheme.colors.background.tonal,
           boxShadow: getIndicatorShadow(theme.colors.primary),
         },
         style,

package/Application/BottomTab/BottomTabBar.styles.ts

@@ -2,6 +2,20 @@ import { StyleSheet } from 'react-native';
 import { Colors, Spacing } from '../../Consts';
 import { CTA_SHADOW, TabBarMetrics } from './metrics';
 
+const ITEM_HEIGHT =
+  TabBarMetrics.indicatorHeight +
+  TabBarMetrics.itemIconLabelGap +
+  TabBarMetrics.labelHeight;
+const CONTENT_HEIGHT = TabBarMetrics.height - 2 * TabBarMetrics.paddingVertical;
+// the items are centered in the content, so their label starts this far below the content top
+const ITEM_LABEL_TOP =
+  (CONTENT_HEIGHT - ITEM_HEIGHT) / 2 +
+  TabBarMetrics.indicatorHeight +
+  TabBarMetrics.itemIconLabelGap;
+// the center action column is placed so its label starts on the same line as the tab labels
+const CTA_TOP =
+  ITEM_LABEL_TOP - TabBarMetrics.ctaLabelGap - TabBarMetrics.ctaSize;
+
 export const styles = StyleSheet.create({
   bar: {
     position: 'absolute',
@@ -37,7 +51,7 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     left: 0,
     right: 0,
-    top: -TabBarMetrics.ctaLift - TabBarMetrics.paddingVertical,
+    top: CTA_TOP,
     alignItems: 'center',
     gap: TabBarMetrics.ctaLabelGap,
   },
@@ -46,6 +60,9 @@ export const styles = StyleSheet.create({
     width: TabBarMetrics.ctaSize,
     height: TabBarMetrics.ctaSize,
     borderRadius: TabBarMetrics.ctaSize / 2,
+    // Figma Icon Button border: white 60% hairline
+    borderWidth: 1,
+    borderColor: `rgba(255, 255, 255, ${TabBarMetrics.ctaBorderOpacity})`,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/Application/BottomTab/BottomTabBar.tsx

@@ -54,16 +54,16 @@ const useCenterActionPress = () => {
   const buttonStyle = useAnimatedStyle(() => ({
     transform: [{ scale: scale.value }],
   }));
-  const onPressIn = () => {
+  const handlePressIn = () => {
     scale.value = withTiming(
       TabBarMotion.ctaPressedScale,
       TabBarMotion.ctaPress,
     );
   };
-  const onPressOut = () => {
+  const handlePressOut = () => {
     scale.value = withTiming(1, TabBarMotion.ctaPress);
   };
-  return { buttonStyle, onPressIn, onPressOut };
+  return { buttonStyle, handlePressIn, handlePressOut };
 };
 
 /**
@@ -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, onPressIn, onPressOut } = useCenterActionPress();
+  const { buttonStyle, handlePressIn, handlePressOut } = 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={onPressIn}
-        onPressOut={onPressOut}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
         style={styles.cta}
       >
         <Animated.View
@@ -181,21 +181,17 @@ const HorizontalTabBar: React.FC<{
     return renderItems(items);
   };
 
-  const customContainer = withCta && floatingButton?.container;
-
   return (
     <View
       style={[styles.container, { width }]}
       accessibilityLabel={'bottom_tab_bar'}
     >
-      {customContainer || (
-        <CurvedContainer
-          width={width}
-          height={TabBarMetrics.height}
-          radius={TabBarMetrics.height / 2}
-          notchCenterX={withCta ? width / 2 : undefined}
-        />
-      )}
+      <CurvedContainer
+        width={width}
+        height={TabBarMetrics.height}
+        radius={TabBarMetrics.height / 2}
+        notchCenterX={withCta ? width / 2 : undefined}
+      />
       <View style={styles.content}>
         <ActiveIndicator
           axis={'x'}
@@ -228,6 +224,8 @@ export default function BottomTabBar(props: Props) {
     window.height,
     insets.left,
     insets.right,
+    state.routes.length,
+    withCta,
   );
 
   return (

package/Application/BottomTab/CurvedContainer.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import Svg, { Defs, FeGaussianBlur, Filter, Path } from 'react-native-svg';
 import { Colors } from '../../Consts';
 import { ApplicationContext } from '../../Context';
-import { NOTCH_CURVES, NOTCH_HALF_WIDTH } from './metrics';
+import { NOTCH_CURVES, NOTCH_HALF_WIDTH, TabBarMetrics } from './metrics';
 
 type Props = {
   width: number;
@@ -139,7 +139,13 @@ const CurvedContainer: React.FC<Props> = ({
           filter={'url(#keyShadow)'}
         />
       )}
-      <Path d={path} fill={theme.colors.background.surface} />
+      <Path
+        d={path}
+        fill={theme.colors.background.surface}
+        fillOpacity={TabBarMetrics.backgroundOpacity}
+        stroke={theme.colors.border.default}
+        strokeWidth={1}
+      />
     </Svg>
   );
 };

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -13,7 +13,7 @@ import Animated, {
 import { TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
-import { Colors, Spacing } from '../../Consts';
+import { Colors } from '../../Consts';
 import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type IconRenderer = (props: {
@@ -143,7 +143,7 @@ const styles = StyleSheet.create({
     minWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: Spacing.XXS,
+    gap: TabBarMetrics.itemIconLabelGap,
   },
   slot: {
     height: TabBarMetrics.indicatorHeight,

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -94,14 +94,14 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
   floatingButton,
 }) => {
   const { theme } = useContext(ApplicationContext);
-  const { buttonStyle, onPressIn, onPressOut } = useCenterActionPress();
+  const { buttonStyle, handlePressIn, handlePressOut } = useCenterActionPress();
   return (
     <Pressable
       accessibilityRole={'button'}
       accessibilityLabel={floatingButton.label}
       onPress={floatingButton.onPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
       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.onPressIn}
-            onPressOut={compactLift.onPressOut}
+            onPressIn={compactLift.handlePressIn}
+            onPressOut={compactLift.handlePressOut}
             onPress={expandTabBar}
             style={styles.railCompact}
           >

package/Application/BottomTab/DuoTabBar.tsx

@@ -3,7 +3,11 @@ import React from 'react';
 import { useWindowDimensions, View } from 'react-native';
 import { useScreenLayout } from '../../Layout/utils';
 import { FloatingButtonProps } from '../types';
-import { getSystemIndicatorHeight, HorizontalTabBar } from './BottomTabBar';
+import {
+  getSystemIndicatorHeight,
+  hasCenterAction,
+  HorizontalTabBar,
+} from './BottomTabBar';
 import { getHorizontalBarWidth, TabBarMetrics } from './metrics';
 import { getTabItems } from './tabItems';
 import { DuoRailTabBar } from './DuoRailTabBar';
@@ -34,6 +38,7 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
   const { insets } = useScreenLayout();
   const { width, height } = useWindowDimensions();
   const { floatingButton, activeTintColor, inactiveTintColor } = props;
+  const tabItems = getTabItems(props);
 
   return (
     <View
@@ -44,8 +49,15 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
       ]}
     >
       <HorizontalTabBar
-        items={getTabItems(props)}
-        width={getHorizontalBarWidth(width, height, insets.left, insets.right)}
+        items={tabItems}
+        width={getHorizontalBarWidth(
+          width,
+          height,
+          insets.left,
+          insets.right,
+          tabItems.length,
+          hasCenterAction(floatingButton, tabItems.length),
+        )}
         floatingButton={floatingButton}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}

package/Application/BottomTab/TabScreen.tsx

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

package/Application/BottomTab/index.tsx

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

package/Application/BottomTab/metrics.ts

@@ -8,11 +8,18 @@ import { Colors, Radius, Spacing } from '../../Consts';
  * iPhone Duo rail (center action under the container).
  */
 const TabBarMetrics = {
-  height: 68,
+  height: 60,
   margin: Spacing.S,
-  paddingVertical: Spacing.S,
+  paddingVertical: Spacing.XS,
   paddingHorizontal: Spacing.M,
-  itemGap: Spacing.XS,
+  itemGap: 1,
+  // gap between the icon slot and the label inside a tab (Figma: none)
+  itemIconLabelGap: 0,
+  // .Nav/Background: no backdrop blur, so use the Figma Blur=Off spec (opacity 95%, no blur) plus the 1px
+  // border — nearly solid, matching the frosted sample; surface keeps dark-mode support
+  backgroundOpacity: 0.95,
+  // white 60% hairline around the center action button (Figma Icon Button border)
+  ctaBorderOpacity: 0.6,
   iconSize: 24,
   // active indicator behind the icon: 24 icon + XS·M padding
   indicatorPaddingVertical: Spacing.XS,
@@ -25,6 +32,9 @@ const TabBarMetrics = {
   systemIndicatorHeight: 24,
   foldableMinShortSide: 600,
   foldableWidthRatio: 0.65,
+  // a 2-tab bar doesn't stretch to the full width: each item is this fixed width and the bar is
+  // sized to its content, centered (Figma Navigation · 2 Tab: item 100, bar ~225)
+  twoTabItemWidth: 100,
   ctaSlotWidth: 92,
   ctaSize: 48,
   ctaIconSize: 28,
@@ -132,7 +142,17 @@ const getHorizontalBarWidth = (
   height: number,
   insetLeft: number,
   insetRight: number,
+  itemCount: number,
+  hasCta: boolean,
 ) => {
+  // 2 tabs (no center action) stay content-sized and centered instead of filling the window
+  if (itemCount === 2 && !hasCta) {
+    return (
+      TabBarMetrics.twoTabItemWidth * 2 +
+      TabBarMetrics.paddingHorizontal * 2 +
+      TabBarMetrics.itemGap
+    );
+  }
   const shortSide = Math.min(width, height);
   if (shortSide >= TabBarMetrics.foldableMinShortSide) {
     return shortSide * TabBarMetrics.foldableWidthRatio;

package/Application/BottomTab/usePressLift.ts

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