@wavemaker/app-rn-runtime 11.13.0-rc.222 → 11.13.0-rc.6277

package/components/basic/bottomsheet/bottomsheet.component.js

@@ -4,8 +4,9 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { createRef } from 'react';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
-import { View, Animated, PanResponder, Dimensions, TouchableWithoutFeedback, Platform, StatusBar, BackHandler, KeyboardAvoidingView, Keyboard, Modal, Pressable } from 'react-native';
+import { View, PanResponder, Dimensions, TouchableWithoutFeedback, Platform, StatusBar, BackHandler, KeyboardAvoidingView, Keyboard, Modal, Pressable } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, withTiming, runOnJS, Easing, makeMutable, cancelAnimation } from 'react-native-reanimated';
 import WmBottomsheetProps from './bottomsheet.props';
 import { DEFAULT_CLASS } from './bottomsheet.styles';
 import { createSkeleton } from '../skeleton/skeleton.component';
@@ -18,10 +19,6 @@ const {
 export class WmBottomsheetState extends BaseComponentState {
   constructor(...args) {
     super(...args);
-    _defineProperty(this, "translateY", new Animated.Value(SCREEN_HEIGHT));
-    _defineProperty(this, "backdropOpacity", new Animated.Value(0));
-    _defineProperty(this, "sheetHeight", new Animated.Value(0));
-    _defineProperty(this, "lastGestureDy", 0);
     _defineProperty(this, "scrollViewRef", /*#__PURE__*/createRef());
     _defineProperty(this, "isScrolling", false);
     _defineProperty(this, "scrollOffset", 0);
@@ -29,15 +26,71 @@ export class WmBottomsheetState extends BaseComponentState {
     _defineProperty(this, "isBottomsheetVisible", false);
     _defineProperty(this, "keyboardHeight", 0);
     _defineProperty(this, "localModalsOpened", []);
+    _defineProperty(this, "lastGestureDy", 0);
   }
 }
+
+// Animated wrapper component that uses hooks
+const AnimatedBottomsheetContent = ({
+  translateY,
+  backdropOpacity,
+  sheetHeight,
+  lastGestureDy,
+  styles,
+  props,
+  children,
+  panHandlers,
+  dragHandlePanHandlers,
+  onBackdropPress,
+  onDragHandlePress,
+  getTestProps,
+  enabledragsettle
+}) => {
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value
+  }));
+  const containerAnimatedStyle = useAnimatedStyle(() => ({
+    height: sheetHeight.value,
+    transform: [{
+      translateY: translateY.value
+    }]
+  }));
+  const contentStyle = useAnimatedStyle(() => {
+    if (enabledragsettle && lastGestureDy.value > 0) {
+      return {
+        paddingBottom: lastGestureDy.value
+      };
+    }
+    return {};
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    onPress: onBackdropPress
+  }, /*#__PURE__*/React.createElement(Animated.View, _extends({
+    style: [styles.backdrop, backdropAnimatedStyle]
+  }, getTestProps('backdrop'), getAccessibilityProps(AccessibilityWidgetType.BOTTOMSHEET, props)))), /*#__PURE__*/React.createElement(Animated.View, _extends({
+    style: [styles.container, containerAnimatedStyle]
+  }, panHandlers), /*#__PURE__*/React.createElement(View, _extends({
+    style: styles.dragHandleContainer
+  }, dragHandlePanHandlers), /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onDragHandlePress
+  }, /*#__PURE__*/React.createElement(View, _extends({
+    style: styles.dragIconHandle
+  }, getTestProps('draghandle'))))), children(contentStyle)));
+};
 export default class WmBottomsheet extends BaseComponent {
+  // Helper method to calculate animation duration based on distance and velocity
+  getAnimationDuration(distance, velocity) {
+    // Base duration on distance, but cap it between 200-500ms
+    // Higher velocity = shorter duration for snappier feel
+    const velocityFactor = Math.max(0.3, Math.min(1, 1 - Math.abs(velocity) / 2));
+    const calculatedDuration = Math.abs(distance) * velocityFactor;
+    return Math.min(500, Math.max(200, calculatedDuration));
+  }
   calculateSheetHeight(bottomsheetheightratio) {
     // Use default height if ratio not provided, but ensure it's not below minimum
     const effectiveRatio = bottomsheetheightratio || this.defaultHeight;
     this.maxHeightRatio = Math.max(this.minimumHeight, Math.min(effectiveRatio, this.maxHeight));
     const screenHeight = Dimensions.get('screen').height;
-    const windowHeight = Dimensions.get('window').height;
     let calculatedHeight = screenHeight * this.maxHeightRatio;
     if (Platform.OS === 'ios') {
       // Subtract top inset bar height for ios only if bottomsheetheightratio is 0.9
@@ -72,8 +125,8 @@ export default class WmBottomsheet extends BaseComponent {
     _defineProperty(this, "minimumHeight", 0.01);
     _defineProperty(this, "minimumExpandedHeight", 0.5);
     _defineProperty(this, "maxHeight", 1.0);
-    // Allow full screen height
     _defineProperty(this, "animationDuration", 400);
+    _defineProperty(this, "keyboardAnimationDuration", Platform.OS === 'ios' ? 250 : 275);
     _defineProperty(this, "statusBarHeight", StatusBar.currentHeight || 0);
     _defineProperty(this, "defaultTopInset", 44);
     _defineProperty(this, "maxHeightRatio", 0);
@@ -83,51 +136,75 @@ export default class WmBottomsheet extends BaseComponent {
     _defineProperty(this, "iosKeyboardHeight", 0);
     _defineProperty(this, "isIosKeyboardHeightSet", false);
     _defineProperty(this, "sheetModalService", void 0);
+    _defineProperty(this, "isDragHandleExpanding", false);
+    // Reanimated shared values - created once and reused
+    _defineProperty(this, "translateY", void 0);
+    _defineProperty(this, "backdropOpacity", void 0);
+    _defineProperty(this, "sheetHeight", void 0);
+    _defineProperty(this, "lastGestureDyShared", void 0);
     _defineProperty(this, "isSheetExpanded", () => {
       return this.state.isExpanded;
     });
     _defineProperty(this, "expandBottomSheet", () => {
       const targetHeight = Math.min(this.expandedHeight, SCREEN_HEIGHT);
+      const callback = () => {
+        this.updateState({
+          isExpanded: true,
+          lastGestureDy: 0
+        });
+        this.invokeEventCallback('onExpand', [null, this]);
+      };
 
-      // For drag and settle behavior, we need to reset translateY to 0 when expanding
+      // Reset drag settle value immediately on UI thread
+      this.lastGestureDyShared.value = 0;
       if (this.props.enabledragsettle) {
-        Animated.parallel([Animated.timing(this.state.sheetHeight, {
-          toValue: targetHeight,
+        // Synchronize both animations to complete together
+        this.sheetHeight.value = withTiming(targetHeight, {
           duration: this.animationDuration,
-          useNativeDriver: false
-        }), Animated.timing(this.state.translateY, {
-          toValue: 0,
+          easing: Easing.out(Easing.ease)
+        });
+        this.translateY.value = withTiming(0, {
           duration: this.animationDuration,
-          useNativeDriver: false
-        })]).start();
+          easing: Easing.out(Easing.ease)
+        }, finished => {
+          if (finished) {
+            runOnJS(callback)();
+          }
+        });
       } else {
-        // Original behavior for non drag-and-settle mode
-        Animated.timing(this.state.sheetHeight, {
-          toValue: targetHeight,
+        // Only animate height for non-drag-settle mode
+        this.sheetHeight.value = withTiming(targetHeight, {
           duration: this.animationDuration,
-          useNativeDriver: false
-        }).start();
+          easing: Easing.out(Easing.ease)
+        }, finished => {
+          if (finished) {
+            runOnJS(callback)();
+          }
+        });
       }
-      this.updateState({
-        isExpanded: true,
-        lastGestureDy: 0 // Reset to start from top when expanded
-      });
     });
     _defineProperty(this, "collapseBottomSheet", () => {
-      Animated.parallel([Animated.timing(this.state.translateY, {
-        toValue: 0,
-        // Keep sheet open
+      const callback = () => {
+        this.updateState({
+          isExpanded: false,
+          lastGestureDy: 0
+        });
+        this.invokeEventCallback('onCollapse', [null, this]);
+      };
+
+      // Reset drag settle value immediately on UI thread
+      this.lastGestureDyShared.value = 0;
+      this.translateY.value = withTiming(0, {
         duration: this.animationDuration,
-        useNativeDriver: false
-      }), Animated.timing(this.state.sheetHeight, {
-        //use bottom sheet minimum height if disableswipedownclose is set to true or use calcluated height
-        toValue: this.calculatedHeight,
+        easing: Easing.out(Easing.ease)
+      });
+      this.sheetHeight.value = withTiming(this.calculatedHeight, {
         duration: this.animationDuration,
-        useNativeDriver: false
-      })]).start();
-      this.updateState({
-        isExpanded: false,
-        lastGestureDy: 0 // Reset to start from original position when collapsed
+        easing: Easing.out(Easing.ease)
+      }, finished => {
+        if (finished) {
+          runOnJS(callback)();
+        }
       });
     });
     _defineProperty(this, "handleBackPress", () => {
@@ -160,23 +237,25 @@ export default class WmBottomsheet extends BaseComponent {
       // Leave some buffer space for the drag handle and safe area
       const bufferSpace = (Platform.OS === 'ios' ? this.topInset : this.statusBarHeight) + 20;
       const adjustedHeight = availableHeight - bufferSpace;
-      // Animate the sheet height adjustment
-      Animated.timing(this.state.sheetHeight, {
-        toValue: adjustedHeight,
-        duration: 100,
-        useNativeDriver: false
-      }).start();
+      if (this.sheetHeight && Platform.OS == 'android' && this.props.modal) {
+        // Use platform-specific keyboard animation duration for smooth synchronization
+        this.sheetHeight.value = withTiming(adjustedHeight, {
+          duration: this.keyboardAnimationDuration,
+          easing: Easing.out(Easing.ease)
+        });
+      }
       this.updateState({
         keyboardHeight: keyboardHeight
       });
     });
     _defineProperty(this, "onKeyboardHide", () => {
-      // Restore the original sheet height when keyboard hides
-      Animated.timing(this.state.sheetHeight, {
-        toValue: this.state.isExpanded ? this.expandedHeight : this.calculatedHeight,
-        duration: 100,
-        useNativeDriver: false
-      }).start();
+      if (this.sheetHeight && Platform.OS == 'android' && this.props.modal) {
+        // Use platform-specific keyboard animation duration for smooth synchronization
+        this.sheetHeight.value = withTiming(this.state.isExpanded ? this.expandedHeight : this.calculatedHeight, {
+          duration: this.keyboardAnimationDuration,
+          easing: Easing.out(Easing.ease)
+        });
+      }
       this.updateState({
         keyboardHeight: 0
       });
@@ -187,21 +266,21 @@ export default class WmBottomsheet extends BaseComponent {
         this.updateState({
           lastGestureDy: 0
         });
+        if (this.lastGestureDyShared) {
+          this.lastGestureDyShared.value = 0;
+        }
       }
-
-      // New drag and settle behavior
       if (this.props.enabledragsettle && gestureState.dy > 0) {
-        // Get current translateY value and settle the sheet at this position
-        const currentTranslateY = this.state.translateY._value || 0;
-        // If dragged too far down, close the sheet
+        var _this$translateY;
+        const currentTranslateY = ((_this$translateY = this.translateY) === null || _this$translateY === void 0 ? void 0 : _this$translateY.value) || 0;
         if (gestureState.vy > 0.5 && !this.props.disableswipedownclose) {
           this.closeSheet();
           return;
         }
-        // Settle at the current position without changing the sheet height
-        // The sheet height should remain constant to maintain proper positioning
-        this.state.translateY.setValue(currentTranslateY);
-        // This ensures subsequent drags start from the current position
+        if (this.translateY && this.lastGestureDyShared) {
+          this.translateY.value = currentTranslateY;
+          this.lastGestureDyShared.value = currentTranslateY;
+        }
         this.updateState({
           isExpanded: false,
           lastGestureDy: currentTranslateY
@@ -210,24 +289,33 @@ export default class WmBottomsheet extends BaseComponent {
       }
       if (gestureState.dy > 0) {
         if (this.state.isExpanded || this.props.disableswipedownclose) {
-          // Expand the bottom sheet threshold is  25% of the fully expanded height
-          // If the user swipe distance is below the threshold, revert to the original sheet height
           if (gestureState.dy < this.expandedHeight / 4 || this.props.disableswipedownclose) {
+            var _this$sheetHeight;
             let sheetMinimumHeight = this.props.bottomsheetminimumheight || 0.1;
-            Animated.parallel([Animated.timing(this.state.translateY, {
-              toValue: 0,
-              // Keep sheet open
-              duration: this.animationDuration,
-              useNativeDriver: false
-            }), Animated.timing(this.state.sheetHeight, {
-              //use bottom sheet minimum height if disableswipedownclose is set to true or use calcluated height
-              toValue: this.props.disableswipedownclose ? sheetMinimumHeight * SCREEN_HEIGHT : this.calculatedHeight,
-              duration: this.animationDuration,
-              useNativeDriver: false
-            })]).start();
-            this.updateState({
-              isExpanded: false
-            });
+            const targetHeight = this.props.disableswipedownclose ? sheetMinimumHeight * SCREEN_HEIGHT : this.calculatedHeight;
+            const currentHeight = ((_this$sheetHeight = this.sheetHeight) === null || _this$sheetHeight === void 0 ? void 0 : _this$sheetHeight.value) || this.expandedHeight;
+            const distance = Math.abs(currentHeight - targetHeight);
+            const duration = this.getAnimationDuration(distance, gestureState.vy);
+            const callback = () => {
+              this.updateState({
+                isExpanded: false
+              });
+              this.invokeEventCallback('onCollapse', [null, this]);
+            };
+            if (this.translateY && this.sheetHeight) {
+              this.translateY.value = withTiming(0, {
+                duration: duration,
+                easing: Easing.out(Easing.ease)
+              });
+              this.sheetHeight.value = withTiming(targetHeight, {
+                duration: duration,
+                easing: Easing.out(Easing.ease)
+              }, finished => {
+                if (finished) {
+                  runOnJS(callback)();
+                }
+              });
+            }
           } else if ((gestureState.dy > this.expandedHeight / 4 || gestureState.vy > 0.5) && !this.props.disableswipedownclose) {
             this.closeSheet();
           }
@@ -254,10 +342,16 @@ export default class WmBottomsheet extends BaseComponent {
         // Only handle the gesture if we're at the top and swiping down
         return gestureState.dy > 0 && this.state.scrollOffset <= 0;
       },
+      onPanResponderGrant: () => {
+        // Cancel any ongoing animations when user starts dragging
+        if (this.translateY) {
+          cancelAnimation(this.translateY);
+        }
+      },
       onPanResponderMove: (_, gestureState) => {
-        if (gestureState.dy > 0) {
-          const newTranslateY = Math.max(0, this.state.lastGestureDy + gestureState.dy);
-          this.state.translateY.setValue(newTranslateY);
+        if (gestureState.dy > 0 && this.translateY && this.lastGestureDyShared) {
+          const newTranslateY = Math.max(0, this.lastGestureDyShared.value + gestureState.dy);
+          this.translateY.value = newTranslateY;
         }
       },
       onPanResponderRelease: (_, gestureState) => {
@@ -271,18 +365,28 @@ export default class WmBottomsheet extends BaseComponent {
     _defineProperty(this, "dragHandlePanResponder", PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        // Cancel any ongoing animations when user starts dragging
+        if (this.translateY) {
+          cancelAnimation(this.translateY);
+        }
+        // Reset the expand flag
+        this.isDragHandleExpanding = false;
+      },
       onPanResponderMove: (_, gestureState) => {
-        if (gestureState.dy > 0) {
-          // Handle downward drag
-          const newTranslateY = Math.max(0, this.state.lastGestureDy + gestureState.dy);
-          this.state.translateY.setValue(newTranslateY);
-        } else if (gestureState.dy < 0 && this.props.expand && this.props.bottomsheetheightratio !== 1) {
-          // Handle upward drag - expand to full height
-          // Allow expansion to full screen height
+        if (gestureState.dy > 0 && this.translateY && this.lastGestureDyShared) {
+          const newTranslateY = Math.max(0, this.lastGestureDyShared.value + gestureState.dy);
+          this.translateY.value = newTranslateY;
+          // Reset expand flag if dragging down
+          this.isDragHandleExpanding = false;
+        } else if (gestureState.dy < -50 && this.props.expand && this.props.bottomsheetheightratio !== 1 && !this.isDragHandleExpanding && !this.state.isExpanded) {
+          // Only trigger expand once with threshold of -50px upward drag
+          this.isDragHandleExpanding = true;
           this.expandBottomSheet();
         }
       },
       onPanResponderRelease: (_, gestureState) => {
+        this.isDragHandleExpanding = false;
         this.handleSwipeGesture(gestureState);
       }
     }));
@@ -295,20 +399,32 @@ export default class WmBottomsheet extends BaseComponent {
       });
     });
     _defineProperty(this, "openSheet", () => {
-      this.updateState({
-        lastGestureDy: 0
-      });
-      Animated.parallel([Animated.timing(this.state.translateY, {
-        toValue: 0,
-        duration: this.animationDuration,
-        useNativeDriver: false
-      }), Animated.timing(this.state.backdropOpacity, {
-        toValue: 1,
-        duration: this.animationDuration,
-        useNativeDriver: false
-      })]).start(() => {
+      const callback = () => {
+        this.updateState({
+          lastGestureDy: 0
+        });
         this.invokeEventCallback('onOpened', [null, this]);
-      });
+      };
+
+      // Reset drag settle value immediately on UI thread
+      if (this.lastGestureDyShared) {
+        this.lastGestureDyShared.value = 0;
+      }
+      if (this.translateY && this.backdropOpacity) {
+        this.translateY.value = withTiming(0, {
+          duration: this.animationDuration,
+          easing: Easing.out(Easing.ease)
+        }, finished => {
+          if (finished) {
+            runOnJS(callback)();
+          }
+        });
+        // Backdrop animation synchronized with sheet animation
+        this.backdropOpacity.value = withTiming(1, {
+          duration: this.animationDuration,
+          easing: Easing.out(Easing.ease)
+        });
+      }
     });
     _defineProperty(this, "handleClose", () => {
       this.updateState({
@@ -317,28 +433,39 @@ export default class WmBottomsheet extends BaseComponent {
       this.invokeEventCallback('onClose', [null, this]);
     });
     _defineProperty(this, "closeSheet", () => {
-      Animated.parallel([Animated.timing(this.state.translateY, {
-        toValue: SCREEN_HEIGHT,
-        duration: this.animationDuration,
-        useNativeDriver: false
-      }), Animated.timing(this.state.backdropOpacity, {
-        toValue: 0,
-        duration: this.animationDuration,
-        useNativeDriver: false
-      })]).start(() => {
-        requestAnimationFrame(() => {
-          this.state.sheetHeight.setValue(this.calculatedHeight);
-          this.updateState({
-            isExpanded: false,
-            localModalsOpened: []
-          });
-          this.handleClose();
+      const callback = () => {
+        // Reset sheet height after close
+        if (this.sheetHeight) {
+          this.sheetHeight.value = this.calculatedHeight;
+        }
+        this.updateState({
+          isExpanded: false,
+          localModalsOpened: []
         });
-      });
+        this.handleClose();
+      };
+      if (this.translateY && this.backdropOpacity) {
+        this.translateY.value = withTiming(SCREEN_HEIGHT, {
+          duration: this.animationDuration,
+          easing: Easing.out(Easing.ease)
+        }, finished => {
+          if (finished) {
+            runOnJS(callback)();
+          }
+        });
+        // Backdrop animation synchronized with sheet animation
+        this.backdropOpacity.value = withTiming(0, {
+          duration: this.animationDuration,
+          easing: Easing.out(Easing.ease)
+        });
+      }
     });
     _defineProperty(this, "closeSheetImmediate", () => {
-      this.state.translateY.setValue(SCREEN_HEIGHT);
-      this.state.backdropOpacity.setValue(0);
+      if (this.translateY && this.backdropOpacity && this.lastGestureDyShared) {
+        this.translateY.value = SCREEN_HEIGHT;
+        this.backdropOpacity.value = 0;
+        this.lastGestureDyShared.value = 0;
+      }
       this.updateState({
         lastGestureDy: 0,
         isExpanded: false,
@@ -346,44 +473,58 @@ export default class WmBottomsheet extends BaseComponent {
         localModalsOpened: []
       });
       requestAnimationFrame(() => {
-        this.state.sheetHeight.setValue(this.calculatedHeight);
+        if (this.sheetHeight) {
+          this.sheetHeight.value = this.calculatedHeight;
+        }
       });
     });
+    // Class methods to prevent recreation on every render
+    _defineProperty(this, "handleBackdropPress", () => {
+      if (this.props.autoclose !== 'disabled') {
+        this.closeSheet();
+      }
+    });
+    _defineProperty(this, "handleDragHandlePress", () => {
+      this.invokeEventCallback('onDraghandleiconclick', [null, this]);
+    });
     _defineProperty(this, "renderContent", props => {
+      // Don't render if shared values aren't initialized yet
+      if (!this.translateY || !this.backdropOpacity || !this.sheetHeight || !this.lastGestureDyShared) {
+        return null;
+      }
       return /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, (insets = {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0
       }) => {
-        this.topInset = (insets === null || insets === void 0 ? void 0 : insets.top) || 0;
+        // Store topInset for later use (avoid mutation during render)
+        const topInset = (insets === null || insets === void 0 ? void 0 : insets.top) || 0;
+        // Update the instance variable outside of render cycle
+        if (this.topInset !== topInset) {
+          requestAnimationFrame(() => {
+            this.topInset = topInset;
+          });
+        }
         return /*#__PURE__*/React.createElement(View, _extends({
           style: this.styles.root
-        }, this.getTestProps('keyboardview')), this._background, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
-          onPress: () => props.autoclose !== 'disabled' ? this.closeSheet() : null
-        }, /*#__PURE__*/React.createElement(Animated.View, _extends({
-          style: [this.styles.backdrop, {
-            opacity: this.state.backdropOpacity
-          }]
-        }, this.getTestProps('backdrop'), getAccessibilityProps(AccessibilityWidgetType.BOTTOMSHEET, props)))), /*#__PURE__*/React.createElement(Animated.View, _extends({
-          style: [this.styles.container, {
-            height: this.state.sheetHeight,
-            transform: [{
-              translateY: this.state.translateY
-            }]
-          }]
-        }, this.panResponder.panHandlers), /*#__PURE__*/React.createElement(View, _extends({
-          style: this.styles.dragHandleContainer
-        }, this.dragHandlePanResponder.panHandlers), /*#__PURE__*/React.createElement(Pressable, {
-          onPress: () => this.invokeEventCallback('onDraghandleiconclick', [null, this])
-        }, /*#__PURE__*/React.createElement(View, _extends({
-          style: this.styles.dragIconHandle
-        }, this.getTestProps('draghandle'))))), /*#__PURE__*/React.createElement(ScrollView, _extends({
+        }, this.getTestProps('keyboardview')), this._background, /*#__PURE__*/React.createElement(AnimatedBottomsheetContent, {
+          translateY: this.translateY,
+          backdropOpacity: this.backdropOpacity,
+          sheetHeight: this.sheetHeight,
+          lastGestureDy: this.lastGestureDyShared,
+          styles: this.styles,
+          props: props,
+          panHandlers: this.panResponder.panHandlers,
+          dragHandlePanHandlers: this.dragHandlePanResponder.panHandlers,
+          onBackdropPress: this.handleBackdropPress,
+          onDragHandlePress: this.handleDragHandlePress,
+          getTestProps: this.getTestProps.bind(this),
+          enabledragsettle: props.enabledragsettle
+        }, contentStyle => /*#__PURE__*/React.createElement(ScrollView, _extends({
           ref: this.state.scrollViewRef,
           style: this.styles.sheetContentContainer,
-          contentContainerStyle: [this.styles.sheetScrollContent, props.enabledragsettle && this.state.lastGestureDy > 0 && {
-            paddingBottom: this.state.lastGestureDy
-          }],
+          contentContainerStyle: [this.styles.sheetScrollContent],
           alwaysBounceVertical: false,
           alwaysBounceHorizontal: false,
           bounces: false,
@@ -391,10 +532,14 @@ export default class WmBottomsheet extends BaseComponent {
           scrollEventThrottle: 16,
           onScroll: this.handleScroll,
           nestedScrollEnabled: true,
-          scrollEnabled: true
+          scrollEnabled: !props.issticky && (!props.disablescrollonrest || this.state.isExpanded)
         }, this.getTestProps('scorllview')), props.enablemodalsupport ? /*#__PURE__*/React.createElement(ModalProvider, {
           value: this.sheetModalService
-        }, props.children) : props.children)), props.enablemodalsupport && this.state.localModalsOpened && this.state.localModalsOpened.map((o, i) => /*#__PURE__*/React.createElement(View, {
+        }, /*#__PURE__*/React.createElement(Animated.View, {
+          style: contentStyle
+        }, props.children)) : /*#__PURE__*/React.createElement(Animated.View, {
+          style: contentStyle
+        }, props.children))), props.enablemodalsupport && this.state.localModalsOpened && this.state.localModalsOpened.map((o, i) => /*#__PURE__*/React.createElement(View, {
           key: (o.name || '') + i,
           onStartShouldSetResponder: () => true,
           onResponderEnd: () => o.isModal && this.sheetModalService.hideModal(o),
@@ -425,14 +570,21 @@ export default class WmBottomsheet extends BaseComponent {
         this.expandedHeight -= this.defaultTopInset;
       }
     }
-    this.state.sheetHeight.setValue(this.calculatedHeight);
+
+    // Initialize shared values in constructor using makeMutable (not hooks)
+    // makeMutable can be called outside of React components
+    this.translateY = makeMutable(SCREEN_HEIGHT);
+    this.backdropOpacity = makeMutable(0);
+    this.sheetHeight = makeMutable(this.calculatedHeight);
+    this.lastGestureDyShared = makeMutable(0);
     this.updateState({
       isBottomsheetVisible: this.props.showonrender || false
     });
-    if (this.state.isBottomsheetVisible) {
-      this.openSheet();
-    } else {
-      this.closeSheetImmediate();
+
+    // Initialize values immediately to prevent flicker
+    if (this.props.showonrender) {
+      this.translateY.value = 0;
+      this.backdropOpacity.value = 1;
     }
 
     // Local ModalService for content rendered inside Bottomsheet
@@ -467,6 +619,14 @@ export default class WmBottomsheet extends BaseComponent {
   }
   componentDidMount() {
     super.componentDidMount();
+
+    // Trigger animation after mount if showonrender is true
+    if (this.state.isBottomsheetVisible) {
+      // Use requestAnimationFrame to ensure animation happens after initial render
+      requestAnimationFrame(() => {
+        this.openSheet();
+      });
+    }
     if (Platform.OS === 'android') {
       BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
     }
@@ -478,13 +638,19 @@ export default class WmBottomsheet extends BaseComponent {
     if (Platform.OS === 'android') {
       BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
     }
-    this.keyboardDidShowListener.remove();
-    this.keyboardDidHideListener.remove();
+    if (this.keyboardDidShowListener) {
+      this.keyboardDidShowListener.remove();
+    }
+    if (this.keyboardDidHideListener) {
+      this.keyboardDidHideListener.remove();
+    }
   }
   componentDidUpdate(prevProps) {
     if (prevProps.bottomsheetheightratio !== this.props.bottomsheetheightratio) {
       this.calculatedHeight = this.calculateSheetHeight(this.props.bottomsheetheightratio);
-      this.state.sheetHeight.setValue(this.calculatedHeight);
+      if (this.sheetHeight) {
+        this.sheetHeight.value = this.calculatedHeight;
+      }
     }
   }
   onPropertyChange(name, $new, $old) {
@@ -523,12 +689,12 @@ export default class WmBottomsheet extends BaseComponent {
             this.closeSheet();
           }
         },
-        statusBarTranslucent: true
+        statusBarTranslucent: false
       }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
         style: {
           flex: 1
         },
-        behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+        behavior: 'padding',
         keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : undefined
       }, this.renderContent(props)));
     } else {