@wavemaker/app-rn-runtime 11.12.1-rc.221 → 11.13.0-2.647474

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

@@ -4,12 +4,14 @@ 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 } 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';
 import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { ModalProvider } from '@wavemaker/app-rn-runtime/core/modal.service';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 const {
   height: SCREEN_HEIGHT
@@ -17,25 +19,78 @@ 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);
     _defineProperty(this, "isExpanded", false);
     _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
@@ -67,11 +122,11 @@ export default class WmBottomsheet extends BaseComponent {
     _defineProperty(this, "expandedHeight", void 0);
     _defineProperty(this, "defaultHeight", 0.5);
     _defineProperty(this, "expandedDefaultHeight", 0.8);
-    _defineProperty(this, "minimumHeight", 0.2);
+    _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);
@@ -80,9 +135,89 @@ export default class WmBottomsheet extends BaseComponent {
     _defineProperty(this, "topInset", 0);
     _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]);
+      };
+
+      // Reset drag settle value immediately on UI thread
+      this.lastGestureDyShared.value = 0;
+      if (this.props.enabledragsettle) {
+        // Synchronize both animations to complete together
+        this.sheetHeight.value = withTiming(targetHeight, {
+          duration: this.animationDuration,
+          easing: Easing.out(Easing.ease)
+        });
+        this.translateY.value = withTiming(0, {
+          duration: this.animationDuration,
+          easing: Easing.out(Easing.ease)
+        }, finished => {
+          if (finished) {
+            runOnJS(callback)();
+          }
+        });
+      } else {
+        // Only animate height for non-drag-settle mode
+        this.sheetHeight.value = withTiming(targetHeight, {
+          duration: this.animationDuration,
+          easing: Easing.out(Easing.ease)
+        }, finished => {
+          if (finished) {
+            runOnJS(callback)();
+          }
+        });
+      }
+    });
+    _defineProperty(this, "collapseBottomSheet", () => {
+      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,
+        easing: Easing.out(Easing.ease)
+      });
+      this.sheetHeight.value = withTiming(this.calculatedHeight, {
+        duration: this.animationDuration,
+        easing: Easing.out(Easing.ease)
+      }, finished => {
+        if (finished) {
+          runOnJS(callback)();
+        }
+      });
+    });
     _defineProperty(this, "handleBackPress", () => {
+      // Close top-most local modal first, if any
+      if (this.state.localModalsOpened && this.state.localModalsOpened.length > 0) {
+        const top = this.state.localModalsOpened[this.state.localModalsOpened.length - 1];
+        this.sheetModalService.hideModal(top);
+        return true;
+      }
       if (this.state.isBottomsheetVisible) {
-        this.closeSheet();
+        if (!this.props.disableswipedownclose && this.props.autoclose !== 'disabled') {
+          this.closeSheet();
+        }
         return true; // Prevent default back action
       }
       return false;
@@ -102,55 +237,94 @@ 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
       });
     });
     _defineProperty(this, "handleSwipeGesture", gestureState => {
-      this.updateState({
-        lastGestureDy: 0
-      });
+      // Only reset lastGestureDy for traditional behavior, not for drag and settle
+      if (!this.props.enabledragsettle) {
+        this.updateState({
+          lastGestureDy: 0
+        });
+        if (this.lastGestureDyShared) {
+          this.lastGestureDyShared.value = 0;
+        }
+      }
+      if (this.props.enabledragsettle && gestureState.dy > 0) {
+        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;
+        }
+        if (this.translateY && this.lastGestureDyShared) {
+          this.translateY.value = currentTranslateY;
+          this.lastGestureDyShared.value = currentTranslateY;
+        }
+        this.updateState({
+          isExpanded: false,
+          lastGestureDy: currentTranslateY
+        });
+        return;
+      }
       if (gestureState.dy > 0) {
-        if (this.state.isExpanded) {
-          // 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) {
-            Animated.parallel([Animated.timing(this.state.translateY, {
-              toValue: 0,
-              // Keep sheet open
-              duration: this.animationDuration,
-              useNativeDriver: false
-            }), Animated.timing(this.state.sheetHeight, {
-              toValue: this.calculatedHeight,
-              // Back to original height
-              duration: this.animationDuration,
-              useNativeDriver: false
-            })]).start();
-            this.updateState({
-              isExpanded: false
-            });
-          } else if (gestureState.dy > this.expandedHeight / 4 || gestureState.vy > 0.5) {
+        if (this.state.isExpanded || this.props.disableswipedownclose) {
+          if (gestureState.dy < this.expandedHeight / 4 || this.props.disableswipedownclose) {
+            var _this$sheetHeight;
+            let sheetMinimumHeight = this.props.bottomsheetminimumheight || 0.1;
+            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();
           }
         } else {
-          if (gestureState.dy > 100 || gestureState.vy > 0.5) {
+          if (this.props.disableswipedownclose) {
+            this.openSheet();
+            return;
+          }
+          if ((gestureState.dy > 100 || gestureState.vy > 0.5) && !this.props.disableswipedownclose) {
             this.closeSheet();
           } else {
             this.openSheet();
@@ -161,17 +335,35 @@ export default class WmBottomsheet extends BaseComponent {
     // panResponder for bottom sheet scroll view
     _defineProperty(this, "panResponder", PanResponder.create({
       onStartShouldSetPanResponder: (_, gestureState) => {
+        if (this.props.disablescrollonrest && !this.state.isExpanded) {
+          return true;
+        }
         // Only handle the gesture if we're at the top and swiping down
         return gestureState.dy > 0 && this.state.scrollOffset <= 0;
       },
       onMoveShouldSetPanResponder: (_, gestureState) => {
+        if (this.props.disablescrollonrest && !this.state.isExpanded) {
+          return true;
+        }
         // 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;
+          // Reset expand flag if dragging down
+          this.isDragHandleExpanding = false;
+        } else if (gestureState.dy < 0 && 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) => {
@@ -185,26 +377,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
-          const targetHeight = Math.min(this.expandedHeight, SCREEN_HEIGHT);
-          Animated.timing(this.state.sheetHeight, {
-            toValue: targetHeight,
-            duration: this.animationDuration,
-            useNativeDriver: false
-          }).start();
-          this.updateState({
-            isExpanded: true
-          });
+        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);
       }
     }));
@@ -217,20 +411,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({
@@ -239,69 +445,98 @@ 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
-          });
-          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,
-        isBottomsheetVisible: false
+        isBottomsheetVisible: false,
+        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: this.closeSheet
-        }, /*#__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(TouchableWithoutFeedback, {
-          onPress: this.closeSheet
-        }, /*#__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,
+          contentContainerStyle: [this.styles.sheetScrollContent],
           alwaysBounceVertical: false,
           alwaysBounceHorizontal: false,
           bounces: false,
@@ -309,8 +544,26 @@ export default class WmBottomsheet extends BaseComponent {
           scrollEventThrottle: 16,
           onScroll: this.handleScroll,
           nestedScrollEnabled: true,
-          scrollEnabled: true
-        }, this.getTestProps('scorllview')), props.children)));
+          scrollEnabled: !props.issticky && (!props.disablescrollonrest || this.state.isExpanded)
+        }, this.getTestProps('scorllview')), props.enablemodalsupport ? /*#__PURE__*/React.createElement(ModalProvider, {
+          value: this.sheetModalService
+        }, /*#__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),
+          style: [this.styles.modalOverlay, o.centered ? this.styles.centeredOverlay : null, {
+            zIndex: o.elevationIndex || 9999,
+            elevation: o.elevationIndex || 9999
+          }, o.modalStyle || {}]
+        }, /*#__PURE__*/React.createElement(View, {
+          style: [o.contentStyle || {}],
+          onStartShouldSetResponder: () => true,
+          onResponderEnd: e => e.stopPropagation()
+        }, o.content))));
       });
     });
     this.calculatedHeight = this.calculateSheetHeight(_props.bottomsheetheightratio);
