@hero-design/rn 8.2.1 → 8.2.2

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 1d579abcb1b04d71
+@hero-design/rn:build: cache hit, replaying output d7aa160db70d0015
 @hero-design/rn:build: $ yarn build:js && yarn build:types
 @hero-design/rn:build: $ rollup -c
 @hero-design/rn:build: 
 @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
 @hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 @hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 26.4s
+@hero-design/rn:build: created lib/index.js, es/index.js in 21.6s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, Modal, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, useWindowDimensions, Keyboard, SectionList, FlatList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, ScrollView, Modal, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, useWindowDimensions, Keyboard, SectionList, FlatList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
 import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -5701,7 +5701,7 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$j = ["children", "fontSize", "fontWeight", "intent", "typeface"];
+var _excluded$k = ["children", "fontSize", "fontWeight", "intent", "typeface"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -5712,7 +5712,7 @@ var Text = function Text(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6191,10 +6191,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$i = ["style"];
+var _excluded$j = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$i);
+    otherProps = _objectWithoutProperties(_ref, _excluded$j);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -6276,7 +6276,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$h = ["key"];
+var _excluded$i = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6297,7 +6297,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$h);
+      props = _objectWithoutProperties(_ref2, _excluded$i);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
@@ -6679,7 +6679,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$g = ["children", "visible", "intent", "style", "testID"];
+var _excluded$h = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -6688,7 +6688,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -6721,7 +6721,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$f = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$g = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -6736,7 +6736,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -6840,7 +6840,7 @@ var omit = function omit(keys, props) {
   return result;
 };
 
-var _excluded$e = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$f = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -6851,7 +6851,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -6919,6 +6919,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
   }))));
 };
 
+var BottomSheetContext = /*#__PURE__*/createContext({});
+
 var StyledDivider = index$a(View)(function (_ref) {
   var themeMarginHorizontal = _ref.themeMarginHorizontal,
     themeMarginVertical = _ref.themeMarginVertical,
@@ -6936,13 +6938,13 @@ var StyledDivider = index$a(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$d = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$e = ["marginHorizontal", "marginVertical", "style", "testID"];
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
     marginVertical = _ref.marginVertical,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$d);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7072,7 +7074,7 @@ var StyledLoadingDot = index$a(View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$c = ["count", "size", "testID", "themeVariant"];
+var _excluded$d = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7104,7 +7106,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$c);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$d);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -7500,6 +7502,36 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 };
 
