bootstrap-rn 0.1.3 → 0.1.5

package/dist/bootstrap-rn.esm.js

@@ -1,6 +1,6 @@
 import { OverlayProvider, useOverlayPosition, OverlayContainer } from '@react-native-aria/overlays';
 export { PortalProvider } from '@react-native-aria/overlays';
-import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, findNodeHandle, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1, ScrollView as ScrollView$1, Modal as Modal$1, Picker as Picker$1, Animated, Easing } from 'react-native';
+import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, findNodeHandle, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1, ScrollView as ScrollView$1, Modal as Modal$1, SafeAreaView, Picker as Picker$1, Animated, Easing } from 'react-native';
 import { getStylesForProperty, getPropertyName } from 'css-to-react-native';
 import { rgba as rgba$1, mix, parseToRgb } from 'polished';
 import React, { useState, useEffect, useRef, useContext, useMemo, createContext } from 'react';
@@ -830,6 +830,13 @@ function transform(children, theme) {
               order: value
             });
           }
+        } else if (child.name === 'margin-horizontal' && value === 'auto') {
+          // Workaround for react-native issue #350
+          // https://github.com/facebook/react-native/issues/350#issuecomment-375238958
+          Object.assign(definitions[0].declarations, {
+            marginLeft: value,
+            marginRight: value
+          });
         } else if (child.name === 'border-color' && value.split(' ').length === 1) {
           // Workaround for react-native issue #19981
           // https://github.com/facebook/react-native/issues/19981
@@ -2785,15 +2792,15 @@ function useViewport(initialViewport) {
     });
   }, []);
   useEffect(function () {
-    Dimensions.addEventListener('change', handleChange);
+    var subscription = Dimensions.addEventListener('change', handleChange);
     return function () {
-      Dimensions.removeEventListener('change', handleChange);
+      subscription.remove();
     };
   }, [viewport]);
   return viewport;
 }
 
-var propTypes$1p = {
+var propTypes$1q = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types,
   utilities: PropTypes.object,
@@ -2827,7 +2834,7 @@ function Provider(props) {
   }, /*#__PURE__*/React.createElement(OverlayProvider, null, children));
 }
 
-Provider.propTypes = propTypes$1p;
+Provider.propTypes = propTypes$1q;
 
 var TextStyleContext = /*#__PURE__*/React.createContext();
 TextStyleContext.displayName = 'TextStyleContext';
@@ -2911,7 +2918,7 @@ function useStyle(style, styleName) {
 }
 
 var _excluded$1r = ["children", "style", "textStyle", "styleName"];
-var propTypes$1o = {
+var propTypes$1p = {
   children: PropTypes.node,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -2947,12 +2954,12 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, children) : children);
 });
 View.displayName = 'View';
-View.propTypes = propTypes$1o;
+View.propTypes = propTypes$1p;
 
 var _excluded$1q = ["children", "color", "dismissible", "style", "textStyle"];
 
 var _templateObject$19, _templateObject2$L, _templateObject3$q;
-var propTypes$1n = {
+var propTypes$1o = {
   children: PropTypes.node.isRequired,
   color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
   dismissible: PropTypes.bool,
@@ -2997,12 +3004,12 @@ var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Alert.displayName = 'Alert';
-Alert.propTypes = propTypes$1n;
+Alert.propTypes = propTypes$1o;
 
 var _excluded$1p = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
 
-var _templateObject$18, _templateObject2$K, _templateObject3$p, _templateObject4$k, _templateObject5$i;
-var propTypes$1m = {
+var _templateObject$18, _templateObject2$K, _templateObject3$p, _templateObject4$m, _templateObject5$k;
+var propTypes$1n = {
   color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['muted', 'black-50', 'white-50'])),
   small: PropTypes.bool,
   mark: PropTypes.bool,
@@ -3017,8 +3024,8 @@ var styles$17 = StyleSheet.create({
   text: css(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral(["\n    font-family: $font-family-base;\n    font-size: $font-size-base;\n    font-weight: $font-weight-base;\n    line-height: $font-size-base * $line-height-base;\n  "]))),
   strong: css(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n    font-weight: $font-weight-bolder;\n  "]))),
   italic: css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n    font-style: italic;\n  "]))),
-  small: css(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
-  mark: css(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteral(["\n    padding: $mark-padding;\n    background-color: $mark-bg;\n  "])))
+  small: css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
+  mark: css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteral(["\n    padding: $mark-padding;\n    background-color: $mark-bg;\n  "])))
 });
 
 var getStyleName = function getStyleName(styleName, color) {
@@ -3071,12 +3078,12 @@ var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, element);
 });
 Text.displayName = 'Text';
-Text.propTypes = propTypes$1m;
+Text.propTypes = propTypes$1n;
 
 var _excluded$1o = ["children", "style"];
 
 var _templateObject$17, _templateObject2$J;
-var propTypes$1l = {
+var propTypes$1m = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -3097,12 +3104,12 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Badge.displayName = 'Badge';
-Badge.propTypes = propTypes$1l;
+Badge.propTypes = propTypes$1m;
 
 var _excluded$1n = ["children", "active", "style", "textStyle"];
 
 var _templateObject$16, _templateObject2$I, _templateObject3$o;
-var propTypes$1k = {
+var propTypes$1l = {
   children: PropTypes.node.isRequired,
   active: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
@@ -3132,7 +3139,7 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
-BreadcrumbItem.propTypes = propTypes$1k;
+BreadcrumbItem.propTypes = propTypes$1l;
 /*
 $breadcrumb-font-size:              null;
 $breadcrumb-padding-y:              0;
@@ -3150,7 +3157,7 @@ $breadcrumb-border-radius:          null;
 var _excluded$1m = ["children", "style"];
 
 var _templateObject$15;
-var propTypes$1j = {
+var propTypes$1k = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -3170,7 +3177,7 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), makeListChildren(children));
 });
 Breadcrumb.displayName = 'Breadcrumb';
-Breadcrumb.propTypes = propTypes$1j;
+Breadcrumb.propTypes = propTypes$1k;
 Breadcrumb.Item = BreadcrumbItem;
 /*
 $breadcrumb-font-size:              null;
@@ -3192,7 +3199,7 @@ ButtonGroupContext.displayName = 'ButtonGroupContext';
 var _excluded$1l = ["children", "size", "style"];
 
 var _templateObject$14;
-var propTypes$1i = {
+var propTypes$1j = {
   children: PropTypes.node.isRequired,
   size: PropTypes.oneOf(['lg', 'sm']),
   // eslint-disable-next-line react/forbid-prop-types
@@ -3221,12 +3228,12 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, makeListChildren(children)));
 });
 ButtonGroup.displayName = 'ButtonGroup';
-ButtonGroup.propTypes = propTypes$1i;
+ButtonGroup.propTypes = propTypes$1j;
 
 var _excluded$1k = ["children", "style"];
 
 var _templateObject$13;
-var propTypes$1h = {
+var propTypes$1i = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -3247,7 +3254,7 @@ var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 ButtonToolbar.displayName = 'ButtonToolbar';
-ButtonToolbar.propTypes = propTypes$1h;
+ButtonToolbar.propTypes = propTypes$1i;
 
 function useForcedContext(Context) {
   var context = useContext(Context);
@@ -3309,7 +3316,7 @@ function useAction(props, ref) {
 }
 
 var _excluded$1h = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
-var propTypes$1g = {
+var propTypes$1h = {
   children: PropTypes.node,
   active: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
@@ -3398,7 +3405,7 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } : children);
 });
 Pressable.displayName = 'Pressable';
-Pressable.propTypes = propTypes$1g;
+Pressable.propTypes = propTypes$1h;
 
 var _excluded$1g = ["active", "handlePress"];
 function useToggleButton(props) {
@@ -3425,8 +3432,8 @@ function useToggleButton(props) {
 
 var _excluded$1f = ["children", "color", "size", "outline", "first", "last", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
-var _templateObject$12, _templateObject2$H, _templateObject3$n, _templateObject4$j, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$a, _templateObject9$6, _templateObject10$6, _templateObject11$5, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
-var propTypes$1f = {
+var _templateObject$12, _templateObject2$H, _templateObject3$n, _templateObject4$l, _templateObject5$j, _templateObject6$g, _templateObject7$c, _templateObject8$b, _templateObject9$8, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$5, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
+var propTypes$1g = {
   children: PropTypes.node.isRequired,
   color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
   size: PropTypes.oneOf(['lg', 'sm']),
@@ -3451,7 +3458,7 @@ var styles$11 = StyleSheet.create(_objectSpread2(_objectSpread2({
 }, each(THEME_COLORS, function (color, value) {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n      // @include box-shadow($btn-box-shadow);\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n        border-color: ", ";\n        /* @if $enable-shadows {\n          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n        } @else {\n          // Avoid using mixin so we can pass custom focus shadow properly\n          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n        } */\n      }\n\n      &:active {\n        background-color: ", ";\n        // Remove CSS gradients if they're enabled\n        // background-image: if($enable-gradients, none, null);\n        border-color: ", ";\n      }\n    "])), value, value, shadeColor(function (t) {
+  return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n      // @include box-shadow($btn-box-shadow);\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n        border-color: ", ";\n        /* @if $enable-shadows {\n          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n        } @else {\n          // Avoid using mixin so we can pass custom focus shadow properly\n          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n        } */\n      }\n\n      &:active {\n        background-color: ", ";\n        // Remove CSS gradients if they're enabled\n        // background-image: if($enable-gradients, none, null);\n        border-color: ", ";\n      }\n    "])), value, value, shadeColor(function (t) {
     return t['btn-hover-bg-shade-amount'];
   }, value), shadeColor(function (t) {
     return t['btn-hover-border-shade-amount'];
@@ -3463,11 +3470,11 @@ var styles$11 = StyleSheet.create(_objectSpread2(_objectSpread2({
     return t['btn-active-bg-shade-amount'];
   }, value), shadeColor(function (t) {
     return t['btn-active-border-shade-amount'];
-  }, value))), _defineProperty(_ref, ".btn-".concat(color, "-text"), css(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), colorContrast(value), colorContrast(value), colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-active"), css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteral(["\n      background-color: ", ";\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: ", ";\n    "])), shadeColor(function (t) {
+  }, value))), _defineProperty(_ref, ".btn-".concat(color, "-text"), css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), colorContrast(value), colorContrast(value), colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-active"), css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteral(["\n      background-color: ", ";\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: ", ";\n    "])), shadeColor(function (t) {
     return t['btn-active-bg-shade-amount'];
   }, value), shadeColor(function (t) {
     return t['btn-active-border-shade-amount'];
-  }, value))), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteral(["\n      $disabled-background: ", ";\n      $disabled-border: ", ";\n\n      background-color: $disabled-background;\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: $disabled-border;\n    "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, "-disabled-text"), css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, "-text"), css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
+  }, value))), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteral(["\n      $disabled-background: ", ";\n      $disabled-border: ", ";\n\n      background-color: $disabled-background;\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: $disabled-border;\n    "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, "-disabled-text"), css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, "-text"), css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
 })), {}, {
   '.btn-link-text': css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $btn-link-color;\n    text-decoration-color: $btn-link-color; // added for bootstrap-rn\n    text-decoration-line: $link-decoration;\n\n    &:hover {\n      color: $btn-link-hover-color;\n      text-decoration-color: $btn-link-hover-color; // added for bootstrap-rn\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    &:focus {\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    // No need for an active state here\n  "]))),
   '.btn-link-text-disabled': css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n    color: $btn-link-disabled-color;\n  "]))),
@@ -3475,7 +3482,7 @@ var styles$11 = StyleSheet.create(_objectSpread2(_objectSpread2({
   '.btn-lg-text': css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral(["\n    line-height: $btn-font-size-lg * $btn-line-height;\n    font-size: $btn-font-size-lg;\n  "]))),
   '.btn-sm': css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral(["\n    padding: $btn-padding-y-sm $btn-padding-x-sm;\n    // Manually declare to provide an override to the browser default\n    border-radius: $btn-border-radius-sm;\n  "]))),
   '.btn-sm-text': css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteral(["\n    line-height: $btn-font-size-sm * $btn-line-height;\n    font-size: $btn-font-size-sm;\n  "]))),
