fix(bottom-sheet-native): resolve React Native Reanimated worklet function errors

Author: UrazAkgultan

packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md

@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   Fixed React Native Reanimated worklet function errors by properly memoizing snap points.
 -   Updated react-native-reanimated to v3.16.7
 
 ## [5.0.1] - 2025-7-7

packages/pluggableWidgets/bottom-sheet-native/src/components/CustomModalSheet.tsx

@@ -1,4 +1,4 @@
-import { createElement, ReactElement, ReactNode, useEffect, useRef, useState } from "react";
+import { createElement, ReactElement, ReactNode, useEffect, useRef, useState, useMemo } from "react";
 import { InteractionManager, LayoutChangeEvent, Modal, Pressable, SafeAreaView, StyleSheet, View } from "react-native";
 import BottomSheet, { BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetView } from "@gorhom/bottom-sheet";
 import { EditableValue, ValueStatus } from "mendix";
@@ -17,6 +17,13 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
     const [currentStatus, setCurrentStatus] = useState(false);
     const isAvailable = props.triggerAttribute && props.triggerAttribute.status === ValueStatus.Available;
 
+    const snapPoints = useMemo(() => {
+        if (height === 0) {
+            return ["90%"];
+        }
+        return [height - Number(defaultPaddings.paddingBottom)];
+    }, [height]);
+
     const onLayoutFullscreenHandler = (event: LayoutChangeEvent): void => {
         const layoutHeight = event.nativeEvent.layout.height;
         if (layoutHeight > 0 && layoutHeight !== height) {
@@ -34,7 +41,7 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
             bottomSheetRef.current?.close();
             setCurrentStatus(false);
         }
-    }, [props.triggerAttribute, currentStatus]);
+    }, [props.triggerAttribute, currentStatus, isAvailable]);
 
     if (height === 0) {
         return (
@@ -44,14 +51,12 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
         );
     }
 
-    const snapPoints = [height - Number(defaultPaddings.paddingBottom)];
-
     const isOpen =
         props.triggerAttribute &&
         props.triggerAttribute.status === ValueStatus.Available &&
         props.triggerAttribute.value;
 
-    const renderBackdrop = (backdropProps: BottomSheetBackdropProps) => (
+    const renderBackdrop = (backdropProps: BottomSheetBackdropProps): ReactElement => (
         <Pressable style={{ flex: 1 }} onPress={close}>
             <BottomSheetBackdrop
                 {...backdropProps}
@@ -63,7 +68,7 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
         </Pressable>
     );
 
-    const handleSheetChanges = (index: number) => {
+    const handleSheetChanges = (index: number): void => {
         if (!isAvailable) {
             return;
         }
@@ -79,7 +84,7 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
         }
     };
 
-    const close = () => {
+    const close = (): void => {
         bottomSheetRef.current?.close();
     };
 

packages/pluggableWidgets/bottom-sheet-native/src/components/ExpandingDrawer.tsx

@@ -1,4 +1,4 @@
-import { createElement, ReactNode, ReactElement, useCallback, useState, useRef, Children } from "react";
+import { createElement, ReactNode, ReactElement, useCallback, useState, useRef, Children, useMemo } from "react";
 import { Dimensions, LayoutChangeEvent, SafeAreaView, StyleSheet, View } from "react-native";
 import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 import { BottomSheetStyle } from "../ui/Styles";
@@ -26,23 +26,29 @@ export const ExpandingDrawer = (props: ExpandingDrawerProps): ReactElement => {
     const isSmallContentValid = Children.count(props.smallContent) > 0;
     const isLargeContentValid = Children.count(props.largeContent) > 0;
 
-    const onLayoutHandlerHeader = (event: LayoutChangeEvent): void => {
-        const height = event.nativeEvent.layout.height;
-        if (height > 0 && height <= maxHeight) {
-            setHeightHeader(height);
-        }
-    };
+    const onLayoutHandlerHeader = useCallback(
+        (event: LayoutChangeEvent): void => {
+            const height = event.nativeEvent.layout.height;
+            if (height > 0 && height <= maxHeight) {
+                setHeightHeader(height);
+            }
+        },
+        [maxHeight]
+    );
 
-    const onLayoutHandlerContent = (event: LayoutChangeEvent): void => {
-        const height = event.nativeEvent.layout.height;
-        if (height > 0) {
-            if (height <= maxHeight) {
-                setHeightContent(height);
-            } else if (!props.fullscreenContent) {
-                setHeightContent(maxHeight);
+    const onLayoutHandlerContent = useCallback(
+        (event: LayoutChangeEvent): void => {
+            const height = event.nativeEvent.layout.height;
+            if (height > 0) {
+                if (height <= maxHeight) {
+                    setHeightContent(height);
+                } else if (!props.fullscreenContent) {
+                    setHeightContent(maxHeight);
+                }
             }
-        }
-    };
+        },
+        [maxHeight, props.fullscreenContent]
+    );
 
     const onLayoutFullscreenHandler = (event: LayoutChangeEvent): void => {
         const height = event.nativeEvent.layout.height;
@@ -54,6 +60,19 @@ export const ExpandingDrawer = (props: ExpandingDrawerProps): ReactElement => {
     const containerStyle =
         props.fullscreenContent && isOpen ? props.styles.containerWhenExpandedFullscreen : props.styles.container;
 
+    const snapPoints = useMemo(() => {
+        if (props.fullscreenContent && heightContent) {
+            return [fullscreenHeight, heightContent, heightHeader];
+        }
+        if (props.fullscreenContent) {
+            return [fullscreenHeight, heightHeader];
+        }
+        if (isLargeContentValid) {
+            return [heightContent, heightHeader];
+        }
+        return [heightHeader];
+    }, [props.fullscreenContent, heightContent, fullscreenHeight, heightHeader, isLargeContentValid]);
+
     const renderContent = useCallback((): ReactNode => {
         const content = (
             <View onLayout={onLayoutHandlerContent} pointerEvents="box-none">
@@ -77,7 +96,15 @@ export const ExpandingDrawer = (props: ExpandingDrawerProps): ReactElement => {
             );
         }
         return content;
-    }, [props.smallContent, props.largeContent, props.fullscreenContent, isOpen, fullscreenHeight]);
+    }, [
+        props.smallContent,
+        props.largeContent,
+        props.fullscreenContent,
+        fullscreenHeight,
+        isSmallContentValid,
+        onLayoutHandlerContent,
+        onLayoutHandlerHeader
+    ]);
 
     if (props.fullscreenContent && fullscreenHeight === 0) {
         return (
@@ -91,18 +118,9 @@ export const ExpandingDrawer = (props: ExpandingDrawerProps): ReactElement => {
         return <View style={{ position: "absolute", bottom: -maxHeight }}>{renderContent()}</View>;
     }
 
-    const snapPoints =
-        props.fullscreenContent && heightContent
-            ? [fullscreenHeight, heightContent, heightHeader]
-            : props.fullscreenContent
-            ? [fullscreenHeight, heightHeader]
-            : isLargeContentValid
-            ? [heightContent, heightHeader]
-            : [heightHeader];
-
     const collapsedIndex = 0;
 
-    const onChange = (index: number) => {
+    const onChange = (index: number): void => {
         const hasOpened = lastIndexRef === -1 && index === 0;
         const hasClosed = index === -1;