+var _excluded$c = ["scrollEventThrottle"];
+var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
+  var _ref$scrollEventThrot = _ref.scrollEventThrottle,
+    scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  var _useContext = useContext(BottomSheetContext),
+    setInternalShowDivider = _useContext.setInternalShowDivider;
+  var onScrollBeginDrag = useCallback(function (e) {
+    var _props$onScrollBeginD;
+    setInternalShowDivider(true);
+    props === null || props === void 0 ? void 0 : (_props$onScrollBeginD = props.onScrollBeginDrag) === null || _props$onScrollBeginD === void 0 ? void 0 : _props$onScrollBeginD.call(props, e);
+  }, []);
+  var onMomentumScrollBegin = useCallback(function (e) {
+    var _props$onMomentumScro;
+    setInternalShowDivider(true);
+    props === null || props === void 0 ? void 0 : (_props$onMomentumScro = props.onMomentumScrollEnd) === null || _props$onMomentumScro === void 0 ? void 0 : _props$onMomentumScro.call(props, e);
+  }, []);
+  var onMomentumScrollEnd = useCallback(function (e) {
+    var _props$onMomentumScro2;
+    setInternalShowDivider(false);
+    props === null || props === void 0 ? void 0 : (_props$onMomentumScro2 = props.onMomentumScrollEnd) === null || _props$onMomentumScro2 === void 0 ? void 0 : _props$onMomentumScro2.call(props, e);
+  }, []);
+  return /*#__PURE__*/React.createElement(ScrollView, _extends$1({}, props, {
+    onScrollBeginDrag: onScrollBeginDrag,
+    onMomentumScrollBegin: onMomentumScrollBegin,
+    onMomentumScrollEnd: onMomentumScrollEnd,
+    scrollEventThrottle: scrollEventThrottle
+  }));
+};
+
 var BottomSheet = function BottomSheet(_ref) {
   var open = _ref.open,
     header = _ref.header,
@@ -7514,7 +7546,7 @@ var BottomSheet = function BottomSheet(_ref) {
     _ref$hasBackdrop = _ref.hasBackdrop,
     hasBackdrop = _ref$hasBackdrop === void 0 ? true : _ref$hasBackdrop,
     _ref$showDivider = _ref.showDivider,
-    showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
+    showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
     style = _ref.style,
     testID = _ref.testID,
     _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
@@ -7527,6 +7559,10 @@ var BottomSheet = function BottomSheet(_ref) {
     visible = _useState2[0],
     setVisibility = _useState2[1];
   var animatedValue = useRef(new Animated.Value(open ? 0 : 1));
+  var _useState3 = useState(showDivider),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalShowDivider = _useState4[0],
+    setInternalShowDivider = _useState4[1];
   useEffect(function () {
     // Show the modal before the open animation start
     if (open && !visible) {
@@ -7567,6 +7603,11 @@ var BottomSheet = function BottomSheet(_ref) {
     inputRange: [0, 1],
     outputRange: [0, 0.48]
   }) : 0;
+  var BottomSheetContextValue = useMemo(function () {
+    return {
+      setInternalShowDivider: setInternalShowDivider
+    };
+  }, [setInternalShowDivider]);
   return /*#__PURE__*/React.createElement(Modal, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -7592,13 +7633,18 @@ var BottomSheet = function BottomSheet(_ref) {
     }]
   }, header !== undefined ? /*#__PURE__*/React.createElement(Header, {
     content: header,
-    showDivider: showDivider,
+    showDivider: internalShowDivider,
     onRequestClose: onRequestClose,
     showCloseButton: showCloseButton
-  }) : null, children, footer ? /*#__PURE__*/React.createElement(Footer$1, {
+  }) : null, /*#__PURE__*/React.createElement(BottomSheetContext.Provider, {
+    value: BottomSheetContextValue
+  }, children), footer ? /*#__PURE__*/React.createElement(Footer$1, {
     showDivider: showDivider
   }, footer) : null))));
 };
+var BottomSheet$1 = Object.assign(BottomSheet, {
+  ScrollView: BottomSheetScrollView
+});
 
 var colors = {
   backgroundColor: {
@@ -10928,7 +10974,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  })), /*#__PURE__*/React.createElement(BottomSheet, {
+  })), /*#__PURE__*/React.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -12998,7 +13044,7 @@ function MultiSelect(_ref) {
     renderInputValue: renderSelectedValue !== undefined ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
-  }))))), /*#__PURE__*/React.createElement(BottomSheet, {
+  }))))), /*#__PURE__*/React.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -13174,7 +13220,7 @@ var SingleSelect = function SingleSelect(_ref) {
     renderInputValue: renderSelectedValue !== undefined ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
-  }))))), /*#__PURE__*/React.createElement(BottomSheet, {
+  }))))), /*#__PURE__*/React.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -14011,7 +14057,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  })), /*#__PURE__*/React.createElement(BottomSheet, {
+  })), /*#__PURE__*/React.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -30834,4 +30880,4 @@ var index = Object.assign(RichTextEditor$1, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };
+export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };

package/lib/index.js

@@ -5730,7 +5730,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$j = ["children", "fontSize", "fontWeight", "intent", "typeface"];
+var _excluded$k = ["children", "fontSize", "fontWeight", "intent", "typeface"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -5741,7 +5741,7 @@ var Text = function Text(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6220,10 +6220,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$i = ["style"];
+var _excluded$j = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$i);
+    otherProps = _objectWithoutProperties(_ref, _excluded$j);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -6305,7 +6305,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$h = ["key"];
+var _excluded$i = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6326,7 +6326,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$h);
+      props = _objectWithoutProperties(_ref2, _excluded$i);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
@@ -6708,7 +6708,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$g = ["children", "visible", "intent", "style", "testID"];
+var _excluded$h = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -6717,7 +6717,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -6750,7 +6750,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$f = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$g = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -6765,7 +6765,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -6869,7 +6869,7 @@ var omit = function omit(keys, props) {
   return result;
 };
 
