@momo-kits/foundation 0.167.1-beta.7 → 0.167.1-duo.12

package/Layout/utils.ts

@@ -1,5 +1,11 @@
-import React, { Fragment, ReactElement } from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { Fragment, ReactElement, useContext } from 'react';
+import { Platform, useWindowDimensions, ViewStyle } from 'react-native';
+import {
+  EdgeInsets,
+  SafeAreaInsetsContext,
+} from 'react-native-safe-area-context';
+import { Spacing } from '../Consts';
+import { ReservedRegion, ReservedRegionsContext } from './ReservedRegions';
 
 /**
  * validate children type
@@ -38,10 +44,374 @@ const validateChildren = (
   }
 };
 
+/**
+ * Header geometry
+ * - barHeight: navigation bar row below the status bar
+ * - iPhoneMinHeight: header never shorter than this on iPhone (landscape, iPhone Duo)
+ * - statusBarMinInset: a smaller top inset means the status bar is not on the top edge
+ * - largeWidth / largeMargin: @react-navigation/elements Header gives its content row
+ *   5pt side margins on iOS from 414pt wide
+ */
+const HeaderMetrics = {
+  barHeight: 52,
+  iPhoneMinHeight: 72,
+  statusBarMinInset: 20,
+  largeWidth: 414,
+  largeMargin: 5,
+};
+
+/**
+ * iPhone Duo geometry, iOS 27.1 (Xcode 27.1 simulator)
+ * - maxAspectRatio: both displays are near 1.42 (inner) and 1.45 (outer), every slab
+ *   iPhone is 1.77 or taller
+ * - innerMinHeight: window height from which the inner display is in use (outer display
+ *   is 466pt tall in landscape, inner display 669pt)
+ * - controlSize / itemPitch: vertical bar of 48pt circular controls, item groups as 48pt
+ *   wide capsules at a 50pt pitch, 12pt from the strip's inner edge and 12pt apart
+ * - firstItemTop: with the status bar in the strip, the first control sits under the
+ *   camera, clock and connectivity cluster (cluster ends near y 151 on the outer display,
+ *   y 98 on the inner display in landscape)
+ * - outerHeaderHeight / outerCameraCenterY: on the outer display in portrait the header
+ *   is 4pt taller than iPhoneMinHeight and its title lines up with the camera punchout
+ *   (y 24–66 at the top of the strip)
+ * - edgeInset: on the outer display in landscape the strip holds no status bar, so its
+ *   controls start this far from the top and stay this far above the bottom, unless a
+ *   reserved region (the camera at either end) asks for more
+ */
+const DuoMetrics = {
+  maxAspectRatio: 1.6,
+  innerMinHeight: 600,
+  controlSize: 48,
+  itemPitch: 50,
+  firstItemTop: 170,
+  firstItemTopLandscape: 120,
+  outerHeaderHeight: 76,
+  outerCameraCenterY: 45,
+  edgeInset: 24,
+};
+
+const NO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+
+/**
+ * how far system regions reach into a side strip from its top and from its bottom end
+ * (e.g. the camera, which sits at either end depending on the rotation), and the center
+ * y of the region reaching furthest from the top
+ */
+const getStripOcclusion = (
+  regions: ReservedRegion[],
+  stripLeft: number,
+  stripRight: number,
+  windowHeight: number,
+) =>
+  regions.reduce(
+    (occlusion, region) => {
+      const overlapsStrip =
+        region.x < stripRight && region.x + region.width > stripLeft;
+      if (!overlapsStrip) {
+        return occlusion;
+      }
+      const centerY = region.y + region.height / 2;
+      if (centerY < windowHeight / 2) {
+        if (region.y + region.height > occlusion.top) {
+          occlusion.top = region.y + region.height;
+          occlusion.topCenter = centerY;
+        }
+      } else {
+        occlusion.bottom = Math.max(occlusion.bottom, windowHeight - region.y);
+      }
+      return occlusion;
+    },
+    { top: 0, topCenter: 0, bottom: 0 },
+  );
+
+const isIPhone = () =>
+  Platform.OS === 'ios' && Platform.constants.interfaceIdiom === 'phone';
+
+/**
+ * Header height and the room it keeps above the bar row for the status bar. On iPhone the
+ * header is at least iPhoneMinHeight, and with the status bar off the top edge the row
+ * spans the whole header, so the title stays vertically centered.
+ */
+const getHeaderLayout = (topInset: number) => {
+  const height = HeaderMetrics.barHeight + topInset;
+  if (!isIPhone()) {
+    return { headerHeight: height, headerStatusBarHeight: topInset };
+  }
+
+  return {
+    headerHeight: Math.max(height, HeaderMetrics.iPhoneMinHeight),
+    headerStatusBarHeight:
+      topInset < HeaderMetrics.statusBarMinInset ? 0 : topInset,
+  };
+};
+
+/**
+ * Header whose bar row is centered on a window y, at least iPhoneMinHeight tall and
+ * reaching 8pt below a side bar control centered there
+ */
+const getCenteredHeaderLayout = (centerY: number) => {
+  const headerHeight = Math.max(
+    HeaderMetrics.iPhoneMinHeight,
+    centerY + DuoMetrics.controlSize / 2 + Spacing.S,
+  );
+  return {
+    headerHeight,
+    headerStatusBarHeight: Math.max(0, centerY * 2 - headerHeight),
+  };
+};
+
+export type SideBarEdge = 'left' | 'right';
+
+export type SideBarLayout = {
+  /**
+   * Edge holding the side bar, the one with the larger safe-area inset.
+   */
+  edge: SideBarEdge;
+
+  /**
+   * Width of the side bar column, the safe-area inset on that edge.
+   */
+  width: number;
+
+  /**
+   * Window y of the first side bar item, below the navigation bar and the side status bar.
+   */
+  top: number;
+
+  /**
+   * Room to keep free above the window bottom, clear of a camera at the bottom end.
+   */
+  bottom: number;
+};
+
+export type ScreenLayout = {
+  /**
+   * Window width, from useWindowDimensions.
+   */
+  width: number;
+
+  /**
+   * Window height, from useWindowDimensions.
+   */
+  height: number;
+
+  /**
+   * `true` when running on iPhone Duo, outer or inner display.
+   */
+  isIPhoneDuo: boolean;
+
+  /**
+   * Raw safe-area insets.
+   */
+  insets: EdgeInsets;
+
+  /**
+   * Horizontal insets the screen content keeps clear of. 0 outside iPhone Duo.
+   */
+  insetLeft: number;
+  insetRight: number;
+
+  /**
+   * Width available to the screen content: window width minus the horizontal insets.
+   */
+  contentWidth: number;
+
+  /**
+   * Header height: the top safe-area inset plus the navigation bar row, at least 72pt on iPhone.
+   */
+  headerHeight: number;
+
+  /**
+   * Room above the navigation bar row for the status bar, the rest of headerHeight is
+   * the row, which centers the title vertically. 0 when the status bar is not on top.
+   */
+  headerStatusBarHeight: number;
+
+  /**
+   * Side column holding the back button and the toolkit, when iPhone Duo moves the
+   * bars to the side. `undefined` while the bars stay horizontal.
+   */
+  sideBar?: SideBarLayout;
+};
+
+/**
+ * Detect iPhone Duo from the window shape and the safe area: a phone idiom window
+ * near square, or a phone with asymmetric side insets (slab iPhones report equal
+ * left / right insets in landscape, iPhone Duo moves the status bar to one side).
+ */
+const isIPhoneDuoLayout = (
+  width: number,
+  height: number,
+  insets: EdgeInsets,
+) => {
+  if (!isIPhone()) {
+    return false;
+  }
+
+  const shortSide = Math.min(width, height);
+  const aspectRatio = shortSide > 0 ? Math.max(width, height) / shortSide : 0;
+  const isSquare = aspectRatio > 0 && aspectRatio < DuoMetrics.maxAspectRatio;
+
+  return isSquare || insets.left !== insets.right;
+};
+
+/**
+ * Screen layout for the current window: iPhone Duo detection, horizontal content insets,
+ * content width and the side bar. Follows the window through fold, unfold, rotation and
+ * Split View since it reads useWindowDimensions and the safe-area context.
+ */
+const useScreenLayout = (): ScreenLayout => {
+  const { width, height } = useWindowDimensions();
+  const insets = useContext(SafeAreaInsetsContext) ?? NO_INSETS;
+  const reservedRegions = useContext(ReservedRegionsContext);
+
+  let headerLayout = getHeaderLayout(insets.top);
+  const isIPhoneDuo = isIPhoneDuoLayout(width, height, insets);
+  if (!isIPhoneDuo) {
+    return {
+      width,
+      height,
+      isIPhoneDuo,
+      insets,
+      insetLeft: 0,
+      insetRight: 0,
+      contentWidth: width,
+      ...headerLayout,
+    };
+  }
+
+  const sideInset = Math.max(insets.left, insets.right);
+  let sideBar: SideBarLayout | undefined;
+  // narrower strips cannot host a control 12pt from the inner edge
+  if (sideInset >= DuoMetrics.controlSize + Spacing.M) {
+    const edge = insets.right >= insets.left ? 'right' : 'left';
+    const stripLeft = edge === 'right' ? width - sideInset : 0;
+    // keep controls clear of the camera and of the status bar cluster, which grows for
+    // calls and Live Activities. Region frames already include the system's margin
+    const occlusion = getStripOcclusion(
+      reservedRegions,
+      stripLeft,
+      stripLeft + sideInset,
+      height,
+    );
+
+    let top = insets.top + HeaderMetrics.barHeight + Spacing.M;
+    if (insets.top < HeaderMetrics.statusBarMinInset) {
+      // status bar lives in the strip: start under its cluster, as the native bar does
+      const isLandscape = width > height;
+      if (!isLandscape) {
+        top = DuoMetrics.firstItemTop;
+      } else if (height >= DuoMetrics.innerMinHeight) {
+        top = DuoMetrics.firstItemTopLandscape;
+      } else {
+        // outer display in landscape: no status bar in the strip, the title row centers
+        // on the camera when it sits at the top end, otherwise on the back button
+        top = DuoMetrics.edgeInset;
+        const titleCenterY =
+          occlusion.top > top
+            ? occlusion.topCenter
+            : top + DuoMetrics.controlSize / 2;
+        headerLayout = getCenteredHeaderLayout(titleCenterY);
+      }
+
+      if (height > width && width < DuoMetrics.innerMinHeight) {
+        // outer display: the row starts below the top so the title centers on the camera
+        headerLayout = {
+          headerHeight: DuoMetrics.outerHeaderHeight,
+          headerStatusBarHeight:
+            DuoMetrics.outerCameraCenterY * 2 - DuoMetrics.outerHeaderHeight,
+        };
+      }
+    }
+
+    sideBar = {
+      edge,
+      width: sideInset,
+      top: Math.max(top, occlusion.top),
+      bottom: Math.max(DuoMetrics.edgeInset, occlusion.bottom),
+    };
+  }
+
+  return {
+    width,
+    height,
+    isIPhoneDuo,
+    insets,
+    insetLeft: insets.left,
+    insetRight: insets.right,
+    contentWidth: width - insets.left - insets.right,
+    ...headerLayout,
+    sideBar,
+  };
+};
+
+/**
+ * Side margin @react-navigation/elements Header adds to its content row
+ */
+const getHeaderMargin = (width: number) =>
+  Platform.OS === 'ios' && width >= HeaderMetrics.largeWidth
+    ? HeaderMetrics.largeMargin
+    : 0;
+
+/**
+ * Absolute style that floats a header item into the side bar, relative to the header
+ * container (left or right) rendering it, 12pt from the strip's inner edge.
+ * `undefined` while there is no side bar.
+ * @param container header container rendering the item
+ * @param slot position in the side bar, 0 for back, 1 for the toolkit below it
+ */
+const useSideBarItemStyle = (
+  container: 'left' | 'right',
+  slot: number,
+): ViewStyle | undefined => {
+  const { width, insets, headerStatusBarHeight, sideBar } = useScreenLayout();
+  if (!sideBar) {
+    return undefined;
+  }
+
+  const margin = getHeaderMargin(width);
+  const columnLeft = sideBar.edge === 'left' ? 0 : width - sideBar.width;
+  const top =
+    sideBar.top -
+    headerStatusBarHeight +
+    slot * (DuoMetrics.controlSize + Spacing.M);
+  const innerEdgeStyle: ViewStyle =
+    sideBar.edge === 'right'
+      ? { alignItems: 'flex-start', paddingLeft: Spacing.M }
+      : { alignItems: 'flex-end', paddingRight: Spacing.M };
+
+  if (container === 'left') {
+    return {
+      position: 'absolute',
+      top,
+      left: columnLeft - margin - insets.left,
+      width: sideBar.width,
+      ...innerEdgeStyle,
+    };
+  }
+
+  const containerRight = width - margin - insets.right;
+  return {
+    position: 'absolute',
+    top,
+    right: containerRight - (columnLeft + sideBar.width),
+    width: sideBar.width,
+    ...innerEdgeStyle,
+  };
+};
+
 const useGridSystem = () => {
-  const windowSize = useWindowDimensions();
-  const numberOfColumns = windowSize.width > 600 ? 24 : 12;
+  const { contentWidth } = useScreenLayout();
+  const numberOfColumns = contentWidth > 600 ? 24 : 12;
   return { numberOfColumns };
 };
 