-  '.btn-group > .btn': css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n    position: relative;\n    flex: 1 1 auto;\n\n    &:hover {\n      z-index: 1;\n    }\n    &:focus {\n      z-index: 1;\n    }\n    &:active {\n      z-index: 1;\n    }\n  "]))),
+  '.btn-group > .btn': css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n    position: relative;\n    // flex: 1 1 auto;\n\n    &:hover {\n      z-index: 1;\n    }\n    &:focus {\n      z-index: 1;\n    }\n    &:active {\n      z-index: 1;\n    }\n  "]))),
   '.btn-group > .btn-active': css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    z-index: 2; // 1;\n  "]))),
   '.btn-group > .btn-not-first': css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    margin-left: -$btn-border-width;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  "]))),
   '.btn-group > .btn-not-last': css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  "])))
@@ -3539,13 +3546,13 @@ var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Button.displayName = 'Button';
-Button.propTypes = propTypes$1f;
+Button.propTypes = propTypes$1g;
 Button.useToggle = useToggleButton;
 
 var _excluded$1e = ["children", "style", "textStyle"];
 
 var _templateObject$11, _templateObject2$G;
-var propTypes$1e = {
+var propTypes$1f = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -3574,12 +3581,12 @@ var Blockquote = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Blockquote.displayName = 'Blockquote';
-Blockquote.propTypes = propTypes$1e;
+Blockquote.propTypes = propTypes$1f;
 
 var _excluded$1d = ["children", "style", "textStyle"];
 
 var _templateObject$10, _templateObject2$F;
-var propTypes$1d = {
+var propTypes$1e = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -3587,7 +3594,7 @@ var propTypes$1d = {
   textStyle: PropTypes.any
 };
 var styles$$ = StyleSheet.create({
-  body: css(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n  "]))),
+  body: css(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    height: 100%; // added for bootstrap-rn\n  "]))),
   'body-text': css(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteral(["\n    color: $body-color;\n    text-align: $body-text-align;\n  "])))
 });
 var Body = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -3605,12 +3612,12 @@ var Body = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Body.displayName = 'Body';
-Body.propTypes = propTypes$1d;
+Body.propTypes = propTypes$1e;
 
 var _excluded$1c = ["children", "style", "textStyle"];
 
 var _templateObject$$, _templateObject2$E;
-var propTypes$1c = {
+var propTypes$1d = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -3636,12 +3643,12 @@ var CardBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 CardBody.displayName = 'CardBody';
-CardBody.propTypes = propTypes$1c;
+CardBody.propTypes = propTypes$1d;
 
 var _excluded$1b = ["children", "style", "textStyle"];
 
 var _templateObject$_, _templateObject2$D;
-var propTypes$1b = {
+var propTypes$1c = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -3667,12 +3674,12 @@ var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 CardHeader.displayName = 'CardHeader';
-CardHeader.propTypes = propTypes$1b;
+CardHeader.propTypes = propTypes$1c;
 
 var _excluded$1a = ["children", "style", "textStyle"];
 
 var _templateObject$Z, _templateObject2$C;
-var propTypes$1a = {
+var propTypes$1b = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -3698,12 +3705,12 @@ var CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 CardFooter.displayName = 'CardFooter';
-CardFooter.propTypes = propTypes$1a;
+CardFooter.propTypes = propTypes$1b;
 
 var _excluded$19 = ["children", "style"];
 
 var _templateObject$Y;
-var propTypes$19 = {
+var propTypes$1a = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -3723,15 +3730,21 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Card.displayName = 'Card';
-Card.propTypes = propTypes$19;
+Card.propTypes = propTypes$1a;
 Card.Header = CardHeader;
 Card.Body = CardBody;
 Card.Footer = CardFooter;
 
+var ModalContext = /*#__PURE__*/React.createContext();
+ModalContext.displayName = 'ModalContext';
+
+var OffcanvasContext = /*#__PURE__*/React.createContext();
+OffcanvasContext.displayName = 'OffcanvasContext';
+
 var _excluded$18 = ["children", "disabled", "style", "textStyle"];
 
-var _templateObject$X, _templateObject2$B, _templateObject3$m;
-var propTypes$18 = {
+var _templateObject$X, _templateObject2$B, _templateObject3$m, _templateObject4$k, _templateObject5$i;
+var propTypes$19 = {
   children: PropTypes.node,
   disabled: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
@@ -3742,7 +3755,11 @@ var propTypes$18 = {
 var styles$W = StyleSheet.create({
   '.btn-close': css(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n    // Workaround for missing box-sizing in react native.\n    $additional-width: $btn-close-padding-x * 2;\n    $additional-height: $btn-close-padding-y * 2;\n\n    // box-sizing: content-box;\n    width: $btn-close-width + $additional-width;\n    height: $btn-close-height + $additional-height;\n    padding: $btn-close-padding-y $btn-close-padding-x;\n    background: transparent;\n    border-width: 0; // for button elements\n    // @include border-radius();\n    opacity: $btn-close-opacity;\n\n    &:hover {\n      opacity: $btn-close-hover-opacity;\n    }\n\n    &:focus {\n      // outline: 0;\n      // box-shadow: $btn-close-focus-shadow;\n      opacity: $btn-close-focus-opacity;\n    }\n  "]))),
   '.btn-close-text': css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteral(["\n    color: $btn-close-color;\n\n    // Override <a>'s hover style\n    &:hover {\n      color: $btn-close-color;\n      text-decoration: none;\n    }\n  "]))),
-  '.btn-close-disabled': css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    // user-select: none;\n    opacity: $btn-close-disabled-opacity;\n  "])))
+  '.btn-close-disabled': css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    // user-select: none;\n    opacity: $btn-close-disabled-opacity;\n  "]))),
+  // Modal styles
+  '.modal-header .btn-close': css(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteral(["\n    padding: $modal-header-padding-y * 0.5 $modal-header-padding-x * 0.5;\n    margin: -0.5 * $modal-header-padding-y -0.5 * $modal-header-padding-x -0.5 *\n      $modal-header-padding-y auto;\n\n    // Workaround for missing box-sizing in react native.\n    width: $btn-close-width + $modal-header-padding-x;\n    height: $btn-close-height + $modal-header-padding-y;\n  "]))),
+  // Offcanvas styles
+  '.offcanvas-header .btn-close': css(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteral(["\n    padding: $offcanvas-padding-y * 0.5 $offcanvas-padding-x * 0.5;\n    margin-top: -0.5 * $offcanvas-padding-y;\n    margin-right: -0.5 * $offcanvas-padding-x;\n    margin-bottom: -0.5 * $offcanvas-padding-y;\n\n    // Workaround for missing box-sizing in react native.\n    width: $btn-close-width + $offcanvas-padding-x;\n    height: $btn-close-height + $offcanvas-padding-y;\n  "])))
 });
 var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   props.children;
@@ -3752,7 +3769,11 @@ var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       textStyle = props.textStyle,
       elementProps = _objectWithoutProperties(props, _excluded$18);
 
-  var classes = getStyles(styles$W, ['.btn-close', disabled && '.btn-close-disabled']);
+  var modal = useContext(ModalContext);
+  var offcanvas = useContext(OffcanvasContext);
+  var classes = getStyles(styles$W, ['.btn-close', disabled && '.btn-close-disabled', // Modal styles
+  modal && '.modal-header .btn-close', // Offcanvas styles
+  offcanvas && '.offcanvas-header .btn-close']);
   var textClasses = getStyles(styles$W, ['.btn-close-text']);
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
     ref: ref,
@@ -3762,7 +3783,7 @@ var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), StyleSheet.value('btn-close-bg'));
 });
 CloseButton.displayName = 'CloseButton';
-CloseButton.propTypes = propTypes$18;
+CloseButton.propTypes = propTypes$19;
 
 var CollapseContext = /*#__PURE__*/React.createContext();
 CollapseContext.displayName = 'CollapseContext';
@@ -3821,7 +3842,7 @@ function useCollapse(defaultVisible, controlledVisible, onToggle) {
   }, [visible]);
 }
 
-var propTypes$17 = {
+var propTypes$18 = {
   children: PropTypes.node.isRequired,
   defaultVisible: PropTypes.bool,
   visible: PropTypes.bool,
@@ -3841,7 +3862,7 @@ var CollapseProvider = function CollapseProvider(props) {
 };
 
 CollapseProvider.displayName = 'CollapseProvider';
-CollapseProvider.propTypes = propTypes$17;
+CollapseProvider.propTypes = propTypes$18;
 
 var _excluded$17 = ["onPress"];
 function useToggleCollapse(props) {
@@ -3863,7 +3884,7 @@ function useToggleCollapse(props) {
 }
 
 var _excluded$16 = ["children"];
-var propTypes$16 = {
+var propTypes$17 = {
   children: PropTypes.node
 };
 var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -3884,7 +3905,7 @@ var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Collapse.displayName = 'Collapse';
-Collapse.propTypes = propTypes$16;
+Collapse.propTypes = propTypes$17;
 Collapse.Provider = CollapseProvider;
 Collapse.useToggle = useToggleCollapse;
 
@@ -3911,8 +3932,8 @@ NavbarContext.displayName = 'NavbarContext';
 
 var _excluded$15 = ["fluid", "style"];
 
-var _templateObject$W, _templateObject2$A, _templateObject3$l, _templateObject4$i, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$9;
-var propTypes$15 = {
+var _templateObject$W, _templateObject2$A, _templateObject3$l, _templateObject4$j, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$a;
+var propTypes$16 = {
   children: PropTypes.node.isRequired,
   fluid: PropTypes.oneOf([true].concat(_toConsumableArray(Object.keys(CONTAINER_MAX_WIDTHS)))),
   // eslint-disable-next-line react/forbid-prop-types
@@ -3940,25 +3961,25 @@ var styles$V = StyleSheet.create(_objectSpread2({
   }, function (t) {
     return t['container-max-widths'].xxl;
   }),
-  '.container-lg': css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
+  '.container-lg': css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
     return t['container-max-widths'].lg;
   }, function (t) {
     return t['container-max-widths'].xl;
   }, function (t) {
     return t['container-max-widths'].xxl;
   }),
-  '.container-xl': css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
+  '.container-xl': css(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
     return t['container-max-widths'].xl;
   }, function (t) {
     return t['container-max-widths'].xxl;
   }),
-  '.container-xxl': css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
+  '.container-xxl': css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
     return t['container-max-widths'].xxl;
   }),
   // Navbar styles
-  '.navbar .container': css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n  "])))
+  '.navbar .container': css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n  "])))
 }, each(GRID_BREAKPOINTS, function (breakpoint) {
-  return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .container"), css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex-wrap: nowrap;\n      }\n    "])), next(breakpoint)));
+  return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .container"), css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex-wrap: nowrap;\n      }\n    "])), next(breakpoint)));
 })));
 var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$fluid = props.fluid,
@@ -3976,12 +3997,12 @@ var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 Container.displayName = 'Container';
-Container.propTypes = propTypes$15;
+Container.propTypes = propTypes$16;
 
-var _excluded$14 = ["children", "type", "value", "onChange", "onPress", "label", "disabled", "valid", "invalid", "style", "inputStyle", "labelStyle"];
+var _excluded$14 = ["children", "type", "value", "onChange", "onPress", "label", "disabled", "valid", "invalid", "style", "inputStyle", "labelStyle", "labelTextStyle"];
 