-var _excluded$e = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$f = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -6880,7 +6880,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -6948,6 +6948,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
   }))));
 };
 
+var BottomSheetContext = /*#__PURE__*/React.createContext({});
+
 var StyledDivider = index$a(reactNative.View)(function (_ref) {
   var themeMarginHorizontal = _ref.themeMarginHorizontal,
     themeMarginVertical = _ref.themeMarginVertical,
@@ -6965,13 +6967,13 @@ var StyledDivider = index$a(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$d = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$e = ["marginHorizontal", "marginVertical", "style", "testID"];
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
     marginVertical = _ref.marginVertical,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$d);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7101,7 +7103,7 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$c = ["count", "size", "testID", "themeVariant"];
+var _excluded$d = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7133,7 +7135,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$c);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$d);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -7529,6 +7531,36 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
+var _excluded$c = ["scrollEventThrottle"];
+var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
+  var _ref$scrollEventThrot = _ref.scrollEventThrottle,
+    scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  var _useContext = React.useContext(BottomSheetContext),
+    setInternalShowDivider = _useContext.setInternalShowDivider;
+  var onScrollBeginDrag = React.useCallback(function (e) {
+    var _props$onScrollBeginD;
+    setInternalShowDivider(true);
+    props === null || props === void 0 ? void 0 : (_props$onScrollBeginD = props.onScrollBeginDrag) === null || _props$onScrollBeginD === void 0 ? void 0 : _props$onScrollBeginD.call(props, e);
+  }, []);
+  var onMomentumScrollBegin = React.useCallback(function (e) {
+    var _props$onMomentumScro;
+    setInternalShowDivider(true);
+    props === null || props === void 0 ? void 0 : (_props$onMomentumScro = props.onMomentumScrollEnd) === null || _props$onMomentumScro === void 0 ? void 0 : _props$onMomentumScro.call(props, e);
+  }, []);
+  var onMomentumScrollEnd = React.useCallback(function (e) {
+    var _props$onMomentumScro2;
+    setInternalShowDivider(false);
+    props === null || props === void 0 ? void 0 : (_props$onMomentumScro2 = props.onMomentumScrollEnd) === null || _props$onMomentumScro2 === void 0 ? void 0 : _props$onMomentumScro2.call(props, e);
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.ScrollView, _extends$1({}, props, {
+    onScrollBeginDrag: onScrollBeginDrag,
+    onMomentumScrollBegin: onMomentumScrollBegin,
+    onMomentumScrollEnd: onMomentumScrollEnd,
+    scrollEventThrottle: scrollEventThrottle
+  }));
+};
+
 var BottomSheet = function BottomSheet(_ref) {
   var open = _ref.open,
     header = _ref.header,
@@ -7543,7 +7575,7 @@ var BottomSheet = function BottomSheet(_ref) {
     _ref$hasBackdrop = _ref.hasBackdrop,
     hasBackdrop = _ref$hasBackdrop === void 0 ? true : _ref$hasBackdrop,
     _ref$showDivider = _ref.showDivider,
-    showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
+    showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
     style = _ref.style,
     testID = _ref.testID,
     _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
@@ -7556,6 +7588,10 @@ var BottomSheet = function BottomSheet(_ref) {
     visible = _useState2[0],
     setVisibility = _useState2[1];
   var animatedValue = React.useRef(new reactNative.Animated.Value(open ? 0 : 1));
+  var _useState3 = React.useState(showDivider),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalShowDivider = _useState4[0],
+    setInternalShowDivider = _useState4[1];
   React.useEffect(function () {
     // Show the modal before the open animation start
     if (open && !visible) {
@@ -7596,6 +7632,11 @@ var BottomSheet = function BottomSheet(_ref) {
     inputRange: [0, 1],
     outputRange: [0, 0.48]
   }) : 0;
+  var BottomSheetContextValue = React.useMemo(function () {
+    return {
+      setInternalShowDivider: setInternalShowDivider
+    };
+  }, [setInternalShowDivider]);
   return /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -7621,13 +7662,18 @@ var BottomSheet = function BottomSheet(_ref) {
     }]
   }, header !== undefined ? /*#__PURE__*/React__default["default"].createElement(Header, {
     content: header,
-    showDivider: showDivider,
+    showDivider: internalShowDivider,
     onRequestClose: onRequestClose,
     showCloseButton: showCloseButton
-  }) : null, children, footer ? /*#__PURE__*/React__default["default"].createElement(Footer$1, {
+  }) : null, /*#__PURE__*/React__default["default"].createElement(BottomSheetContext.Provider, {
+    value: BottomSheetContextValue
+  }, children), footer ? /*#__PURE__*/React__default["default"].createElement(Footer$1, {
     showDivider: showDivider
   }, footer) : null))));
 };