-export { useGridSystem, validateChildren };
+export {
+  DuoMetrics,
+  HeaderMetrics,
+  getHeaderMargin,
+  useGridSystem,
+  useScreenLayout,
+  useSideBarItemStyle,
+  validateChildren,
+};

package/Popup/PopupNotify.tsx

@@ -1,11 +1,5 @@
 import React, { useContext, useRef, useState } from 'react';
-import {
-  Dimensions,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Button } from '../Button';
 import { Colors, Radius, Spacing, Styles } from '../Consts';
@@ -13,7 +7,8 @@ import { Icon } from '../Icon';
 import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
-import { runOnJS } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { usePopupMaxHeight, usePopupWidth } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -29,7 +24,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
-  const { width: widthDevice } = Dimensions.get('window');
+  const popupWidth = usePopupWidth();
+  const maxHeight = usePopupMaxHeight();
   const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -50,7 +46,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       onRequestClose?.(callback);
     } else {
       navigator?.pop();
-      runOnJS(() => callback?.())();
+      scheduleOnRN(() => callback?.());
     }
   };
 
@@ -172,18 +168,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     }
   };
 
-  return (
-    <View
-      accessibilityLabel={'popup_notify'}
-      style={[
-        styles.container,
-        {
-          backgroundColor: theme.colors.background.surface,
-          width: widthDevice - Spacing.XL * 2,
-        },
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-    >
+  const body = (
+    <>
       {!!image && <Image source={{ uri: image }} style={styles.image} />}
       <View style={styles.content}>
         <Text
@@ -225,6 +211,30 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           </View>
         )}
       </View>
+    </>
+  );
+
+  return (
+    <View
+      accessibilityLabel={'popup_notify'}
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.background.surface,
+          width: popupWidth,
+          maxHeight,
+        },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
+      {maxHeight === undefined ? (
+        body
+      ) : (
+        // scrolls when iPhone Duo landscape is too short; actions stay visible
+        <ScrollView style={styles.body} bounces={false}>
+          {body}
+        </ScrollView>
+      )}
       <View style={styles.contentAction}>{buildAction()}</View>
       {buildCloseIcon()}
     </View>
@@ -242,6 +252,7 @@ const styles = StyleSheet.create({
     aspectRatio: 1.7777,
     overflow: 'hidden',
   },
+  body: { flexShrink: 1 },
   content: { padding: Spacing.XL },
   description: {
     marginTop: Spacing.S,

package/Popup/PopupPromotion.tsx

@@ -1,10 +1,16 @@
 import React, { useContext, useRef } from 'react';
-import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { PopupPromotionProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';
+import { usePopupMaxHeight, usePopupWidth } from './utils';
+
+const ASPECT_RATIO = 0.72;
+const ICON_CLOSE_SIZE = 20;
+// close button row under the image: marginTop + vertical padding + icon
+const CLOSE_ROW_HEIGHT = Spacing.S * 3 + ICON_CLOSE_SIZE;
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
@@ -14,7 +20,13 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator } = useContext(ApplicationContext);
-  const { width: widthDevice } = Dimensions.get('window');
+  const popupWidth = usePopupWidth();
+  const maxHeight = usePopupMaxHeight();
+  // fit the portrait image by height when iPhone Duo leaves too little room
+  const imageWidth =
+    maxHeight === undefined
+      ? popupWidth
+      : Math.min(popupWidth, (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO);
   const closeAction = useRef('touch_outside');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -69,7 +81,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   return (
     <View
       accessibilityLabel={'popup_promotion'}
-      style={showBaseLineDebug && styles.debugBaseLine}
+      style={[{ width: imageWidth }, showBaseLineDebug && styles.debugBaseLine]}
     >
       <TouchableOpacity onPress={() => onAction(onActionClick)}>
         <Image
@@ -80,7 +92,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
           style={[
             styles.container,
             {
-              width: widthDevice - Spacing.XL * 2,
+              width: imageWidth,
             },
           ]}
         />
@@ -92,7 +104,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    aspectRatio: 0.72,
+    aspectRatio: ASPECT_RATIO,
     width: '100%',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
@@ -103,11 +115,11 @@ const styles = StyleSheet.create({
     marginTop: Spacing.S,
   },
   iconButton: {
-    padding: 8,
+    padding: Spacing.S,
   },
   iconClose: {
-    width: 20,
-    height: 20,
+    width: ICON_CLOSE_SIZE,
+    height: ICON_CLOSE_SIZE,
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: Radius.M,

package/Popup/utils.ts

@@ -0,0 +1,32 @@
+import { Dimensions, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Spacing } from '../Consts';
+import { getDuoTopInset, isIPhoneDuo } from '../Application/device';
+
+// width of a system alert on the iPhone Duo inner display, in both orientations
+const DUO_POPUP_MAX_WIDTH = 440;
+
+const usePopupWidth = () => {
+  const windowSize = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return Dimensions.get('window').width - Spacing.XL * 2;
+  }
+  return Math.min(windowSize.width - Spacing.XL * 2, DUO_POPUP_MAX_WIDTH);
+};
+
+// room left for a popup on iPhone Duo, where landscape is too short for it
+const usePopupMaxHeight = () => {
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return undefined;
+  }
+  return (
+    height -
+    getDuoTopInset(insets, width, height) -
+    insets.bottom -
+    Spacing.XL * 2
+  );
+};
+
+export { usePopupWidth, usePopupMaxHeight };

package/Text/index.tsx

@@ -7,11 +7,6 @@ import {
   MiniAppContext,
   SkeletonContext,
 } from '../Context';
-import {
-  LEGACY_DEFAULT_FONT_FAMILY,
-  NEW_DEFAULT_FONT_FAMILY,
-  useResolvedFontFamily,
-} from '../Consts/designSystemFont';
 import { scaleSize, useScaleSize } from './utils';
 import { Skeleton } from '../Skeleton';
 
@@ -119,11 +114,7 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
   const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
   const { fontWeight, fontSize, fontStyle, lineHeight } = typoStyle;
   const style = FontStyle[fontStyle ?? 'normal'];
-  const defaultFontFamily = useResolvedFontFamily(theme.font);
-  const font = newFontFamily ?? defaultFontFamily;
-  const resolvedDefaultFamily = useResolvedFontFamily(
-    LEGACY_DEFAULT_FONT_FAMILY,
-  );
+  const font = newFontFamily ?? theme.font;
   let fontFamily: string;
 
   switch (font) {
@@ -152,11 +143,7 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
       break;
     }
     default: {
-      fontFamily = `${resolvedDefaultFamily}-${
-        resolvedDefaultFamily === NEW_DEFAULT_FONT_FAMILY
-          ? MomoTrustSans[fontWeight]
-          : SFProText[fontWeight]
-      }`;
+      fontFamily = `${font}-${SFProText[fontWeight]}${style}`;
     }
   }
 
@@ -166,6 +153,9 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
     fontSize: useScaleSize(fontSize),
     lineHeight: useScaleSize(lineHeight),
     fontStyle,
+    // fontFamily da mang san weight. Tren Android, ReactFontManager doi
+    // `fonts/<family>_bold.ttf` khi fontWeight >= 700; file do khong ton tai nen
+    // font se roi ve font he thong. Bo fontWeight de Android dung dung file.
     fontWeight: undefined,
   };
 };

package/Text/utils.ts

@@ -2,7 +2,6 @@ import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
 import { useContext } from 'react';
 import { MiniAppContext } from '../Context';
 
-const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
@@ -40,7 +39,7 @@ const useScaleSize = (size: number, scaleRate?: number) => {
 
 const scaleSize = (size: number) => {
   const fontScale = PixelRatio.getFontScale();
-  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
+  const deviceScale = Dimensions.get('window').width / DEFAULT_SCREEN_SIZE;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.167.1-beta.7",
+    "version": "0.167.1-duo.12",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -23,7 +23,8 @@
         "lottie-react-native": "7.2.4"
     },
     "peerDependencies": {
-        "react-native": "*"
+        "react-native": "*",
+        "react-native-worklets": ">=0.5.0"
     },
     "devDependencies": {
         "@types/color": "3.0.6"