-var _templateObject$V, _templateObject2$z, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$8, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$3, _templateObject13$3;
-var propTypes$14 = {
+var _templateObject$V, _templateObject2$z, _templateObject3$k, _templateObject4$i, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$9, _templateObject9$7, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$4;
+var propTypes$15 = {
   children: PropTypes.node,
   type: PropTypes.oneOf(['checkbox', 'radio', 'switch']).isRequired,
   value: PropTypes.bool.isRequired,
@@ -3996,27 +4017,29 @@ var propTypes$14 = {
   // eslint-disable-next-line react/forbid-prop-types
   inputStyle: PropTypes.any,
   // eslint-disable-next-line react/forbid-prop-types
-  labelStyle: PropTypes.any
+  labelStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  labelTextStyle: PropTypes.any
 };
 var styles$U = StyleSheet.create(_objectSpread2({
   '.form-check': css(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n    // display: block;\n    flex-direction: row; // added for bootstrap-rn\n    min-height: $form-check-min-height;\n    padding-left: $form-check-padding-start;\n    margin-bottom: $form-check-margin-bottom;\n  "]))),
   '.form-check-disabled': css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n    opacity: $form-check-label-disabled-opacity;\n  "]))),
   '.form-check-input': css(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteral(["\n    // Use additional variables instead of brackets, because brackets not supported yet.\n    $lineHeight: $line-height-base * 1rem;\n    $rawMarginTop: $lineHeight - $form-check-input-width;\n\n    // float: left;\n    margin-left: $form-check-padding-start * -1;\n    margin-right: $form-check-padding-start - $form-check-input-width; // added for bootstrap-rn\n\n    width: $form-check-input-width;\n    height: $form-check-input-width;\n    margin-top: $rawMarginTop * 0.5; // line-height minus check height\n    // vertical-align: top;\n    background-color: $form-check-input-bg;\n    // background-repeat: no-repeat;\n    // background-position: center;\n    // background-size: contain;\n    border: $form-check-input-border;\n    @include platform(web) {\n      appearance: none;\n      user-select: none; // added for bootstrap-rn\n    }\n    // color-adjust: exact; // Keep themed appearance for print\n    // @include transition($form-check-transition);\n\n    &:active {\n      // filter: $form-check-input-active-filter;\n    }\n\n    &:focus {\n      border-color: $form-check-input-focus-border;\n      // outline: 0;\n      // box-shadow: $form-check-input-focus-box-shadow;\n    }\n  "]))),
-  '.form-check-input-checkbox': css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteral(["\n    border-radius: $form-check-input-border-radius;\n  "]))),
-  '.form-check-input-radio': css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteral(["\n    border-radius: $form-check-radio-border-radius;\n  "]))),
-  '.form-check-input-checked': css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteral(["\n    background-color: $form-check-input-checked-bg-color;\n    border-color: $form-check-input-checked-border-color;\n  "]))),
-  '.form-check-label': css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteral(["\n    color: $form-check-label-color;\n    @include platform(web) {\n      cursor: $form-check-label-cursor;\n    }\n  "]))),
-  '.form-switch': css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n    padding-left: $form-switch-padding-start;\n  "]))),
-  '.form-check-input-switch': css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n    width: $form-switch-width;\n    margin-left: $form-switch-padding-start * -1;\n    margin-right: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn\n    border-radius: $form-switch-border-radius;\n    // @include transition($form-switch-transition);\n    align-items: flex-start; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "]))),
-  '.form-check-input-switch-checked': css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n    align-items: flex-end; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "])))
+  '.form-check-input-checkbox': css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n    border-radius: $form-check-input-border-radius;\n  "]))),
+  '.form-check-input-radio': css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n    border-radius: $form-check-radio-border-radius;\n  "]))),
+  '.form-check-input-checked': css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteral(["\n    background-color: $form-check-input-checked-bg-color;\n    border-color: $form-check-input-checked-border-color;\n  "]))),
+  '.form-check-label': css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteral(["\n    color: $form-check-label-color;\n    @include platform(web) {\n      cursor: $form-check-label-cursor;\n    }\n  "]))),
+  '.form-switch': css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n    padding-left: $form-switch-padding-start;\n  "]))),
+  '.form-check-input-switch': css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n    width: $form-switch-width;\n    margin-left: $form-switch-padding-start * -1;\n    margin-right: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn\n    border-radius: $form-switch-border-radius;\n    // @include transition($form-switch-transition);\n    align-items: flex-start; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "]))),
+  '.form-check-input-switch-checked': css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteral(["\n    align-items: flex-end; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "])))
 }, each(FORM_VALIDATION_STATES, function (state, data) {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, ".form-check-input.is-".concat(state), css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n      border: ", ";\n\n      &:focus {\n        // box-shadow: $focus-box-shadow;\n      }\n    "])), function (t) {
+  return _ref = {}, _defineProperty(_ref, ".form-check-input.is-".concat(state), css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n      border: ", ";\n\n      &:focus {\n        // box-shadow: $focus-box-shadow;\n      }\n    "])), function (t) {
     return data(t).color;
-  })), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), function (t) {
+  })), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), function (t) {
     return data(t).color;
-  })), _defineProperty(_ref, ".form-check-label.is-".concat(state), css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (t) {
+  })), _defineProperty(_ref, ".form-check-label.is-".concat(state), css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (t) {
     return data(t).color;
   })), _ref;
 })));
@@ -4058,6 +4081,7 @@ var CheckInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = modifierProps.style,
       inputStyle = modifierProps.inputStyle,
       labelStyle = modifierProps.labelStyle,
+      labelTextStyle = modifierProps.labelTextStyle,
       elementProps = _objectWithoutProperties(modifierProps, _excluded$14);
 
   if (!children && !label) {
@@ -4067,7 +4091,7 @@ var CheckInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var classes = getStyles(styles$U, ['.form-check', type === 'switch' && '.form-switch', disabled && '.form-check-disabled']);
   var inputClasses = getStyles(styles$U, ['.form-check-input', type === 'checkbox' && '.form-check-input-checkbox', type === 'radio' && '.form-check-input-radio', type === 'switch' && '.form-check-input-switch', value && '.form-check-input-checked', type === 'switch' && value && '.form-check-input-switch-checked', valid && '.form-check-input.is-valid', valid && value && '.form-check-input-checked.is-valid', invalid && '.form-check-input.is-invalid', invalid && value && '.form-check-input-checked.is-invalid']);
-  var labelClasses = getStyles(styles$U, ['.form-check-label', valid && '.form-check-label.is-valid', invalid && '.form-check-label.is-invalid']); // TODO &:focus, &:active
+  var labelTextClasses = getStyles(styles$U, ['.form-check-label', valid && '.form-check-label.is-valid', invalid && '.form-check-label.is-invalid']); // TODO &:focus, &:active
 
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
     ref: modifierRef,
@@ -4081,12 +4105,13 @@ var CheckInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: [classes, style]
   }), /*#__PURE__*/React.createElement(View, {
     style: [inputClasses, inputStyle]
-  }, getSvg(type, value)), children && /*#__PURE__*/React.createElement(Text, {
-    style: [labelClasses, labelStyle]
+  }, getSvg(type, value)), children && /*#__PURE__*/React.createElement(View, {
+    style: labelStyle,
+    textStyle: [labelTextClasses, labelTextStyle]
   }, children));
 });
 CheckInput.displayName = 'CheckInput';
-CheckInput.propTypes = propTypes$14;
+CheckInput.propTypes = propTypes$15;
 
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var elementProps = _extends({}, props);
@@ -4100,11 +4125,11 @@ Checkbox.displayName = 'Checkbox';
 
 var _excluded$13 = ["children", "size", "sizeSm", "sizeMd", "sizeLg", "sizeXl", "style"];
 
-var _templateObject$U, _templateObject2$y, _templateObject3$j, _templateObject4$g, _templateObject5$e;
+var _templateObject$U, _templateObject2$y, _templateObject3$j, _templateObject4$h, _templateObject5$f;
 var sizes = makeArray(GRID_COLUMNS).map(function (v) {
   return v + 1;
 });
-var propTypes$13 = {
+var propTypes$14 = {
   children: PropTypes.node.isRequired,
   size: PropTypes.oneOf(['auto'].concat(_toConsumableArray(sizes))),
   sizeSm: PropTypes.oneOf(['auto'].concat(_toConsumableArray(sizes))),
@@ -4115,14 +4140,14 @@ var propTypes$13 = {
   style: PropTypes.any
 };
 var styles$T = StyleSheet.create(_objectSpread2({
-  '*': css(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n    // Add box sizing if only the grid is loaded\n    /* box-sizing: if(\n      variable-exists(include-column-box-sizing) and $include-column-box-sizing,\n      border-box,\n      null\n    ); */\n    // Prevent columns from becoming too narrow when at smaller grid tiers by\n    // always setting \"width: 100%;\". This works because we set the width\n    // later on to override this initial width.\n    flex-shrink: 0;\n    width: 100%;\n    max-width: 100%; // Prevent \".col-auto\", \".col\" (& responsive variants) from breaking out the grid\n    padding-right: $grid-gutter-width * 0.5;\n    padding-left: $grid-gutter-width * 0.5;\n    margin-top: 0;\n  "])))
+  '*': css(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n    // Add box sizing if only the grid is loaded\n    /* box-sizing: if(\n      variable-exists(include-column-box-sizing) and $include-column-box-sizing,\n      border-box,\n      null\n    ); */\n    // Prevent columns from becoming too narrow when at smaller grid tiers by\n    // always setting \"width: 100%;\". This works because we set the width\n    // later on to override this initial width.\n    flex-shrink: 0;\n    width: 100%;\n    @include platform(web) {\n      max-width: 100%; // Prevent \".col-auto\", \".col\" (& responsive variants) from breaking out the grid\n    }\n    padding-right: $grid-gutter-width * 0.5;\n    padding-left: $grid-gutter-width * 0.5;\n    margin-top: 0;\n  "])))
 }, each(GRID_BREAKPOINTS, function (breakpoint) {
   var _objectSpread2$1;
 
   return _objectSpread2((_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint)), css(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4\n      }\n    "])), breakpoint)), _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint), "-auto"), css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex: 0 0 auto;\n        width: auto;\n      }\n    "])), breakpoint)), _objectSpread2$1), normalize$1(makeArray(GRID_COLUMNS - 1, function (i) {
     var _ref;
 
-    return _ref = {}, _defineProperty(_ref, ".col".concat(infix(breakpoint), "-").concat(i + 1), css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            flex: 0 0 auto;\n            width: ", "%;\n          }\n        "])), breakpoint, (i + 1) / GRID_COLUMNS * 100)), _defineProperty(_ref, ".offset".concat(infix(breakpoint), "-").concat(i), css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            margin-left: ", "%;\n          }\n        "])), breakpoint, i / GRID_COLUMNS * 100)), _ref;
+    return _ref = {}, _defineProperty(_ref, ".col".concat(infix(breakpoint), "-").concat(i + 1), css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            flex: 0 0 auto;\n            width: ", "%;\n          }\n        "])), breakpoint, (i + 1) / GRID_COLUMNS * 100)), _defineProperty(_ref, ".offset".concat(infix(breakpoint), "-").concat(i), css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            margin-left: ", "%;\n          }\n        "])), breakpoint, i / GRID_COLUMNS * 100)), _ref;
   })));
 })));
 var Col = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -4142,12 +4167,12 @@ var Col = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Col.displayName = 'Col';
-Col.propTypes = propTypes$13;
+Col.propTypes = propTypes$14;
 
 var _excluded$12 = ["children", "style"];
 
 var _templateObject$T;