+var BottomSheet$1 = Object.assign(BottomSheet, {
+  ScrollView: BottomSheetScrollView
+});
 
 var colors = {
   backgroundColor: {
@@ -10957,7 +11003,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -13027,7 +13073,7 @@ function MultiSelect(_ref) {
     renderInputValue: renderSelectedValue !== undefined ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
-  }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -13203,7 +13249,7 @@ var SingleSelect = function SingleSelect(_ref) {
     renderInputValue: renderSelectedValue !== undefined ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
-  }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -14040,7 +14086,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -30869,7 +30915,7 @@ exports.Attachment = Attachment;
 exports.Avatar = index$9;
 exports.Badge = Badge$1;
 exports.BottomNavigation = BottomNavigation;
-exports.BottomSheet = BottomSheet;
+exports.BottomSheet = BottomSheet$1;
 exports.Box = Box;
 exports.Button = CompoundButton;
 exports.Calendar = Calendar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.2.1",
+  "version": "8.2.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.2.1",
+    "@hero-design/colors": "8.2.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.2.1",
+    "@hero-design/eslint-plugin": "8.2.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.2.1",
+    "eslint-config-hd": "8.2.2",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.2.1",
+    "prettier-config-hd": "8.2.2",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/BottomSheet/BottomSheetContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export type BottomSheetContextType = {
+  setInternalShowDivider: (value: boolean) => void;
+};
+
+const BottomSheetContext = createContext<BottomSheetContextType>(
+  {} as BottomSheetContextType
+);
+
+export default BottomSheetContext;

package/src/components/BottomSheet/ScrollView.tsx

@@ -0,0 +1,57 @@
+import React, { useContext, useCallback } from 'react';
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  ScrollViewProps,
+} from 'react-native';
+import BottomSheetContext, {
+  BottomSheetContextType,
+} from './BottomSheetContext';
+
+const BottomSheetScrollView = ({
+  scrollEventThrottle = 100,
+  ...props
+}: ScrollViewProps): JSX.Element => {
+  const { setInternalShowDivider } =
+    useContext<BottomSheetContextType>(BottomSheetContext);
+
+  const onScrollBeginDrag = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      setInternalShowDivider(true);
+
+      props?.onScrollBeginDrag?.(e);
+    },
+    []
+  );
+
+  const onMomentumScrollBegin = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      setInternalShowDivider(true);
+
+      props?.onMomentumScrollEnd?.(e);
+    },
+    []
+  );
+
+  const onMomentumScrollEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      setInternalShowDivider(false);
+
+      props?.onMomentumScrollEnd?.(e);
+    },
+    []
+  );
+
+  return (
+    <ScrollView
+      {...props}
+      onScrollBeginDrag={onScrollBeginDrag}
+      onMomentumScrollBegin={onMomentumScrollBegin}
+      onMomentumScrollEnd={onMomentumScrollEnd}
+      scrollEventThrottle={scrollEventThrottle}
+    />
+  );
+};
+
+export default BottomSheetScrollView;

