@wavemaker-ai/app-rn-runtime 1.0.0-next.27766

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

@@ -0,0 +1,914 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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-ai/app-rn-runtime/core/base.component';
+import { View, PanResponder, Dimensions, TouchableWithoutFeedback, Platform, StatusBar, BackHandler, KeyboardAvoidingView, Keyboard, Modal, Pressable } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, withTiming, runOnJS, Easing, makeMutable, cancelAnimation } from 'react-native-reanimated';
+import * as Animatable from 'react-native-animatable';
+import WmBottomsheetProps from './bottomsheet.props';
+import { DEFAULT_CLASS } from './bottomsheet.styles';
+import { createSkeleton } from '../skeleton/skeleton.component';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker-ai/app-rn-runtime/core/accessibility';
+import { ModalProvider } from '@wavemaker-ai/app-rn-runtime/core/modal.service';
+import { SafeAreaInsetsContext, SafeAreaView } from 'react-native-safe-area-context';
+
+// Web-only: Runs all bottom sheet animations on the JS thread (sets useNativeDriver to false)
+// Prevents errors on web where native driver animations are not supported
+// Web - Animated api is used from animation
+if (Platform.OS === 'web') {
+  try {
+    const RN = require('react-native');
+    const RNAnimated = RN && RN.Animated;
+    if (RNAnimated && !RNAnimated.__wmPatchedNoNativeDriver) {
+      const wrap = name => {
+        const original = RNAnimated[name];
+        if (typeof original === 'function') {
+          RNAnimated[name] = (value, config) => {
+            const patched = {
+              ...(config || {}),
+              useNativeDriver: false
+            };
+            return original(value, patched);
+          };
+        }
+      };
+      wrap('timing');
+      wrap('spring');
+      wrap('decay');
+      RNAnimated.__wmPatchedNoNativeDriver = true;
+    }
+  } catch (_) {
+    // noop
+  }
+}
+const {
+  height: SCREEN_HEIGHT
+} = Dimensions.get('screen');
+export class WmBottomsheetState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _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);
+    _defineProperty(this, "contentAnimationId", 0);
+    _defineProperty(this, "contentAnimatableProps", undefined);
+  }
+}
+
+// Animated wrapper component that uses hooks
+const AnimatedBottomsheetContent = ({
+  translateY,
+  backdropOpacity,
+  sheetHeight,
+  lastGestureDy,
+  styles,
+  props,
+  children,
+  panHandlers,
+  dragHandlePanHandlers,
+  onBackdropPress,
+  onDragHandlePress,
+  getTestProps,
+  enabledragsettle,
+  scrollRef,
+  containerScrollRef,
+  configurePanGesture
+}) => {
+  // Simple RNGH GestureDetector attached to the same view as the PanResponder (panHandlers).
+  // No thresholds/validation: logs translationY directly during pan.
+  const panGesture = React.useMemo(() => {
+    // Create base Pan gesture
+    const pan = Gesture.Pan().runOnJS(true);
+
+    // Add external gestures for ScrollViews (container widget scrollview)
+    if (scrollRef && containerScrollRef) {
+      pan.simultaneousWithExternalGesture(scrollRef, containerScrollRef);
+    } else if (scrollRef) {
+      pan.simultaneousWithExternalGesture(scrollRef);
+    } else if (containerScrollRef) {
+      pan.simultaneousWithExternalGesture(containerScrollRef);
+    }
+
+    // Apply custom logic from parent BottomSheet class
+    if (configurePanGesture) {
+      configurePanGesture(pan);
+    }
+    return pan;
+  }, [scrollRef, containerScrollRef, configurePanGesture]);
+  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, {
+    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'))))), /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: panGesture
+  }, 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;
+    let calculatedHeight = screenHeight * this.maxHeightRatio;
+    if (Platform.OS === 'ios') {
+      // Subtract top inset bar height for ios only if bottomsheetheightratio is 0.9
+      if (this.maxHeightRatio >= 0.9) {
+        calculatedHeight -= this.defaultTopInset;
+      }
+    } else if (Platform.OS === 'android') {
+      // Subtract status bar height for Android only if bottomsheetheightratio is 0.9
+      if (this.maxHeightRatio >= 0.9) {
+        calculatedHeight -= this.statusBarHeight;
+      }
+    }
+    return calculatedHeight;
+  }
+  open() {
+    if (!this.state.isBottomsheetVisible) this.updateState({
+      isBottomsheetVisible: true
+    });
+    this.openSheet();
+  }
+  close() {
+    if (this.state.isBottomsheetVisible) {
+      this.closeSheet();
+    }
+  }
+  animate(props) {
+    this.updateState({
+      contentAnimationId: Date.now(),
+      contentAnimatableProps: props
+    });
+  }
+  constructor(_props) {
+    super(_props, DEFAULT_CLASS, new WmBottomsheetProps(), new WmBottomsheetState());
+    _defineProperty(this, "calculatedHeight", void 0);
+    _defineProperty(this, "expandedHeight", void 0);
+    _defineProperty(this, "defaultHeight", 0.5);
+    _defineProperty(this, "expandedDefaultHeight", 0.8);
+    _defineProperty(this, "minimumHeight", 0.01);
+    _defineProperty(this, "minimumExpandedHeight", 0.5);
+    _defineProperty(this, "maxHeight", 1.0);
+    _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);
+    _defineProperty(this, "keyboardDidShowListener", void 0);
+    _defineProperty(this, "keyboardDidHideListener", void 0);
+    _defineProperty(this, "backHandlerSubscription", null);
+    _defineProperty(this, "topInset", 0);
+    _defineProperty(this, "iosKeyboardHeight", 0);
+    _defineProperty(this, "isIosKeyboardHeightSet", false);
+    _defineProperty(this, "sheetModalService", void 0);
+    _defineProperty(this, "isDragHandleExpanding", false);
+    //container widget scrollview ref and y offset value
+    _defineProperty(this, "containerscrollViewRef", null);
+    _defineProperty(this, "containerscrollYoffset", 0);
+    // 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) {
+        if (!this.props.disableswipedownclose && this.props.autoclose !== 'disabled') {
+          this.closeSheet();
+        }
+        return true; // Prevent default back action
+      }
+      return false;
+    });
+    _defineProperty(this, "onKeyboardShow", event => {
+      var _event$endCoordinates;
+      let keyboardHeight = ((_event$endCoordinates = event.endCoordinates) === null || _event$endCoordinates === void 0 ? void 0 : _event$endCoordinates.height) || 0;
+      //only storing ios keyboard height once as first time keyboard open (to avoid scroll flickring issue in ios in text widget)
+      if (!this.isIosKeyboardHeightSet) {
+        var _event$endCoordinates2;
+        this.iosKeyboardHeight = ((_event$endCoordinates2 = event.endCoordinates) === null || _event$endCoordinates2 === void 0 ? void 0 : _event$endCoordinates2.height) + 40;
+        this.isIosKeyboardHeightSet = true;
+      }
+      // Calculate available space after keyboard
+      const availableHeight = SCREEN_HEIGHT - (Platform.OS == 'ios' ? this.iosKeyboardHeight : keyboardHeight);
+      // Calculate adjusted sheet height to fit within available space
+      // 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;
+      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", () => {
+      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 => {
+      // 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 || this.props.disableswipedownclose) {
+          if (gestureState.dy < this.expandedHeight / 4 || this.props.disableswipedownclose) {
+            var _this$sheetHeight;
+            //reseting bottom sheet scrollview offset value to fix scrollview automatic scroll issue while collpsing the bottom sheet
+            setTimeout(() => {
+              var _this$state$scrollVie;
+              if ((_this$state$scrollVie = this.state.scrollViewRef) !== null && _this$state$scrollVie !== void 0 && _this$state$scrollVie.current) {
+                this.state.scrollViewRef.current.scrollTo({
+                  x: 0,
+                  y: 0,
+                  animated: false
+                });
+                this.updateState({
+                  scrollOffset: 0
+                });
+              }
+            }, this.animationDuration);
+            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 (this.props.disableswipedownclose) {
+            this.openSheet();
+            return;
+          }
+          if ((gestureState.dy > 100 || gestureState.vy > 0.5) && !this.props.disableswipedownclose) {
+            this.closeSheet();
+          } else {
+            this.openSheet();
+          }
+        }
+      }
+    });
+    _defineProperty(this, "configurePanGesture", pan => {
+      pan.enabled(true).onUpdate(event => {
+        // ← Add : any
+        const gestureState = {
+          dy: event.translationY,
+          vy: event.velocityY,
+          moveX: event.x,
+          moveY: event.y,
+          vx: event.velocityX
+        };
+        if (gestureState.dy > 0 && this.translateY && this.lastGestureDyShared && this.state.scrollOffset <= 0 && this.containerscrollYoffset <= 0) {
+          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 && this.props.disablescrollonrest) {
+          // Only trigger expand once with threshold of -50px upward drag
+          this.isDragHandleExpanding = true;
+          this.expandBottomSheet();
+        }
+        // ... rest of logic
+      }).onEnd(event => {
+        // ← Add : any
+        const gestureState = {
+          dy: event.translationY,
+          vy: event.velocityY,
+          moveX: event.x,
+          moveY: event.y,
+          vx: event.velocityX
+        };
+        if (gestureState.dy > 0 && this.state.scrollOffset <= 0 && this.containerscrollYoffset <= 0) {
+          this.handleSwipeGesture(gestureState);
+        }
+      }).onFinalize((event, success) => {
+        // ← Add types
+        if (!success) {
+          this.openSheet();
+        }
+      });
+      return pan;
+    });
+    // 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 Math.abs(gestureState.dy) > 2;
+        }
+        // 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 && 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) => {
+        this.handleSwipeGesture(gestureState);
+      },
+      onPanResponderTerminate: () => {
+        this.openSheet();
+      }
+    }));
+    //pan repsoneder for bottom sheet dragable container
+    _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 && 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);
+      }
+    }));
+    _defineProperty(this, "handleScroll", event => {
+      if (this.state.keyboardHeight > 0) return null;
+      const offsetY = event.nativeEvent.contentOffset.y;
+      this.updateState({
+        isScrolling: offsetY > 0,
+        scrollOffset: offsetY
+      });
+    });
+    _defineProperty(this, "openSheet", () => {
+      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({
+        isBottomsheetVisible: false
+      });
+      this.invokeEventCallback('onClose', [null, this]);
+    });
+    _defineProperty(this, "closeSheet", () => {
+      const callback = () => {
+        // Reset sheet height after close
+        if (this.sheetHeight) {
+          this.sheetHeight.value = this.calculatedHeight;
+        }
+        this.updateState({
+          isExpanded: false,
+          localModalsOpened: [],
+          scrollOffset: 0,
+          contentAnimationId: 0,
+          contentAnimatableProps: undefined
+        });
+        this.containerscrollYoffset = 0;
+        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", () => {
+      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,
+        localModalsOpened: [],
+        contentAnimationId: 0,
+        contentAnimatableProps: undefined
+      });
+      requestAnimationFrame(() => {
+        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, "renderAnimatedSheetChildren", children => {
+      if (!this.state.contentAnimatableProps) {
+        return children;
+      }
+      return /*#__PURE__*/React.createElement(Animatable.View, _extends({
+        key: this.state.contentAnimationId
+      }, this.state.contentAnimatableProps), children);
+    });
+    _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
+      }) => {
+        // Store topInset for later use (avoid mutation during render)
+        const topInset = (insets === null || insets === void 0 ? void 0 : insets.top) || 0;
+        const bottomInset = (insets === null || insets === void 0 ? void 0 : insets.bottom) || 0;
+        // Update the instance variable outside of render cycle
+        if (this.topInset !== topInset) {
+          requestAnimationFrame(() => {
+            this.topInset = topInset;
+          });
+        }
+        const absoluteStyle = {
+          top: 0,
+          left: 0,
+          right: 0
+        };
+        const rootStyle = props.modal ? [this.styles.root, absoluteStyle] : this.styles.root;
+        return /*#__PURE__*/React.createElement(View, _extends({
+          style: rootStyle
+        }, 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,
+          scrollRef: this.state.scrollViewRef,
+          containerScrollRef: this.containerscrollViewRef,
+          configurePanGesture: this.configurePanGesture
+        }, contentStyle => props.issticky ? props.enablemodalsupport ? /*#__PURE__*/React.createElement(ModalProvider, {
+          value: this.sheetModalService
+        }, /*#__PURE__*/React.createElement(Animated.View, {
+          style: [contentStyle, this.styles.sheetContentContainer, {
+            overflow: 'hidden'
+          }]
+        }, props.children)) : /*#__PURE__*/React.createElement(Animated.View, {
+          style: [contentStyle, this.styles.sheetContentContainer, {
+            overflow: 'hidden'
+          }]
+        }, props.children) : /*#__PURE__*/React.createElement(ScrollView, _extends({
+          ref: this.state.scrollViewRef,
+          style: this.styles.sheetContentContainer,
+          contentContainerStyle: [this.styles.sheetScrollContent],
+          alwaysBounceVertical: false,
+          alwaysBounceHorizontal: false,
+          bounces: false,
+          showsVerticalScrollIndicator: false,
+          scrollEventThrottle: 16,
+          onScroll: this.handleScroll,
+          nestedScrollEnabled: true,
+          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
+        }, this.renderAnimatedSheetChildren(props.children))) : /*#__PURE__*/React.createElement(Animated.View, {
+          style: contentStyle
+        }, this.renderAnimatedSheetChildren(props.children)))), Platform.OS === 'android' && !this.props.modal && bottomInset > 40 && /*#__PURE__*/React.createElement(SafeAreaView, {
+          edges: ['bottom']
+        }), 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);
+    //container srollview ref
+    this.subscribe('containerScrollViewReady', ref => {
+      if (ref && ref.current && this.containerscrollViewRef !== ref) {
+        this.containerscrollViewRef = ref;
+        this.forceUpdate();
+      }
+    });
+    //container scrollview y offset value
+    this.subscribe('scroll', e => {
+      const offsetY = e.nativeEvent.contentOffset.y;
+      this.containerscrollYoffset = offsetY;
+    });
+    // Use bottomsheetexpandedheightratio if provided, otherwise use expandedDefaultHeight
+    const expandedRatio = _props.bottomsheetexpandedheightratio || this.expandedDefaultHeight;
+    const effectiveExpandedRatio = Math.max(this.minimumExpandedHeight, Math.min(expandedRatio, this.maxHeight));
+    this.expandedHeight = SCREEN_HEIGHT * effectiveExpandedRatio;
+    if (Platform.OS === 'android') {
+      if (effectiveExpandedRatio >= 0.9) {
+        this.expandedHeight -= this.statusBarHeight;
+      }
+    }
+    if (Platform.OS === 'ios') {
+      if (effectiveExpandedRatio >= 0.9) {
+        this.expandedHeight -= this.defaultTopInset;
+      }
+    }
+
+    // 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
+    });
+
+    // 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') {
+      this.backHandlerSubscription = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
+    }
+    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.onKeyboardShow);
+    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.onKeyboardHide);
+  }
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    if (this.backHandlerSubscription) {
+      this.backHandlerSubscription.remove();
+      this.backHandlerSubscription = null;
+    }
+    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);
+      if (this.sheetHeight) {
+        this.sheetHeight.value = this.calculatedHeight;
+      }
+    }
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    switch (name) {
+      case "showonrender":
+        if ($new) {
+          this.updateState({
+            isBottomsheetVisible: $new || false
+          });
+          if (this.state.isBottomsheetVisible) {
+            this.openSheet && this.openSheet();
+          }
+        } else {
+          this.closeSheetImmediate && this.closeSheetImmediate();
+        }
+        break;
+    }
+  }
+  renderSkeleton(props) {
+    return createSkeleton(this.theme, this.styles.skeleton, {
+      ...this.styles.root,
+      width: this.styles.root.width,
+      height: this.styles.root.height
+    });
+  }
+  renderWidget(props) {
+    if (!this.state.isBottomsheetVisible) return null;
+    return /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, (insets = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }) => {
+      // Use SafeAreaView on Android with button navigation to render the bottom sheet above the nav bar (when modal props is true)
+      // Button navigation is identified when bottom inset >= 40
+      const hasButtonNavigation = Platform.OS === 'android' && ((insets === null || insets === void 0 ? void 0 : insets.bottom) || 0) >= 40;
+      const wrapWithSafeArea = children => {
+        if (hasButtonNavigation) {
+          return /*#__PURE__*/React.createElement(SafeAreaView, {
+            style: {
+              flex: 1
+            }
+          }, children);
+        }
+        return children;
+      };
+      if (props.modal) {
+        return /*#__PURE__*/React.createElement(Modal, {
+          visible: this.state.isBottomsheetVisible,
+          transparent: true,
+          animationType: "none",
+          onRequestClose: () => {
+            if (!this.props.disableswipedownclose && this.props.autoclose !== 'disabled') {
+              this.closeSheet();
+            }
+          },
+          statusBarTranslucent: false
+        }, /*#__PURE__*/React.createElement(GestureHandlerRootView, {
+          style: {
+            flex: 1
+          }
+        }, wrapWithSafeArea(/*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+          style: {
+            flex: 1
+          },
+          behavior: 'padding',
+          keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : undefined
+        }, this.renderContent(props)))));
+      } else {
+        return this.renderContent(props);
+      }
+    });
+  }
+}
+//# sourceMappingURL=bottomsheet.component.js.map