-var propTypes$12 = {
+var propTypes$13 = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -4170,11 +4195,44 @@ var Code = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Code.displayName = 'Code';
-Code.propTypes = propTypes$12;
+Code.propTypes = propTypes$13;
 
 var DropdownContext = /*#__PURE__*/React.createContext();
 DropdownContext.displayName = 'DropdownContext';
 
+var _excluded$11 = ["onPress"];
+function useToggleDropdown(props) {
+  var context = useForcedContext(DropdownContext);
+
+  var handlePress = props.onPress,
+      restProps = _objectWithoutProperties(props, _excluded$11);
+
+  return _objectSpread2(_objectSpread2({}, restProps), {}, {
+    nativeID: context.identifier,
+    ref: context.toggleRef,
+    onPress: function onPress(event) {
+      if (handlePress) handlePress(event);
+      context.setVisible(function (value) {
+        return !value;
+      });
+    },
+    accessibilityHasPopup: true,
+    accessibilityExpanded: context.visible
+  });
+}
+
+var propTypes$12 = {
+  children: PropTypes.func.isRequired
+};
+
+var DropdownToggle = function DropdownToggle(props) {
+  var children = props.children;
+  return children(useToggleDropdown({}));
+};
+
+DropdownToggle.displayName = 'DropdownToggle';
+DropdownToggle.propTypes = propTypes$12;
+
 var propTypes$11 = {
   children: PropTypes.func.isRequired,
   placement: PropTypes.string.isRequired,
@@ -4225,37 +4283,64 @@ Overlay.propTypes = propTypes$11;
 
 var _templateObject$S;
 var propTypes$10 = {
+  toggleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   dialogRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   onClose: PropTypes.func,
+  autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['inside', 'outside'])]),
   backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])])
 };
 var styles$R = StyleSheet.create({
   handler: css(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    position: absolute;\n    flex-grow: 1;\n  "])))
 });
+var initialState = {
+  waitingForMouseUp: false,
+  isDialogClick: false
+};
 
 var BackdropHandler = function BackdropHandler(props) {
-  var dialogRef = props.dialogRef,
+  var toggleRef = props.toggleRef,
+      dialogRef = props.dialogRef,
       handleClose = props.onClose,
       _props$backdrop = props.backdrop,
-      backdrop = _props$backdrop === void 0 ? true : _props$backdrop;
+      backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
+      _props$autoClose = props.autoClose,
+      autoClose = _props$autoClose === void 0 ? 'outside' : _props$autoClose;
 
   if (Platform.OS === 'web') {
-    var waitingForMouseUp = useRef(false);
-    var ignoreBackdropClick = useRef(false);
+    var state = useMemo(function () {
+      return initialState;
+    }, []);
     useEffect(function () {
+      var toggle = toggleRef ? findNodeHandle(toggleRef.current) : undefined;
       var dialog = findNodeHandle(dialogRef.current);
 
       var handleDialogMouseDown = function handleDialogMouseDown() {
-        waitingForMouseUp.current = true;
+        state.waitingForMouseUp = true;
       };
 
-      var handleDocumentClick = function handleDocumentClick() {
-        if (backdrop === 'static') {
+      var handleDocumentClick = function handleDocumentClick(_ref) {
+        var target = _ref.target;
+
+        if (backdrop === 'static' || autoClose === false) {
           return;
-        }
+        } // Click outside -> return if autoClose is inside.
 
-        if (ignoreBackdropClick.current) {
-          ignoreBackdropClick.current = false;
+
+        if (!state.isDialogClick && autoClose === 'inside') {
+          return;
+        } // Click inside / on dialog -> return if autoClose is outside.
+
+
+        if (state.isDialogClick) {
+          state.isDialogClick = false;
+
+          if (autoClose === 'outside') {
+            return;
+          }
+        } // Click on toggle -> return always.
+
+
+        if (toggle && (target === toggle || toggle.contains(target))) {
           return;
         }
 
@@ -4263,22 +4348,23 @@ var BackdropHandler = function BackdropHandler(props) {
       };
 
       var handleDocumentMouseUp = function handleDocumentMouseUp() {
-        if (waitingForMouseUp.current) {
-          ignoreBackdropClick.current = true;
+        if (state.waitingForMouseUp) {
+          state.isDialogClick = true;
         }
 
-        waitingForMouseUp.current = false;
+        state.waitingForMouseUp = false;
       };
 
-      dialog.addEventListener('mousedown', handleDialogMouseDown);
-      document.addEventListener('click', handleDocumentClick);
-      document.addEventListener('mouseup', handleDocumentMouseUp);
+      dialog.addEventListener('mousedown', handleDialogMouseDown); // See https://github.com/necolas/react-native-web/issues/2115
+
+      document.addEventListener('click', handleDocumentClick, true);
+      document.addEventListener('mouseup', handleDocumentMouseUp, true);
       return function () {
         dialog.addEventListener('mousedown', handleDialogMouseDown);
-        document.removeEventListener('click', handleDocumentClick);
-        document.removeEventListener('mouseup', handleDocumentMouseUp);
+        document.removeEventListener('click', handleDocumentClick, true);
+        document.removeEventListener('mouseup', handleDocumentMouseUp, true);
       };
-    }, [backdrop]);
+    }, [backdrop, autoClose]);
     return null;
   }
 
@@ -4299,9 +4385,9 @@ var BackdropHandler = function BackdropHandler(props) {
 BackdropHandler.displayName = 'BackdropHandler';
 BackdropHandler.propTypes = propTypes$10;
 
-var _excluded$11 = ["children", "start", "end", "style", "textStyle"];
+var _excluded$10 = ["children", "start", "end", "style", "textStyle"];
 
-var _templateObject$R, _templateObject2$x, _templateObject3$i;
+var _templateObject$R, _templateObject2$x, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$9, _templateObject8$8, _templateObject9$6, _templateObject10$6;
 var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
 var propTypes$$ = {
   children: PropTypes.node.isRequired,
@@ -4312,11 +4398,23 @@ var propTypes$$ = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-var styles$Q = StyleSheet.create({
+var styles$Q = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
   '.dropdown-menu': css(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: $zindex-dropdown;\n    // display: none; // none by default, but block on \"open\" of the menu\n    min-width: $dropdown-min-width;\n    padding: $dropdown-padding-y $dropdown-padding-x;\n    margin: 0; // Override default margin of ul\n    // list-style: none;\n    background-color: $dropdown-bg;\n    // background-clip: padding-box;\n    border: $dropdown-border-width solid $dropdown-border-color;\n    border-radius: $dropdown-border-radius;\n    // @include box-shadow($dropdown-box-shadow);\n  "]))),
-  '.dropdown-menu-text': css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n    font-size: $dropdown-font-size;\n    color: $dropdown-color;\n    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n  "]))),
-  backdrop: css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteral(["\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    position: absolute;\n    flex-grow: 1;\n  "])))
-});
+  '.dropdown-menu[data-bs-popper]': css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n    top: 100%;\n    left: 0;\n    margin-top: $dropdown-spacer;\n  "])))
+}, each(GRID_BREAKPOINTS, function (breakpoint) {
+  var _ref;
+
+  return _ref = {}, _defineProperty(_ref, ".dropdown-menu".concat(infix(breakpoint), "-start[data-bs-popper]"), css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        right: auto;\n        left: 0;\n      }\n    "])), breakpoint)), _defineProperty(_ref, ".dropdown-menu".concat(infix(breakpoint), "-end[data-bs-popper]"), css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        right: 0;\n        left: auto;\n      }\n    "])), breakpoint)), _ref;
+})), {}, {
+  '.dropup .dropdown-menu[data-bs-popper]': css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteral(["\n    top: auto;\n    bottom: 100%;\n    margin-top: 0;\n    margin-bottom: $dropdown-spacer;\n  "]))),
+  '.dropend .dropdown-menu[data-bs-popper]': css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteral(["\n    top: 0;\n    right: auto;\n    left: 100%;\n    margin-top: 0;\n    margin-left: $dropdown-spacer;\n  "]))),
+  '.dropstart .dropdown-menu[data-bs-popper]': css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 100%;\n    left: auto;\n    margin-top: 0;\n    margin-right: $dropdown-spacer;\n  "]))),
+  '.navbar-nav .dropdown-menu': css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n    position: relative; // static;\n  "])))
+}, each(GRID_BREAKPOINTS, function (breakpoint) {
+  return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .dropdown-menu"), css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: absolute;\n      }\n    "])), next(breakpoint)));
+})), {}, {
+  '.dropdown-menu-text': css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteral(["\n    font-size: $dropdown-font-size;\n    color: $dropdown-color;\n    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n  "])))
+}));
 
 var getAlignment = function getAlignment(media, start, end) {
   var alignStart = typeof start === 'boolean' ? start : media.up(start);
@@ -4351,39 +4449,68 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       end = _props$end === void 0 ? false : _props$end,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$11);
+      elementProps = _objectWithoutProperties(props, _excluded$10);
 
-  var dropdown = useForcedContext(DropdownContext);
+  var navbar = useContext(NavbarContext);
   var media = useMedia();
+  var dialogRef = useRef();
+  var dropdown = useForcedContext(DropdownContext);
   var identifier = dropdown.identifier,
-      direction = dropdown.direction,
-      triggerRef = dropdown.triggerRef,
+      toggleRef = dropdown.toggleRef,
       visible = dropdown.visible,
-      setVisible = dropdown.setVisible;
+      setVisible = dropdown.setVisible,
+      direction = dropdown.direction,
+      display = dropdown.display,
+      autoClose = dropdown.autoClose;
 
   if (!visible) {
     return null;
   }
 
-  var classes = getStyles(styles$Q, ['.dropdown-menu']);
+  var isStatic = Platform.OS === 'web' && display === 'static';
+  var isCollapsedNavbar = navbar && !(navbar.expand && (navbar.expand === true || media.up(navbar.expand)));
+  var hasStaticStyle = isStatic && !isCollapsedNavbar;
+  var classes = getStyles(styles$Q, ['.dropdown-menu', // Non-Popper styles
+  hasStaticStyle && '.dropdown-menu[data-bs-popper]', hasStaticStyle && start && ".dropdown-menu".concat(start === true ? '' : "-".concat(start), "-start[data-bs-popper]"), hasStaticStyle && end && ".dropdown-menu".concat(end === true ? '' : "-".concat(end), "-end[data-bs-popper]"), hasStaticStyle && direction === 'up' && '.dropup .dropdown-menu[data-bs-popper]', hasStaticStyle && direction === 'end' && '.dropend .dropdown-menu[data-bs-popper]', hasStaticStyle && direction === 'start' && '.dropstart .dropdown-menu[data-bs-popper]', // Navbar styles
+  navbar && '.navbar-nav .dropdown-menu', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .navbar-nav .dropdown-menu")]);
   var textClasses = getStyles(styles$Q, ['.dropdown-menu-text']);
+
+  if (isStatic || isCollapsedNavbar) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !isCollapsedNavbar && /*#__PURE__*/React.createElement(BackdropHandler, {
+      toggleRef: toggleRef,
+      dialogRef: dialogRef,
+      onClose: function onClose() {
+        setVisible(false);
+      },
+      autoClose: autoClose
+    }), /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
+      ref: concatRefs(dialogRef, ref),
+      accessibilityLabelledBy: identifier,
+      style: [classes, style],
+      textStyle: [textClasses, textStyle]
+    }), children));
+  }
+
   return /*#__PURE__*/React.createElement(OverlayContainer, null, /*#__PURE__*/React.createElement(Overlay, {
     placement: transformPlacement(media, direction, start, end),
-    targetRef: triggerRef,
+    targetRef: toggleRef,
     offset: convertToNumber(StyleSheet.value('dropdown-spacer')),
     visible: visible
   }, function (overlay, overlayRef) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackdropHandler, {
+      toggleRef: toggleRef,
       dialogRef: overlayRef,
       onClose: function onClose() {
         setVisible(false);
-      }
+      },
+      autoClose: autoClose
     }), /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
       ref: concatRefs(overlayRef, ref),
       accessibilityLabelledBy: identifier,