@@ -329,18 +582,63 @@ 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
+    this.sheetModalService = {
+      refresh: () => this.forceUpdate(),
+      showModal: options => {
+        const exists = this.state.localModalsOpened.find(o => o === options);
+        if (!exists) {
+          // ensure high z-index within sheet
+          options.elevationIndex = 9999 + this.state.localModalsOpened.length + 1;
+          const list = [...this.state.localModalsOpened, options];
+          this.updateState({
+            localModalsOpened: list
+          }, () => {
+            setTimeout(() => options.onOpen && options.onOpen(), 0);
+          });
+        }
+      },
+      hideModal: options => {
+        const list = [...this.state.localModalsOpened];
+        const idx = options ? list.findIndex(o => o === options) : list.length - 1;
+        if (idx >= 0) {
+          const o = list[idx];
+          o && o.onClose && o.onClose();
+          list.splice(idx, 1);
+          this.updateState({
+            localModalsOpened: list
+          });
+        }
+      }
+    };
   }
   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);
     }
@@ -352,13 +650,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) {
@@ -392,13 +696,17 @@ export default class WmBottomsheet extends BaseComponent {
         visible: this.state.isBottomsheetVisible,
         transparent: true,
         animationType: "none",
-        onRequestClose: this.closeSheet,
-        statusBarTranslucent: true
+        onRequestClose: () => {
+          if (!this.props.disableswipedownclose && this.props.autoclose !== 'disabled') {
+            this.closeSheet();
+          }
+        },
+        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 {