package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  transparent={true}
+  visible={false}
+/>
+`;
+
 exports[`BottomSheet renders correctly with close state 1`] = `
 <Modal
   hardwareAccelerated={false}
@@ -196,34 +205,10 @@ exports[`BottomSheet renders correctly with open state 1`] = `
             </View>
           </View>
         </View>
-        <View
-          style={
-            Array [
-              Object {
-                "borderBottomColor": "#e8e9ea",
-                "borderBottomWidth": 1,
-                "maxWidth": "100%",
-              },
-              undefined,
-            ]
-          }
-        />
         <Text>
           Content
         </Text>
         <View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <View
             style={
               Array [

package/src/components/BottomSheet/__tests__/index.spec.tsx

@@ -40,6 +40,23 @@ describe('BottomSheet', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it('renders correctly with BottomSheet.ScrollView', () => {
+    const { toJSON } = renderWithTheme(
+      <BottomSheet
+        open={false}
+        header="Title"
+        footer={<Button title="Footer CTA" />}
+        onRequestClose={jest.fn()}
+      >
+        <BottomSheet.ScrollView>
+          <Content />
+        </BottomSheet.ScrollView>
+      </BottomSheet>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
   describe('Header', () => {
     it('renders default header correctly', () => {
       const { getByText } = renderWithTheme(

package/src/components/BottomSheet/index.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
   Animated,
   Dimensions,
@@ -7,8 +9,7 @@ import {
   Modal,
   Platform,
 } from 'react-native';
-import type { ReactElement, ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import BottomSheetContext from './BottomSheetContext';
 import Footer from './Footer';
 import Header from './Header';
 import {
@@ -17,6 +18,7 @@ import {
   StyledKeyboardAvoidingView,
   StyledWrapper,
 } from './StyledBottomSheet';
+import ScrollView from './ScrollView';
 
 interface BottomSheetProps {
   /**
@@ -72,7 +74,6 @@ interface BottomSheetProps {
    * Testing id of the component.
    */
   testID?: string;
-
   /**
    * keyboardAvoidingView's props
    * */
@@ -90,7 +91,7 @@ const BottomSheet = ({
   onDismiss,
   showCloseButton = true,
   hasBackdrop = true,
-  showDivider = true,
+  showDivider = false,
   style,
   testID,
   keyboardAvoidingViewProps = {},
@@ -100,6 +101,8 @@ const BottomSheet = ({
   // Internal state to control modal open/close timing with animation
   const [visible, setVisibility] = useState<boolean>(open);
   const animatedValue = useRef(new Animated.Value(open ? 0 : 1));
+  const [internalShowDivider, setInternalShowDivider] =
+    useState<boolean>(showDivider);
 
   useEffect(() => {
     // Show the modal before the open animation start
@@ -146,6 +149,11 @@ const BottomSheet = ({
       })
     : 0;
 
+  const BottomSheetContextValue = useMemo(
+    () => ({ setInternalShowDivider }),
+    [setInternalShowDivider]
+  );
+
   return (
     <Modal
       visible={visible}
@@ -179,12 +187,15 @@ const BottomSheet = ({
             {header !== undefined ? (
               <Header
                 content={header}
-                showDivider={showDivider}
+                showDivider={internalShowDivider}
                 onRequestClose={onRequestClose}
                 showCloseButton={showCloseButton}
               />
             ) : null}
-            {children}
+            <BottomSheetContext.Provider value={BottomSheetContextValue}>
+              {children}
+            </BottomSheetContext.Provider>
+
             {footer ? (
               <Footer showDivider={showDivider}>{footer}</Footer>
             ) : null}
@@ -195,4 +206,6 @@ const BottomSheet = ({
   );
 };
 
-export default BottomSheet;
+export default Object.assign(BottomSheet, {
+  ScrollView,
+});

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -428,18 +428,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "borderBottomColor": "#e8e9ea",
-                        "borderBottomWidth": 1,
-                        "maxWidth": "100%",
-                      },
-                      undefined,
-                    ]
-                  }
-                />
                 <View
                   style={
                     Array [
@@ -464,18 +452,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   />
                 </View>
                 <View>
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "borderBottomColor": "#e8e9ea",
-                          "borderBottomWidth": 1,
-                          "maxWidth": "100%",
-                        },
-                        undefined,
-                      ]
-                    }
-                  />
                   <View
                     style={
                       Array [

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -395,18 +395,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={
@@ -1288,18 +1276,6 @@ Array [
             </View>
           </RCTScrollView>
           <View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "borderBottomColor": "#e8e9ea",
-                    "borderBottomWidth": 1,
-                    "maxWidth": "100%",
-                  },
-                  undefined,
-                ]
-              }
-            />
             <View
               style={
                 Array [
@@ -1985,18 +1961,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={
@@ -3055,18 +3019,6 @@ Array [
             </View>
           </RCTScrollView>
           <View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "borderBottomColor": "#e8e9ea",
-                    "borderBottomWidth": 1,
-                    "maxWidth": "100%",
-                  },
-                  undefined,
-                ]
-              }
-            />
             <View
               style={
                 Array [
@@ -3765,18 +3717,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={
@@ -4453,18 +4393,6 @@ Array [
             </View>
           </RCTScrollView>
           <View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "borderBottomColor": "#e8e9ea",
-                    "borderBottomWidth": 1,
-                    "maxWidth": "100%",
-                  },
-                  undefined,
-                ]
-              }
-            />
             <View
               style={
                 Array [

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -394,18 +394,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={
@@ -1893,18 +1881,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={
@@ -3528,18 +3504,6 @@ Array [
               </View>
             </View>
           </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
           <RCTScrollView
             ListFooterComponent={null}
             data={

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -641,18 +641,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "borderBottomColor": "#e8e9ea",
-                        "borderBottomWidth": 1,
-                        "maxWidth": "100%",
-                      },
-                      undefined,
-                    ]
-                  }
-                />
                 <View
                   style={
                     Array [
@@ -677,18 +665,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   />
                 </View>
                 <View>
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "borderBottomColor": "#e8e9ea",
-                          "borderBottomWidth": 1,
-                          "maxWidth": "100%",
-                        },
-                        undefined,
-                      ]
-                    }
-                  />
                   <View
                     style={
                       Array [

package/types/components/BottomSheet/BottomSheetContext.d.ts

@@ -0,0 +1,5 @@
+export declare type BottomSheetContextType = {
+    setInternalShowDivider: (value: boolean) => void;
+};
+declare const BottomSheetContext: import("react").Context<BottomSheetContextType>;
+export default BottomSheetContext;

package/types/components/BottomSheet/ScrollView.d.ts

@@ -0,0 +1,3 @@
+import { ScrollViewProps } from 'react-native';
+declare const BottomSheetScrollView: ({ scrollEventThrottle, ...props }: ScrollViewProps) => JSX.Element;
+export default BottomSheetScrollView;

package/types/components/BottomSheet/index.d.ts

@@ -1,6 +1,6 @@
-import { KeyboardAvoidingViewProps } from 'react-native';
 import type { ReactElement, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { KeyboardAvoidingViewProps } from 'react-native';
 interface BottomSheetProps {
     /**
      * Bottom sheet open state.
@@ -60,5 +60,7 @@ interface BottomSheetProps {
      * */
     keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
 }
-declare const BottomSheet: ({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, keyboardAvoidingViewProps, }: BottomSheetProps) => JSX.Element;
-export default BottomSheet;
+declare const _default: (({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, keyboardAvoidingViewProps, }: BottomSheetProps) => JSX.Element) & {
+    ScrollView: ({ scrollEventThrottle, ...props }: import("react-native").ScrollViewProps) => JSX.Element;
+};
+export default _default;