-      style: [classes, {
+      style: [classes, overlay.overlayProps.style, {
+        maxHeight: 'auto',
         opacity: overlay.rendered ? 1 : 0
-      }, overlay.overlayProps.style, style],
+      }, style],
       textStyle: [textClasses, textStyle]
     }), /*#__PURE__*/React.createElement(DropdownContext.Provider, {
       value: dropdown
@@ -4393,10 +4520,69 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
 DropdownMenu.displayName = 'DropdownMenu';
 DropdownMenu.propTypes = propTypes$$;
 
-var _excluded$10 = ["children", "onPress", "active", "disabled", "style", "textStyle"];
+var _excluded$$ = ["children", "size", "style"];
 
-var _templateObject$Q, _templateObject2$w, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$c;
+var _templateObject$Q, _templateObject2$w;
 var propTypes$_ = {
+  children: PropTypes.node.isRequired,
+  size: PropTypes.oneOf(Object.keys(FONT_SIZES).map(function (k) {
+    return Number(k);
+  })).isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any
+};
+var styles$P = StyleSheet.create(_objectSpread2({
+  heading: css(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n    margin-top: 0; // 1\n    margin-bottom: $headings-margin-bottom;\n    font-family: $headings-font-family;\n    font-style: $headings-font-style;\n    font-weight: $headings-font-weight;\n    color: $headings-color;\n  "])))
+}, each(FONT_SIZES, function (size, value) {
+  return _defineProperty({}, ".h".concat(size), css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n      font-size: ", ";\n      line-height: ", " * $headings-line-height;\n    "])), value, value));
+})));
+var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      size = props.size,
+      style = props.style,
+      elementProps = _objectWithoutProperties(props, _excluded$$);
+
+  var classes = getStyles(styles$P, ['heading', ".h".concat(size)]);
+  return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
+    ref: ref,
+    accessibilityRole: "header",
+    accessibilityLevel: size,
+    style: [classes, style]
+  }), children);
+});
+Heading$1.displayName = 'Heading';
+Heading$1.propTypes = propTypes$_;
+
+var _excluded$_ = ["children", "style"];
+
+var _templateObject$P;
+var propTypes$Z = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any
+};
+var styles$O = StyleSheet.create({
+  '.dropdown-header': css(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-header-padding;\n    margin-bottom: 0; // for use with heading elements\n    font-size: $font-size-sm;\n    color: $dropdown-header-color;\n    // white-space: nowrap; // as with > li > a\n  "])))
+});
+var DropdownHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      style = props.style,
+      elementProps = _objectWithoutProperties(props, _excluded$_);
+
+  var classes = getStyles(styles$O, ['.dropdown-header']);
+  return /*#__PURE__*/React.createElement(Heading$1, _extends({}, elementProps, {
+    ref: ref,
+    size: 6,
+    style: [classes, style]
+  }), children);
+});
+DropdownHeader.displayName = 'DropdownHeader';
+DropdownHeader.propTypes = propTypes$Z;
+
+var _excluded$Z = ["children", "onPress", "active", "disabled", "style", "textStyle"];
+
+var _templateObject$O, _templateObject2$v, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$c;
+var propTypes$Y = {
   children: PropTypes.node.isRequired,
   onPress: PropTypes.func,
   active: PropTypes.bool,
@@ -4406,9 +4592,9 @@ var propTypes$_ = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-var styles$P = StyleSheet.create({
-  '.dropdown-item': css(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    // clear: both;\n    background-color: transparent;\n    border: 0;\n\n    &:hover {\n      // @include gradient-bg($dropdown-link-hover-bg);\n      background-color: $dropdown-link-hover-bg;\n    }\n    &:focus {\n      // @include gradient-bg($dropdown-link-hover-bg);\n      background-color: $dropdown-link-hover-bg;\n    }\n  "]))),
-  '.dropdown-item-text': css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $dropdown-link-color;\n    // text-align: inherit;\n    text-decoration: none; // if($link-decoration == none, null, none);\n    // white-space: nowrap;\n\n    &:hover {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n    &:focus {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n  "]))),
+var styles$N = StyleSheet.create({
+  '.dropdown-item': css(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    // clear: both;\n    background-color: transparent;\n    border: 0;\n\n    &:hover {\n      // @include gradient-bg($dropdown-link-hover-bg);\n      background-color: $dropdown-link-hover-bg;\n    }\n    &:focus {\n      // @include gradient-bg($dropdown-link-hover-bg);\n      background-color: $dropdown-link-hover-bg;\n    }\n  "]))),
+  '.dropdown-item-text': css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $dropdown-link-color;\n    // text-align: inherit;\n    text-decoration: none; // if($link-decoration == none, null, none);\n    // white-space: nowrap;\n\n    &:hover {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n    &:focus {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n  "]))),
   '.dropdown-item-active': css(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteral(["\n    // @include gradient-bg($dropdown-link-active-bg);\n    background-color: $dropdown-link-active-bg;\n\n    &:hover {\n      background-color: $dropdown-link-active-bg;\n    }\n    &:focus {\n      background-color: $dropdown-link-active-bg;\n    }\n  "]))),
   '.dropdown-item-active-text': css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteral(["\n    color: $dropdown-link-active-color;\n    text-decoration: none;\n\n    &:hover {\n      color: $dropdown-link-active-color;\n    }\n    &:focus {\n      color: $dropdown-link-active-color;\n    }\n  "]))),
   '.dropdown-item-disabled': css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    background-color: transparent;\n    // Remove CSS gradients if they're enabled\n    // background-image: if($enable-gradients, none, null);\n\n    &:hover {\n      background-color: transparent;\n    }\n    &:focus {\n      background-color: transparent;\n    }\n  "]))),
@@ -4424,11 +4610,11 @@ var DropdownItem = function DropdownItem(props) {
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$10);
+      elementProps = _objectWithoutProperties(props, _excluded$Z);
 
   var dropdown = useForcedContext(DropdownContext);
-  var classes = getStyles(styles$P, ['.dropdown-item', active && '.dropdown-item-active', disabled && '.dropdown-item-disabled']);
-  var textClasses = getStyles(styles$P, ['.dropdown-item-text', active && '.dropdown-item-active-text', disabled && '.dropdown-item-disabled-text']);
+  var classes = getStyles(styles$N, ['.dropdown-item', active && '.dropdown-item-active', disabled && '.dropdown-item-disabled']);
+  var textClasses = getStyles(styles$N, ['.dropdown-item-text', active && '.dropdown-item-active-text', disabled && '.dropdown-item-disabled-text']);
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
     onPress: concatFns(function () {
       dropdown.setVisible(false);
@@ -4440,67 +4626,9 @@ var DropdownItem = function DropdownItem(props) {
 };
 
 DropdownItem.displayName = 'DropdownItem';
-DropdownItem.propTypes = propTypes$_;
-
-var _excluded$$ = ["children", "style"];
-
-var _templateObject$P;
-var propTypes$Z = {
-  children: PropTypes.node.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any
-};
-var styles$O = StyleSheet.create({
-  '.dropdown-item-text': css(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    color: $dropdown-link-color;\n  "])))
-});
-var DropdownTextItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-      style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$$);
-
-  var classes = getStyles(styles$O, ['.dropdown-item-text']);
-  return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
-    ref: ref,
-    style: [classes, style]
-  }), children);
-});
-DropdownTextItem.displayName = 'DropdownTextItem';
-DropdownTextItem.propTypes = propTypes$Z;
+DropdownItem.propTypes = propTypes$Y;
 
-var _excluded$_ = ["children", "size", "style"];
-
-var _templateObject$O, _templateObject2$v;
-var propTypes$Y = {
-  children: PropTypes.node.isRequired,
-  size: PropTypes.oneOf(Object.keys(FONT_SIZES).map(function (k) {
-    return Number(k);
-  })).isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any
-};
-var styles$N = StyleSheet.create(_objectSpread2({
-  heading: css(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n    margin-top: 0; // 1\n    margin-bottom: $headings-margin-bottom;\n    font-family: $headings-font-family;\n    font-style: $headings-font-style;\n    font-weight: $headings-font-weight;\n    color: $headings-color;\n  "])))
-}, each(FONT_SIZES, function (size, value) {
-  return _defineProperty({}, ".h".concat(size), css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n      font-size: ", ";\n      line-height: ", " * $headings-line-height;\n    "])), value, value));
-})));
-var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-      size = props.size,
-      style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$_);
-
-  var classes = getStyles(styles$N, ['heading', ".h".concat(size)]);
-  return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
-    ref: ref,
-    accessibilityRole: "header",
-    accessibilityLevel: size,
-    style: [classes, style]
-  }), children);
-});
-Heading$1.displayName = 'Heading';
-Heading$1.propTypes = propTypes$Y;
-
-var _excluded$Z = ["children", "style"];
+var _excluded$Y = ["children", "style"];
 
 var _templateObject$N;
 var propTypes$X = {
@@ -4509,24 +4637,23 @@ var propTypes$X = {
   style: PropTypes.any
 };
 var styles$M = StyleSheet.create({
-  '.dropdown-header': css(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-header-padding;\n    margin-bottom: 0; // for use with heading elements\n    font-size: $font-size-sm;\n    color: $dropdown-header-color;\n    // white-space: nowrap; // as with > li > a\n  "])))
+  '.dropdown-item-text': css(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    color: $dropdown-link-color;\n  "])))
 });
-var DropdownHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var DropdownItemText = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$Z);
+      elementProps = _objectWithoutProperties(props, _excluded$Y);
 
-  var classes = getStyles(styles$M, ['.dropdown-header']);
-  return /*#__PURE__*/React.createElement(Heading$1, _extends({}, elementProps, {
+  var classes = getStyles(styles$M, ['.dropdown-item-text']);
+  return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
     ref: ref,
-    size: 6,
     style: [classes, style]
   }), children);
 });
-DropdownHeader.displayName = 'DropdownHeader';
-DropdownHeader.propTypes = propTypes$X;
+DropdownItemText.displayName = 'DropdownItemText';
+DropdownItemText.propTypes = propTypes$X;
 
-var _excluded$Y = ["style"];
+var _excluded$X = ["style"];
 
 var _templateObject$M;
 var propTypes$W = {
@@ -4538,7 +4665,7 @@ var styles$L = StyleSheet.create({
 });
 var DropdownDivider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$Y);
+      elementProps = _objectWithoutProperties(props, _excluded$X);
 
   var classes = getStyles(styles$L, ['.dropdown-divider']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -4549,9 +4676,9 @@ var DropdownDivider = /*#__PURE__*/React.forwardRef(function (props, ref) {
 DropdownDivider.displayName = 'DropdownDivider';
 DropdownDivider.propTypes = propTypes$W;
 
-function useDropdown(defaultVisible, controlledVisible, onToggle, direction) {
+function useDropdown(defaultVisible, controlledVisible, onToggle, direction, display, autoClose) {
   var identifier = useIdentifier('dropdown');
-  var triggerRef = useRef();
+  var toggleRef = useRef();
 
   var _useControlledState = useControlledState(defaultVisible, controlledVisible, onToggle),
       _useControlledState2 = _slicedToArray(_useControlledState, 2),
@@ -4563,49 +4690,30 @@ function useDropdown(defaultVisible, controlledVisible, onToggle, direction) {
       identifier: identifier,
       visible: visible,
       setVisible: setVisible,
-      triggerRef: triggerRef,
-      direction: direction
+      toggleRef: toggleRef,
+      direction: direction,
+      display: display,
+      autoClose: autoClose
     };
   }, [visible]);
 }
 
-var _excluded$X = ["onPress"];
-function useDismissDropdown(props) {
-  var context = useForcedContext(DropdownContext);
-
-  var handlePress = props.onPress,
-      restProps = _objectWithoutProperties(props, _excluded$X);
-
-  return _objectSpread2(_objectSpread2({}, restProps), {}, {
-    onPress: function onPress(event) {
-      if (handlePress) handlePress(event);
-      context.setExpanded(false);
-    }
-  });
-}
-
 var _excluded$W = ["onPress"];
-function useToggleDropdown(props) {
+function useDismissDropdown(props) {
   var context = useForcedContext(DropdownContext);
 
   var handlePress = props.onPress,
       restProps = _objectWithoutProperties(props, _excluded$W);
 
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
-    nativeID: context.identifier,
-    ref: context.triggerRef,
     onPress: function onPress(event) {
       if (handlePress) handlePress(event);
-      context.setVisible(function (value) {
-        return !value;
-      });
-    },
-    accessibilityHasPopup: true,
-    accessibilityExpanded: context.visible
+      context.setVisible(false);
+    }
   });
 }
 
-var _excluded$V = ["children", "defaultVisible", "visible", "onToggle", "direction", "style"];
+var _excluded$V = ["children", "defaultVisible", "visible", "onToggle", "direction", "display", "autoClose", "style"];
 
 var _templateObject$L;
 var DIRECTIONS = ['top', 'bottom', 'start', 'end'];
