[MOO-2070] fix: resolve React Native Reanimated worklet function errors

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = deepmerge(base, {
         "@typescript-eslint/ban-ts-ignore": "off",
         "no-unused-expressions": "off",
         "@typescript-eslint/no-unused-expressions": "error",
-        "no-undef": "off"
+        "no-undef": "off",
+        "react/react-in-jsx-scope": "off"
     }
 });

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

@@ -6,6 +6,10 @@ 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.
+
 ## [5.0.2] - 2025-10-2
 
 -   Updated react-native-reanimated to v3.16.7

packages/pluggableWidgets/bottom-sheet-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bottom-sheet-native",
   "widgetName": "BottomSheet",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useEffect, useRef, useState } from "react";
+import { 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 { ReactNode, ReactElement, useCallback, useState, useRef, Children } from "react";
+import { 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;
 

packages/pluggableWidgets/bottom-sheet-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="BottomSheet" version="5.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BottomSheet" version="5.0.3" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BottomSheet.xml" />
         </widgetFiles>

patches/@mendix+pluggable-widgets-tools+10.21.1.patch

@@ -104,6 +104,48 @@ index 682cf9fc4259a1f431e7cc3b17a319fdb072929e..5be03c770f8247637223f78738c3cdec
      /^react-native-svg($|\/)/,
      /^react-native-vector-icons($|\/)/,
      /^@?react-navigation($|\/)/,
+@@ -179,6 +179,18 @@ export default async args => {
+     return result;
+
+     function getCommonPlugins(config) {
++        const hasReanimated = (() => {
++            try {
++                const packageJson = require(join(sourcePath, "package.json"));
++                return !!(
++                    (packageJson.dependencies && packageJson.dependencies["react-native-reanimated"]) ||
++                    (packageJson.peerDependencies && packageJson.peerDependencies["react-native-reanimated"])
++                );
++            } catch {
++                return false;
++            }
++        })();
++
+         return [
+             nodeResolve({ preferBuiltins: false, mainFields: ["module", "browser", "main"] }),
+             isTypescript
+@@ -232,7 +244,21 @@ export default async args => {
+                 })
+                 : null,
+             image(),
+-            production ? terser({ mangle: false }) : null,
++            production ? terser(hasReanimated
++                ? {
++                    mangle: false,
++                    compress: {
++                        defaults: false,
++                        inline: false,
++                        reduce_funcs: false,
++                        side_effects: false,
++                    },
++                    keep_fnames: true,
++                    keep_classnames: true,
++                    module: false,
++                    format: { comments: false }
++                  }
++                : { mangle: false }) : null,
+             // We need to create .mpk and copy results to test project after bundling is finished.
+             // In case of a regular build is it is on `writeBundle` of the last config we define
+             // (since rollup processes configs sequentially). But in watch mode rollup re-bundles only
 diff --git a/configs/tsconfig.base.json b/configs/tsconfig.base.json
 index 5cee5d4d880e152576fc7cad69dd8c22dfbedee8..62627fd52bf0d5847d9ebec37fadac3142ed71a7 100644
 --- a/configs/tsconfig.base.json
@@ -176,4 +218,4 @@ index eed8109dada3788bb1195573b9713eb1f00dd8f9..4b422fac0e21d2b1f44a763d0b21b028
  module.exports = require("babel-jest").createTransformer({
 -    presets: ["module:metro-react-native-babel-preset"]
 +    presets: ["module:@react-native/babel-preset"]
- });
+ });