@@ -4615,6 +4723,8 @@ var propTypes$V = {
   visible: PropTypes.bool,
   onToggle: PropTypes.func,
   direction: PropTypes.oneOf(DIRECTIONS),
+  display: PropTypes.oneOf(['dynamic', 'static']),
+  autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['inside', 'outside'])]),
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
 };
@@ -4629,10 +4739,14 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onToggle = props.onToggle,
       _props$direction = props.direction,
       direction = _props$direction === void 0 ? 'bottom' : _props$direction,
+      _props$display = props.display,
+      display = _props$display === void 0 ? 'dynamic' : _props$display,
+      _props$autoClose = props.autoClose,
+      autoClose = _props$autoClose === void 0 ? 'outside' : _props$autoClose,
       style = props.style,
       elementProps = _objectWithoutProperties(props, _excluded$V);
 
-  var dropdown = useDropdown(defaultVisible, visible, onToggle, direction);
+  var dropdown = useDropdown(defaultVisible, visible, onToggle, direction, display, autoClose);
   var classes = getStyles(styles$K, ['.dropdown']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
@@ -4644,10 +4758,11 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = propTypes$V;
 Dropdown.Context = DropdownContext;
-Dropdown.TextItem = DropdownTextItem;
-Dropdown.Header = DropdownHeader;
+Dropdown.Toggle = DropdownToggle;
 Dropdown.Menu = DropdownMenu;
+Dropdown.Header = DropdownHeader;
 Dropdown.Item = DropdownItem;
+Dropdown.ItemText = DropdownItemText;
 Dropdown.Divider = DropdownDivider;
 Dropdown.useDismiss = useDismissDropdown;
 Dropdown.useToggle = useToggleDropdown;
@@ -4798,13 +4913,13 @@ var propTypes$Q = {
   style: PropTypes.any
 };
 var styles$G = StyleSheet.create(_objectSpread2({
-  '.form-control': css(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n    // display: block;\n    width: 100%;\n    padding: $input-padding-y $input-padding-x;\n    font-family: $input-font-family;\n    font-size: $input-font-size;\n    font-weight: $input-font-weight;\n    line-height: $input-font-size * $input-line-height;\n    color: $input-color;\n    text-align-vertical: top; // added for bootstrap-rn\n    background-color: $input-bg;\n    // background-clip: padding-box;\n    border: $input-border-width solid $input-border-color;\n    @include platform(web) {\n      appearance: none; // Fix appearance for date inputs in Safari\n    }\n\n    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of \"<select>\"s in CSS.\n    border-radius: $input-border-radius;\n\n    // @include box-shadow($input-box-shadow);\n    // @include transition($input-transition);\n\n    // Customize the \":focus\" state to imitate native WebKit styles.\n    &:focus {\n      color: $input-focus-color;\n      background-color: $input-focus-bg;\n      border-color: $input-focus-border-color;\n      @include platform(web) {\n        outline-width: 0; // outline: 0;\n      }\n      /* @if $enable-shadows {\n        @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n      } @else {\n        // Avoid using mixin so we can pass custom focus shadow properly\n        box-shadow: $input-focus-box-shadow;\n      } */\n    }\n  "]))),
+  '.form-control': css(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n    // display: block;\n    width: 100%;\n    padding: $input-padding-y $input-padding-x;\n    font-family: $input-font-family;\n    font-size: $input-font-size;\n    font-weight: $input-font-weight;\n    line-height: $input-font-size * $input-line-height;\n    color: $input-color;\n    background-color: $input-bg;\n    // background-clip: padding-box;\n    border: $input-border-width solid $input-border-color;\n    @include platform(web) {\n      appearance: none; // Fix appearance for date inputs in Safari\n    }\n\n    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of \"<select>\"s in CSS.\n    border-radius: $input-border-radius;\n\n    // @include box-shadow($input-box-shadow);\n    // @include transition($input-transition);\n\n    // Customize the \":focus\" state to imitate native WebKit styles.\n    &:focus {\n      color: $input-focus-color;\n      background-color: $input-focus-bg;\n      border-color: $input-focus-border-color;\n      @include platform(web) {\n        outline-width: 0; // outline: 0;\n      }\n      /* @if $enable-shadows {\n        @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n      } @else {\n        // Avoid using mixin so we can pass custom focus shadow properly\n        box-shadow: $input-focus-box-shadow;\n      } */\n    }\n  "]))),
   '.form-control-disabled': css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n    background-color: $input-disabled-bg;\n    border-color: $input-disabled-border-color;\n    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n    opacity: 1;\n  "]))),
   '.form-control-sm': css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n    padding: $input-padding-y-sm $input-padding-x-sm;\n    font-size: $input-font-size-sm;\n    border-radius: $input-border-radius-sm;\n  "]))),
   '.form-control-lg': css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n    padding: $input-padding-y-lg $input-padding-x-lg;\n    font-size: $input-font-size-lg;\n    border-radius: $input-border-radius-lg;\n  "]))),
-  '.form-control-multiline': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n    min-height: $input-height;\n  "]))),
-  '.form-control-multiline-sm': css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n  "]))),
-  '.form-control-multiline-lg': css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n  "])))
+  '.form-control-multiline': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n    text-align-vertical: top; // added for bootstrap-rn\n    min-height: $input-height;\n\n    @include platform(ios) {\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "]))),
+  '.form-control-multiline-sm': css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n\n    @include platform(ios) {\n      // TODO: Adjust ios height to sm size\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "]))),
+  '.form-control-multiline-lg': css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n\n    @include platform(ios) {\n      // TODO: Adjust ios height to lg size\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "])))
 }, each(FORM_VALIDATION_STATES, function (state, data) {
   return _defineProperty({}, ".form-control.is-".concat(state), css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:focus {\n        border-color: ", ";\n        // box-shadow: $focus-box-shadow;\n      }\n    "])), function (t) {
     return data(t).color;
@@ -4837,6 +4952,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     placeholderTextColor: placeholderTextColor || StyleSheet.value('input-placeholder-color'),
     multiline: multiline,
     disabled: disabled,
+    editable: !disabled,
+    selectTextOnFocus: !disabled,
     style: [classes, style]
   }));
 });
@@ -4968,7 +5085,7 @@ PopoverContext.displayName = 'PopoverContext';
 
 var _excluded$P = ["style"];
 
-var _templateObject$G, _templateObject2$t, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1;
+var _templateObject$G, _templateObject2$t, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$7, _templateObject8$6, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$2, _templateObject15$1;
 var propTypes$P = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -4990,15 +5107,15 @@ var styles$F = StyleSheet.create({
     return t['popover-border-width'];
   })),
   '.bs-popover-end .popover-arrow::before': css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteral(["\n    left: 0;\n    border-top-width: $popover-arrow-width * 0.5;\n    border-right-width: $popover-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $popover-arrow-width * 0.5;\n    border-right-color: $popover-arrow-outer-color;\n  "]))),
-  '.bs-popover-end .popover-arrow::after': css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n    left: $popover-border-width;\n    border-top-width: $popover-arrow-width * 0.5;\n    border-right-width: $popover-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $popover-arrow-width * 0.5;\n    border-right-color: $popover-arrow-color;\n  "]))),
-  '.bs-popover-bottom .popover-arrow': css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), subtract(function (t) {
+  '.bs-popover-end .popover-arrow::after': css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n    left: $popover-border-width;\n    border-top-width: $popover-arrow-width * 0.5;\n    border-right-width: $popover-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $popover-arrow-width * 0.5;\n    border-right-color: $popover-arrow-color;\n  "]))),
+  '.bs-popover-bottom .popover-arrow': css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), subtract(function (t) {
     return "-".concat(t['popover-arrow-height']);
   }, function (t) {
     return t['popover-border-width'];
   })),
-  '.bs-popover-bottom .popover-arrow::before': css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral(["\n    top: 0;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-outer-color;\n  "]))),
-  '.bs-popover-bottom .popover-arrow::after': css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n    top: $popover-border-width;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-color;\n  "]))),
-  '.bs-popover-start .popover-arrow': css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n    right: ", ";\n    width: $popover-arrow-height;\n    height: $popover-arrow-width;\n  "])), subtract(function (t) {
+  '.bs-popover-bottom .popover-arrow::before': css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n    top: 0;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-outer-color;\n  "]))),
+  '.bs-popover-bottom .popover-arrow::after': css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n    top: $popover-border-width;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-color;\n  "]))),
+  '.bs-popover-start .popover-arrow': css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral(["\n    right: ", ";\n    width: $popover-arrow-height;\n    height: $popover-arrow-width;\n  "])), subtract(function (t) {
     return "-".concat(t['popover-arrow-height']);
   }, function (t) {
     return t['popover-border-width'];
@@ -5180,9 +5297,10 @@ function injectPopover(Target) {
         ref: overlayRef,
         placement: overlay.placement,
         popper: overlay.rendered,
-        style: [{
+        style: [overlay.overlayProps.style, {
+          maxHeight: 'auto',
           opacity: overlay.rendered ? 1 : 0
-        }, overlay.overlayProps.style],
+        }],
         arrowStyle: overlay.arrowProps.style
       }), /*#__PURE__*/React.createElement(Popover.Arrow, null), title && /*#__PURE__*/React.createElement(Popover.Header, null, title), /*#__PURE__*/React.createElement(Popover.Body, null, content));
     })));
@@ -5197,7 +5315,7 @@ TooltipContext.displayName = 'TooltipContext';
 
 var _excluded$K = ["style"];
 
-var _templateObject$C, _templateObject2$q, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$5, _templateObject9$3, _templateObject10$3;
+var _templateObject$C, _templateObject2$q, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$5, _templateObject9$4, _templateObject10$4;
 var propTypes$K = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -5211,8 +5329,8 @@ var styles$B = StyleSheet.create({
   '.bs-tooltip-end .tooltip-arrow::before': css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteral(["\n    right: -1px;\n    border-top-width: $tooltip-arrow-width * 0.5;\n    border-right-width: $tooltip-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $tooltip-arrow-width * 0.5;\n    border-right-color: $tooltip-arrow-color;\n  "]))),
   '.bs-tooltip-bottom .tooltip-arrow': css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n    top: 0;\n  "]))),
   '.bs-tooltip-bottom .tooltip-arrow::before': css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral(["\n    bottom: -1px;\n    border-top-width: 0;\n    border-right-width: $tooltip-arrow-width * 0.5;\n    border-left-width: $tooltip-arrow-width * 0.5;\n    border-bottom-width: $tooltip-arrow-height;\n    border-bottom-color: $tooltip-arrow-color;\n  "]))),
-  '.bs-tooltip-start .tooltip-arrow': css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n    right: 0;\n    width: $tooltip-arrow-height;\n    height: $tooltip-arrow-width;\n  "]))),
-  '.bs-tooltip-start .tooltip-arrow::before': css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n    left: -1px;\n    border-top-width: $tooltip-arrow-width * 0.5;\n    border-right-width: 0;\n    border-left-width: $tooltip-arrow-height;\n    border-bottom-width: $tooltip-arrow-width * 0.5;\n    border-left-color: $tooltip-arrow-color;\n  "])))
+  '.bs-tooltip-start .tooltip-arrow': css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n    right: 0;\n    width: $tooltip-arrow-height;\n    height: $tooltip-arrow-width;\n  "]))),
+  '.bs-tooltip-start .tooltip-arrow::before': css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n    left: -1px;\n    border-top-width: $tooltip-arrow-width * 0.5;\n    border-right-width: 0;\n    border-left-width: $tooltip-arrow-height;\n    border-bottom-width: $tooltip-arrow-width * 0.5;\n    border-left-color: $tooltip-arrow-color;\n  "])))
 });
 var TooltipArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
@@ -5354,9 +5472,10 @@ function injectTooltip(Target) {
         ref: overlayRef,
         placement: overlay.placement,
         popper: overlay.rendered,
-        style: [{
+        style: [overlay.overlayProps.style, {
+          maxHeight: 'auto',
           opacity: overlay.rendered ? 1 : 0
-        }, overlay.overlayProps.style],
+        }],
         arrowStyle: overlay.arrowProps.style
       }), /*#__PURE__*/React.createElement(Tooltip.Arrow, null), /*#__PURE__*/React.createElement(Tooltip.Inner, null, title));
     })));
@@ -5444,7 +5563,7 @@ ListGroupContext.displayName = 'ListGroupContext';
 
 var _excluded$D = ["children", "color", "active", "first", "last", "disabled", "style", "textStyle"];
 
-var _templateObject$y, _templateObject2$o, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1;
+var _templateObject$y, _templateObject2$o, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$1;
 var propTypes$D = {
   children: PropTypes.node.isRequired,
   color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
@@ -5466,14 +5585,14 @@ var styles$x = StyleSheet.create(_objectSpread2({
   '.list-group-item-disabled-text': css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n    color: $list-group-disabled-color;\n  "]))),
   '.list-group-item-active': css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n    z-index: 2; // Place active items above their siblings for proper border styling\n    background-color: $list-group-active-bg;\n    border-color: $list-group-active-border-color;\n  "]))),
   '.list-group-item-active-text': css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral(["\n    color: $list-group-active-color;\n  "]))),
-  '.list-group-item-not-first': css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n    border-top-width: 0;\n  "]))),
-  '.list-group-item-not-first-active': css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n    margin-top: -$list-group-border-width;\n    border-top-width: $list-group-border-width;\n  "]))),
-  '.list-group-item-flush': css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n    border-top-left-radius: 0; // added for bootstrap-rn\n    border-top-right-radius: 0; // added for bootstrap-rn\n    border-bottom-left-radius: 0; // added for bootstrap-rn\n    border-bottom-right-radius: 0; // added for bootstrap-rn\n    border-top-width: 0;\n    border-right-width: 0;\n    border-bottom-width: $list-group-border-width;\n    border-left-width: 0;\n  "]))),
-  '.list-group-item-flush-last': css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n    border-bottom-width: 0;\n  "])))
+  '.list-group-item-not-first': css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n    border-top-width: 0;\n  "]))),
+  '.list-group-item-not-first-active': css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n    margin-top: -$list-group-border-width;\n    border-top-width: $list-group-border-width;\n  "]))),
+  '.list-group-item-flush': css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral(["\n    border-top-left-radius: 0; // added for bootstrap-rn\n    border-top-right-radius: 0; // added for bootstrap-rn\n    border-bottom-left-radius: 0; // added for bootstrap-rn\n    border-bottom-right-radius: 0; // added for bootstrap-rn\n    border-top-width: 0;\n    border-right-width: 0;\n    border-bottom-width: $list-group-border-width;\n    border-left-width: 0;\n  "]))),
+  '.list-group-item-flush-last': css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n    border-bottom-width: 0;\n  "])))
 }, each(THEME_COLORS, function (state, value) {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), shiftColor(function (t) {
+  return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), shiftColor(function (t) {
     return t['list-group-item-bg-scale'];
   }, value))), _defineProperty(_ref, ".list-group-item-".concat(state, "-text"), css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), shiftColor(function (t) {
     return t['list-group-item-color-scale'];
@@ -5787,9 +5906,7 @@ var computeScrollbarWidth = function computeScrollbarWidth() {
 };
 
 function useScrollbarEffects(_ref) {
-  var ref = _ref.ref,
-      keepBodyScroll = _ref.keepBodyScroll,
-      centered = _ref.centered,
+  var keepBodyScroll = _ref.keepBodyScroll,
       visible = _ref.visible;
 
   if (Platform.OS !== 'web' || keepBodyScroll) {
@@ -5804,9 +5921,9 @@ function useScrollbarEffects(_ref) {
 
     if (!scrollbarWidth.current) {
       scrollbarWidth.current = computeScrollbarWidth();
-    }
+    } // const element = findNodeHandle(ref.current);
+
 
-    var element = findNodeHandle(ref.current);
     var rect = document.body.getBoundingClientRect();
     var isBodyOverflowing = rect.left + rect.right < window.innerWidth; // Set body and fixed elements padding adjustments.
 
@@ -5821,21 +5938,6 @@ function useScrollbarEffects(_ref) {
         // eslint-disable-next-line no-param-reassign
         el.style.width = "calc(100% - ".concat(scrollbarWidth.current, "px)");
       });
-    }
-
-    var isModalOverflowing = element.scrollHeight > document.documentElement.clientHeight;
-
-    if (centered) {
-      // Set dialog padding adjustments.
-      if (!isBodyOverflowing && isModalOverflowing) {
-        // eslint-disable-next-line no-param-reassign
-        element.style.paddingLeft = "".concat(scrollbarWidth.current, "px");
-      }
-
-      if (isBodyOverflowing && !isModalOverflowing) {
-        // eslint-disable-next-line no-param-reassign
-        element.style.paddingRight = "".concat(scrollbarWidth.current, "px");
-      }
     } // Add "overflow: hidden" to body element.
 
 
@@ -5860,9 +5962,6 @@ function useModal(scrollable) {
   }, [scrollable]);
 }
 
-var ModalContext = /*#__PURE__*/React.createContext();
-ModalContext.displayName = 'ModalContext';
-
 var _excluded$y = ["children", "style"];
 
 var _templateObject$u;
@@ -5915,13 +6014,15 @@ var ModalTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ModalTitle.displayName = 'ModalTitle';
 ModalTitle.propTypes = propTypes$x;
 
-var _excluded$w = ["children", "style"];
+var _excluded$w = ["children", "style", "contentContainerStyle"];
 
 var _templateObject$s;
 var propTypes$w = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  contentContainerStyle: PropTypes.any
 };
 var styles$s = StyleSheet.create({
   '.modal-body': css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n    position: relative;\n    // Enable \"flex-grow: 1\" so that the body take up as much space as possible\n    // when there should be a fixed height on \".modal-dialog\".\n    // Note from bootstrap-rn: Centered modals do not work with this style, but\n    // everything just works fine without this style.\n    // flex: 1 1 auto;\n    padding: $modal-inner-padding;\n  "])))
@@ -5929,6 +6030,7 @@ var styles$s = StyleSheet.create({
 var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
+      contentContainerStyle = props.contentContainerStyle,
       elementProps = _objectWithoutProperties(props, _excluded$w);
 
   var _useForcedContext = useForcedContext(ModalContext),
@@ -5938,8 +6040,8 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var FlexView = scrollable ? ScrollView : View;
   return /*#__PURE__*/React.createElement(FlexView, _extends({}, elementProps, {
     ref: ref,
-    style: scrollable ? undefined : [classes, style],
-    contentContainerStyle: scrollable ? [classes, style] : undefined
+    style: scrollable ? style : [classes, style],
+    contentContainerStyle: scrollable ? [classes, contentContainerStyle] : undefined
   }), children);
 });
 ModalBody.displayName = 'ModalBody';
@@ -5972,7 +6074,7 @@ ModalFooter.propTypes = propTypes$v;
 
 var _excluded$u = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "textStyle"];
 
-var _templateObject$q, _templateObject2$l, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$1, _templateObject10$1, _templateObject11$1;
+var _templateObject$q, _templateObject2$l, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$2;
 var MODAL_SIZES = ['sm', 'lg', 'xl'];
 var propTypes$u = {
   children: PropTypes.node.isRequired,
@@ -5989,16 +6091,16 @@ var propTypes$u = {
 };
 var styles$q = StyleSheet.create({
   '.modal': css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    top: 0;\n    left: 0;\n    z-index: $zindex-modal;\n    // display: none;\n    width: 100%;\n    height: 100%;\n    // overflow-x: hidden;\n    // overflow-y: auto;\n    // Prevent Chrome on Windows from adding a focus outline. For details, see\n    // https://github.com/twbs/bootstrap/pull/10951.\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // We deliberately don't use \"-webkit-overflow-scrolling: touch;\" due to a\n    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n    // See also https://github.com/twbs/bootstrap/issues/17695\n  "]))),
-  '.modal-dialog': css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n    position: relative;\n    width: auto;\n    margin: $modal-dialog-margin;\n    // allow clicks to pass through for custom click handling to close modal\n    // pointer-events: none;\n    align-self: center; // added for bootstrap-rn\n\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-md;\n      margin: $modal-dialog-margin-y-sm-up;\n    }\n  "]))),
+  '.modal-dialog': css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n    position: relative;\n    width: auto;\n    margin: $modal-dialog-margin;\n    // allow clicks to pass through for custom click handling to close modal\n    // pointer-events: none;\n\n    @include media-breakpoint-up(sm) {\n      width: 100%; // added for bootstrap-rn\n      max-width: $modal-md;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  "]))),
   '.modal-dialog-scrollable': css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n    flex-shrink: 1; // added for bootstrap-rn\n    // height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n  "]))),
   '.modal-dialog-scrollable .modal-content': css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n    max-height: 100%;\n    overflow: hidden;\n  "]))),
   '.modal-dialog-centered': css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-grow: 1; // added for bootstrap-rn\n    align-items: center;\n    // min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n  "]))),
   '.modal-content': css(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%; // Ensure \".modal-content\" extends the full width of the parent \".modal-dialog\"\n    // counteract the pointer-events: none; in the .modal-dialog\n    // pointer-events: auto;\n    background-color: $modal-content-bg;\n    // background-clip: padding-box;\n    border: $modal-content-border-width solid $modal-content-border-color;\n    border-radius: $modal-content-border-radius;\n    // @include box-shadow($modal-content-box-shadow-xs);\n    // Remove focus outline from opened modal\n    // outline: 0;\n\n    @include media-breakpoint-up(sm) {\n      // @include box-shadow($modal-content-box-shadow-sm-up);\n    }\n  "]))),
   '.modal-content-text': css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["\n    color: $modal-content-color;\n  "]))),
   '.modal-backdrop': css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: $zindex-modal-backdrop;\n    width: 100%;\n    height: 100%;\n    background-color: $modal-backdrop-bg;\n    opacity: $modal-backdrop-opacity;\n  "]))),
-  '.modal-sm': css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-sm;\n    }\n  "]))),
-  '.modal-lg': css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n  "]))),
-  '.modal-xl': css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "])))
+  '.modal-sm': css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-sm;\n    }\n  "]))),
+  '.modal-lg': css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "]))),
+  '.modal-xl': css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "])))
 });
 var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -6015,13 +6117,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       textStyle = props.textStyle,
       elementProps = _objectWithoutProperties(props, _excluded$u);
 
-  var modalRef = useRef();
   var dialogRef = useRef();
   var modal = useModal(scrollable);
   useScrollbarEffects({
-    ref: modalRef,
     keepBodyScroll: false,
-    centered: true,
     visible: visible
   });
   var backdropClasses = getStyles(styles$q, ['.modal-backdrop']);
@@ -6038,7 +6137,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, backdrop && /*#__PURE__*/React.createElement(View, {
     style: backdropClasses
   }), /*#__PURE__*/React.createElement(FlexView, {
-    ref: modalRef,
     style: classes,
     contentContainerStyle: scrollable ? undefined : {
       flexGrow: 1
@@ -6047,7 +6145,11 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     dialogRef: dialogRef,
     onClose: handleToggle,
     backdrop: backdrop
-  }), /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      flexShrink: 1
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     ref: dialogRef,
     style: dialogClasses
   }, /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -6056,7 +6158,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     textStyle: [contentTextClasses, textStyle]
   }), /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modal
-  }, children)))));
+  }, /*#__PURE__*/React.createElement(OverlayProvider, null, children)))))));
 });
 Modal.displayName = 'Modal';
 Modal.propTypes = propTypes$u;
@@ -6071,7 +6173,7 @@ NavContext.displayName = 'NavContext';
 
 var _excluded$t = ["children", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
-var _templateObject$p, _templateObject2$k, _templateObject3$9, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$3, _templateObject8$2, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var _templateObject$p, _templateObject2$k, _templateObject3$9, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 var propTypes$t = {
   children: PropTypes.node.isRequired,
   active: PropTypes.bool,
@@ -6094,12 +6196,12 @@ var styles$p = StyleSheet.create(_objectSpread2(_objectSpread2({
   '.nav-tabs .nav-link-disabled': css(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n    background-color: transparent;\n    border-color: transparent;\n  "]))),
   '.nav-tabs .nav-link-disabled-text': css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n    color: $nav-link-disabled-color;\n  "]))),
   '.nav-tabs .nav-link-active': css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n    background-color: $nav-tabs-link-active-bg;\n    border-color: $nav-tabs-link-active-border-color;\n\n    &:hover {\n      background-color: $nav-tabs-link-active-bg; // added for bootstrap-rn\n      border-color: $nav-tabs-link-active-border-color; // added for bootstrap-rn\n    }\n    &:focus {\n      background-color: $nav-tabs-link-active-bg; // added for bootstrap-rn\n      border-color: $nav-tabs-link-active-border-color; // added for bootstrap-rn\n    }\n  "]))),
-  '.nav-tabs .nav-link-active-text': css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    color: $nav-tabs-link-active-color;\n\n    &:hover {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n  "]))),
-  '.nav-pills .nav-link': css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    background: transparent; // none;\n    border: 0;\n    border-radius: $nav-pills-border-radius;\n  "]))),
-  '.nav-pills .nav-link-active': css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    // @include gradient-bg($nav-pills-link-active-bg);\n    background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n\n    &:hover {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n    &:focus {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n  "]))),
-  '.nav-pills .nav-link-active-text': css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    color: $nav-pills-link-active-color;\n\n    &:hover {\n      color: $nav-pills-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-pills-link-active-color; // added for bootstyl\n    }\n  "]))),
+  '.nav-tabs .nav-link-active-text': css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n    color: $nav-tabs-link-active-color;\n\n    &:hover {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n  "]))),
+  '.nav-pills .nav-link': css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n    background: transparent; // none;\n    border: 0;\n    border-radius: $nav-pills-border-radius;\n  "]))),
+  '.nav-pills .nav-link-active': css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n    // @include gradient-bg($nav-pills-link-active-bg);\n    background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n\n    &:hover {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n    &:focus {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n  "]))),
+  '.nav-pills .nav-link-active-text': css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n    color: $nav-pills-link-active-color;\n\n    &:hover {\n      color: $nav-pills-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-pills-link-active-color; // added for bootstyl\n    }\n  "]))),
   // Navbar styles
-  '.navbar-nav .nav-link': css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    padding-right: 0;\n    padding-left: 0;\n  "])))
+  '.navbar-nav .nav-link': css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n    padding-right: 0;\n    padding-left: 0;\n  "])))
 }, each(GRID_BREAKPOINTS, function (breakpoint) {
   return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .nav-link"), css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        padding-right: $navbar-nav-link-padding-x;\n        padding-left: $navbar-nav-link-padding-x;\n      }\n    "])), next(breakpoint)));
 })), {}, {
@@ -6397,7 +6499,7 @@ function useNavbar(variant, defaultExpanded, controlledExpanded, onToggle, expan
       setExpanded: setExpanded,
       expand: expand
     };
-  }, [variant, expanded]);
+  }, [variant, expanded, expand]);
 }
 
 var _excluded$m = ["onPress"];
@@ -6464,6 +6566,12 @@ Navbar.Toggler = NavbarToggler;
 Navbar.useDismiss = useDismissNavbar;
 Navbar.useToggle = useToggleNavbar;
 
+function useOffcanvas() {
+  return useMemo(function () {
+    return {};
+  }, []);
+}
+
 var _excluded$k = ["children", "style"];
 
 var _templateObject$i, _templateObject2$d;
@@ -6519,29 +6627,33 @@ var OffcanvasTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 OffcanvasTitle.displayName = 'OffcanvasTitle';
 OffcanvasTitle.propTypes = propTypes$l;
 
-var _excluded$i = ["children", "style"];
+var _excluded$i = ["children", "style", "contentContainerStyle"];
 
 var _templateObject$g, _templateObject2$c;
 var propTypes$k = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  contentContainerStyle: PropTypes.any
 };
 var styles$g = StyleSheet.create(_objectSpread2({
-  '.offcanvas-body': css(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    flex-grow: 1;\n    padding: $offcanvas-padding-y $offcanvas-padding-x;\n    // overflow-y: auto;\n  "])))
+  '.offcanvas-body': css(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    // flex-grow: 1;\n    padding: $offcanvas-padding-y $offcanvas-padding-x;\n    // overflow-y: auto;\n  "])))
 }, each(GRID_BREAKPOINTS, function (breakpoint) {
   return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas-body"), css(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        display: flex;\n        flex-grow: 0;\n        padding: 0;\n        // overflow-y: visible;\n      }\n    "])), next(breakpoint)));
 })));
 var OffcanvasBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
+      contentContainerStyle = props.contentContainerStyle,
       elementProps = _objectWithoutProperties(props, _excluded$i);
 
   var navbar = useContext(NavbarContext);
-  var classes = getStyles(styles$g, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
-  return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
+  var contentContainerClasses = getStyles(styles$g, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
+  return /*#__PURE__*/React.createElement(ScrollView, _extends({}, elementProps, {
     ref: ref,
-    style: [classes, style]
+    style: style,
+    contentContainerStyle: [contentContainerClasses, contentContainerStyle]
   }), children);
 });
 OffcanvasBody.displayName = 'OffcanvasBody';
@@ -6549,7 +6661,7 @@ OffcanvasBody.propTypes = propTypes$k;
 
 var _excluded$h = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "textStyle"];
 
-var _templateObject$f, _templateObject2$b, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$1, _templateObject8;
+var _templateObject$f, _templateObject2$b, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 var PLACEMENTS = ['top', 'bottom', 'start', 'end']; // , 'auto'
 
 var propTypes$j = {
@@ -6566,15 +6678,23 @@ var propTypes$j = {
   textStyle: PropTypes.any
 };
 var styles$f = StyleSheet.create(_objectSpread2({
-  '.offcanvas': css(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    bottom: 0;\n    z-index: $zindex-offcanvas;\n    display: flex;\n    flex-direction: column;\n    max-width: 100%;\n    // visibility: hidden;\n    background-color: $offcanvas-bg-color;\n    // background-clip: padding-box;\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // @include box-shadow($offcanvas-box-shadow);\n    // @include transition(transform $offcanvas-transition-duration ease-in-out);\n  "]))),
+  '.offcanvas': css(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    // bottom: 0;\n    z-index: $zindex-offcanvas;\n    display: flex;\n    flex-direction: column;\n    max-width: 100%;\n    // visibility: hidden;\n    background-color: $offcanvas-bg-color;\n    // background-clip: padding-box;\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // @include box-shadow($offcanvas-box-shadow);\n    // @include transition(transform $offcanvas-transition-duration ease-in-out);\n  "]))),
   '.offcanvas-text': css(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n    color: $offcanvas-color;\n  "]))),
   '.offcanvas-backdrop': css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: $zindex-offcanvas-backdrop;\n    width: 100%;\n    height: 100%;\n    background-color: $offcanvas-backdrop-bg;\n    opacity: $offcanvas-backdrop-opacity;\n  "]))),
-  '.offcanvas-start': css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    top: 0;\n    left: 0;\n    width: $offcanvas-horizontal-width;\n    border-right-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(-100%);\n  "]))),
-  '.offcanvas-end': css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 0;\n    width: $offcanvas-horizontal-width;\n    border-left-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(100%);\n  "]))),
-  '.offcanvas-top': css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 0;\n    left: 0;\n    height: $offcanvas-vertical-height;\n    max-height: 100%;\n    border-bottom-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(-100%);\n  "]))),
-  '.offcanvas-bottom': css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n    right: 0;\n    left: 0;\n    height: $offcanvas-vertical-height;\n    max-height: 100%;\n    width: 100%;\n    border-top-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(100%);\n  "])))
+  '.offcanvas-start': css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    top: 0;\n    bottom: 0; // added for bootstrap-rn\n    left: 0;\n    // width: $offcanvas-horizontal-width;\n    border-right-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(-100%);\n  "]))),
+  '.offcanvas-end': css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n    top: 0;\n    bottom: 0; // added for bootstrap-rn\n    right: 0;\n    // width: $offcanvas-horizontal-width;\n    border-left-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(100%);\n  "]))),
+  '.offcanvas-top': css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 0;\n    left: 0;\n    // height: $offcanvas-vertical-height;\n    max-height: 100%;\n    border-bottom-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(-100%);\n  "]))),
+  '.offcanvas-bottom': css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n    bottom: 0; // added for bootstrap-rn\n    right: 0;\n    left: 0;\n    // height: $offcanvas-vertical-height;\n    max-height: 100%;\n    width: 100%;\n    border-top-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(100%);\n  "]))),
+  // The following .offcanvas-dialog classes are added for bootstrap-rn,
+  // because otherwise the text would exceed a width of 100% on native
+  // and also additional width by SafeAreaView would not be applied.
+  '.offcanvas-dialog': css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    max-width: 100%;\n    max-height: 100%;\n  "]))),
+  '.offcanvas-dialog-start': css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: $offcanvas-horizontal-width;\n  "]))),
+  '.offcanvas-dialog-end': css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: $offcanvas-horizontal-width;\n  "]))),
+  '.offcanvas-dialog-top': css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    height: $offcanvas-vertical-height;\n  "]))),
+  '.offcanvas-dialog-bottom': css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    height: $offcanvas-vertical-height;\n  "])))
 }, each(GRID_BREAKPOINTS, function (breakpoint) {
-  return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas"), css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: relative; // inherit;\n        bottom: 0;\n        // z-index: auto;\n        flex-grow: 1;\n        // visibility: visible !important; // stylelint-disable-line declaration-no-important\n        background-color: transparent;\n        border-right-width: 0;\n        border-left-width: 0;\n        // @include box-shadow(none);\n        // @include transition(none);\n        // transform: none;\n      }\n    "])), next(breakpoint)));
+  return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas"), css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: relative; // inherit;\n        bottom: 0;\n        // z-index: auto;\n        flex-grow: 1;\n        // visibility: visible !important; // stylelint-disable-line declaration-no-important\n        background-color: transparent;\n        border-right-width: 0;\n        border-left-width: 0;\n        // @include box-shadow(none);\n        // @include transition(none);\n        // transform: none;\n      }\n    "])), next(breakpoint)));
 })));
 var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -6593,14 +6713,14 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var media = useMedia();
   var navbar = useContext(NavbarContext);
   var offcanvasRef = useRef();
+  var offcanvas = useOffcanvas();
   useScrollbarEffects({
-    ref: offcanvasRef,
     keepBodyScroll: scroll,
-    centered: false,
     visible: visible
   });
   var backdropClasses = getStyles(styles$f, ['.offcanvas-backdrop']);
   var classes = getStyles(styles$f, ['.offcanvas', ".offcanvas-".concat(placement), navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas")]);
+  var dialogClasses = getStyles(styles$f, ['.offcanvas-dialog', ".offcanvas-dialog-".concat(placement)]);
   var textClasses = getStyles(styles$f, ['.offcanvas-content-text']); // Render children without modal for navbar.
 
   if (navbar && navbar.expand && (navbar.expand === true || media.up(navbar.expand))) {
@@ -6621,14 +6741,23 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
     dialogRef: offcanvasRef,
     onClose: handleToggle,
     backdrop: backdrop
-  })), /*#__PURE__*/React.createElement(ScrollView, _extends({}, elementProps, {
+  })), /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: concatRefs(offcanvasRef, ref),
     style: [classes, style],
     textStyle: [textClasses, textStyle]
-  }), children));
+  }), /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      flexShrink: 1
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: dialogClasses
+  }, /*#__PURE__*/React.createElement(OffcanvasContext.Provider, {
+    value: offcanvas
+  }, /*#__PURE__*/React.createElement(OverlayProvider, null, children))))));
 });
 Offcanvas.displayName = 'Offcanvas';
 Offcanvas.propTypes = propTypes$j;
+Offcanvas.Context = OffcanvasContext;
 Offcanvas.Header = OffcanvasHeader;
 Offcanvas.Title = OffcanvasTitle;
 Offcanvas.Body = OffcanvasBody;