bootstrap-rn 0.2.0 → 0.2.2

package/dist/bootstrap-rn.esm.js

@@ -2928,7 +2928,7 @@ function useStyle(style, styleName) {
   };
 }
 
-var _excluded$1u = ["children", "style", "textStyle", "styleName"];
+var _excluded$1x = ["children", "style", "textStyle", "styleName"];
 var propTypes$1y = {
   children: PropTypes.node,
   // eslint-disable-next-line react/forbid-prop-types
@@ -2943,7 +2943,7 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = props.style,
       textStyle = props.textStyle,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$1u);
+      elementProps = _objectWithoutProperties(props, _excluded$1x);
 
   var media = useMedia();
   var context = useContext(TextStyleContext);
@@ -2967,7 +2967,7 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
 View.displayName = 'View';
 View.propTypes = propTypes$1y;
 
-var _excluded$1t = ["children", "color", "dismissible", "style", "textStyle"];
+var _excluded$1w = ["children", "color", "dismissible", "style", "textStyle"];
 
 var _templateObject$1c, _templateObject2$U, _templateObject3$s;
 var propTypes$1x = {
@@ -3003,7 +3003,7 @@ var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dismissible = _props$dismissible === void 0 ? false : _props$dismissible,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$1t);
+      elementProps = _objectWithoutProperties(props, _excluded$1w);
 
   var classes = getStyles(styles$1e, ['.alert', ".alert-".concat(color), dismissible && '.alert-dismissible']);
   var textClasses = getStyles(styles$1e, [".alert-".concat(color, " --text")]);
@@ -3017,7 +3017,7 @@ var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Alert.displayName = 'Alert';
 Alert.propTypes = propTypes$1x;
 
-var _excluded$1s = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
+var _excluded$1v = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
 
 var _templateObject$1b, _templateObject2$T, _templateObject3$r, _templateObject4$n, _templateObject5$k;
 var propTypes$1w = {
@@ -3059,7 +3059,7 @@ var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
       small = _props$small === void 0 ? false : _props$small,
       style = props.style,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$1s);
+      elementProps = _objectWithoutProperties(props, _excluded$1v);
 
   var media = useMedia();
   var context = useContext(TextStyleContext);
@@ -3091,7 +3091,7 @@ var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Text.displayName = 'Text';
 Text.propTypes = propTypes$1w;
 
-var _excluded$1r = ["children", "style", "textStyle"];
+var _excluded$1u = ["children", "style", "textStyle"];
 
 var _templateObject$1a, _templateObject2$S;
 var propTypes$1v = {
@@ -3109,7 +3109,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$1r);
+      elementProps = _objectWithoutProperties(props, _excluded$1u);
 
   var classes = getStyles(styles$1c, ['.badge']);
   var textClasses = getStyles(styles$1c, ['.badge --text']); // composite component
@@ -3182,7 +3182,7 @@ function useForcedContext(Context) {
   return context;
 }
 
-var _excluded$1q = ["children", "active", "style", "dividerStyle", "textStyle"];
+var _excluded$1t = ["children", "active", "style", "dividerStyle", "textStyle"];
 
 var _templateObject$19, _templateObject2$R, _templateObject3$q;
 var propTypes$1u = {
@@ -3207,7 +3207,7 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = props.style,
       dividerStyle = props.dividerStyle,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$1q);
+      elementProps = _objectWithoutProperties(props, _excluded$1t);
 
   var _useForcedContext = useForcedContext(ListContext),
       first = _useForcedContext.first;
@@ -3232,7 +3232,7 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 BreadcrumbItem.propTypes = propTypes$1u;
 
-var _excluded$1p = ["children", "style", "textStyle"];
+var _excluded$1s = ["children", "style", "textStyle"];
 
 var _templateObject$18, _templateObject2$Q;
 var propTypes$1t = {
@@ -3250,7 +3250,7 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$1p);
+      elementProps = _objectWithoutProperties(props, _excluded$1s);
 
   var list = useList(children);
   var classes = getStyles(styles$1a, ['.breadcrumb']);
@@ -3270,7 +3270,7 @@ Breadcrumb.Item = BreadcrumbItem;
 var ButtonGroupContext = /*#__PURE__*/React.createContext();
 ButtonGroupContext.displayName = 'ButtonGroupContext';
 
-var _excluded$1o = ["children", "size", "style"];
+var _excluded$1r = ["children", "size", "style"];
 
 var _templateObject$17;
 var propTypes$1s = {
@@ -3286,7 +3286,7 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       size = props.size,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$1o);
+      elementProps = _objectWithoutProperties(props, _excluded$1r);
 
   var list = useList(children);
   var classes = getStyles(styles$19, ['.btn-group']); // Accessiblity role tabpanel is only supported on web.
@@ -3305,7 +3305,7 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = propTypes$1s;
 
-var _excluded$1n = ["children", "style"];
+var _excluded$1q = ["children", "style"];
 
 var _templateObject$16;
 var propTypes$1r = {
@@ -3319,7 +3319,7 @@ var styles$18 = StyleSheet.create({
 var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$1n);
+      elementProps = _objectWithoutProperties(props, _excluded$1q);
 
   var classes = getStyles(styles$18, ['.btn-toolbar']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -3331,7 +3331,7 @@ var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ButtonToolbar.displayName = 'ButtonToolbar';
 ButtonToolbar.propTypes = propTypes$1r;
 
-var _excluded$1m = ["ref"];
+var _excluded$1p = ["ref"];
 function useModifier(name, props, ref) {
   var context = useForcedContext(Context);
   var useModifierHook = context.modifiers[name];
@@ -3342,12 +3342,12 @@ function useModifier(name, props, ref) {
 
   var _useModifierHook = useModifierHook(props),
       modifierRef = _useModifierHook.ref,
-      modifierProps = _objectWithoutProperties(_useModifierHook, _excluded$1m);
+      modifierProps = _objectWithoutProperties(_useModifierHook, _excluded$1p);
 
   return [modifierProps, concatRefs(modifierRef, ref)];
 }
 
-var _excluded$1l = ["toggle", "dismiss"],
+var _excluded$1o = ["toggle", "dismiss"],
     _excluded2$2 = ["ref"];
 
 var getActionHook = function getActionHook(toggle, dismiss) {
@@ -3365,7 +3365,7 @@ var getActionHook = function getActionHook(toggle, dismiss) {
 function useAction(props, ref) {
   var toggle = props.toggle,
       dismiss = props.dismiss,
-      restProps = _objectWithoutProperties(props, _excluded$1l);
+      restProps = _objectWithoutProperties(props, _excluded$1o);
 
   var useActionHook = getActionHook(toggle, dismiss);
 
@@ -3384,7 +3384,7 @@ function useAction(props, ref) {
   return [actionProps, concatRefs(actionRef, ref)];
 }
 
-var _excluded$1k = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
+var _excluded$1n = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
 var propTypes$1q = {
   children: PropTypes.node,
   active: PropTypes.bool,
@@ -3437,7 +3437,7 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       textStyle = actionProps.textStyle,
       activeTextStyle = actionProps.activeTextStyle,
       styleName = actionProps.styleName,
-      elementProps = _objectWithoutProperties(actionProps, _excluded$1k);
+      elementProps = _objectWithoutProperties(actionProps, _excluded$1n);
 
   var media = useMedia();
   var context = useContext(TextStyleContext);
@@ -3476,11 +3476,11 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Pressable.displayName = 'Pressable';
 Pressable.propTypes = propTypes$1q;
 
-var _excluded$1j = ["active", "handlePress"];
+var _excluded$1m = ["active", "handlePress"];
 function useToggleButton(props) {
   var active = props.active,
       handlePress = props.handlePress,
-      restProps = _objectWithoutProperties(props, _excluded$1j);
+      restProps = _objectWithoutProperties(props, _excluded$1m);
 
   var _useState = useState(active),
       _useState2 = _slicedToArray(_useState, 2),
@@ -3499,7 +3499,7 @@ function useToggleButton(props) {
   });
 }
 
-var _excluded$1i = ["children", "color", "size", "outline", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
+var _excluded$1l = ["children", "color", "size", "outline", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
 var _templateObject$15, _templateObject2$P, _templateObject3$p, _templateObject4$m, _templateObject5$j, _templateObject6$g, _templateObject7$b, _templateObject8$b, _templateObject9$9, _templateObject10$9, _templateObject11$6, _templateObject12$5, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
 var propTypes$1p = {
@@ -3590,7 +3590,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
       activeStyle = props.activeStyle,
       textStyle = props.textStyle,
       activeTextStyle = props.activeTextStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$1i);
+      elementProps = _objectWithoutProperties(props, _excluded$1l);
 
   invariant(color !== 'link' || !outline, 'Button link variant is only available as non outline style.');
   var listItem = useContext(ListContext);
@@ -3613,7 +3613,7 @@ Button.displayName = 'Button';
 Button.propTypes = propTypes$1p;
 Button.useToggle = useToggleButton;
 
-var _excluded$1h = ["children", "style", "textStyle"];
+var _excluded$1k = ["children", "style", "textStyle"];
 
 var _templateObject$14, _templateObject2$O;
 var propTypes$1o = {
@@ -3631,7 +3631,7 @@ var Blockquote = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$1h);
+      elementProps = _objectWithoutProperties(props, _excluded$1k);
 
   var classes = getStyles(styles$16, ['blockquote']);
   var textClasses = getStyles(styles$16, ['blockquote --text']); // Accessiblity role blockquote is only supported on web.
@@ -3647,7 +3647,7 @@ var Blockquote = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Blockquote.displayName = 'Blockquote';
 Blockquote.propTypes = propTypes$1o;
 
-var _excluded$1g = ["children", "style", "textStyle", "styleName"];
+var _excluded$1j = ["children", "style", "textStyle", "styleName"];
 
 var _templateObject$13, _templateObject2$N;
 var propTypes$1n = {
@@ -3660,7 +3660,7 @@ var propTypes$1n = {
   styleName: PropTypes.any
 };
 var styles$15 = StyleSheet.create({
-  body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    flex-grow: 1; // added for bootstrap-rn\n  "]))),
+  body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    height: 100%; // added for bootstrap-rn\n  "]))),
   'body --text': css(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteral(["\n    color: $body-color;\n    text-align: $body-text-align;\n  "])))
 });
 var Body = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -3668,7 +3668,7 @@ var Body = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = props.style,
       textStyle = props.textStyle,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$1g);
+      elementProps = _objectWithoutProperties(props, _excluded$1j);
 
   var classes = getStyles(styles$15, ['body']);
   var textClasses = getStyles(styles$15, ['body --text']);
@@ -3691,7 +3691,7 @@ var Body = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Body.displayName = 'Body';
 Body.propTypes = propTypes$1n;
 
-var _excluded$1f = ["children", "style", "textStyle"];
+var _excluded$1i = ["children", "style", "textStyle"];
 
 var _templateObject$12, _templateObject2$M;
 var propTypes$1m = {
@@ -3709,7 +3709,7 @@ var CardBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$1f);
+      elementProps = _objectWithoutProperties(props, _excluded$1i);
 
   var classes = getStyles(styles$14, ['.card-body']);
   var textClasses = getStyles(styles$14, [".card-body --text"]);
@@ -3722,7 +3722,7 @@ var CardBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 CardBody.displayName = 'CardBody';
 CardBody.propTypes = propTypes$1m;
 
-var _excluded$1e = ["children", "style", "textStyle"];
+var _excluded$1h = ["children", "style", "textStyle"];
 
 var _templateObject$11, _templateObject2$L;
 var propTypes$1l = {
@@ -3740,7 +3740,7 @@ var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$1e);
+      elementProps = _objectWithoutProperties(props, _excluded$1h);
 
   var classes = getStyles(styles$13, ['.card-header']);
   var textClasses = getStyles(styles$13, ['.card-header --text']);
@@ -3753,7 +3753,7 @@ var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
 CardHeader.displayName = 'CardHeader';
 CardHeader.propTypes = propTypes$1l;
 
-var _excluded$1d = ["children", "style", "textStyle"];
+var _excluded$1g = ["children", "style", "textStyle"];
 
 var _templateObject$10, _templateObject2$K;
 var propTypes$1k = {
@@ -3771,7 +3771,7 @@ var CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$1d);
+      elementProps = _objectWithoutProperties(props, _excluded$1g);
 
   var classes = getStyles(styles$12, ['.card-footer']);
   var textClasses = getStyles(styles$12, ['.card-footer --text']);
@@ -3784,7 +3784,7 @@ var CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
 CardFooter.displayName = 'CardFooter';
 CardFooter.propTypes = propTypes$1k;
 
-var _excluded$1c = ["children", "style"];
+var _excluded$1f = ["children", "style"];
 
 var _templateObject$$;
 var propTypes$1j = {
@@ -3798,7 +3798,7 @@ var styles$11 = StyleSheet.create({
 var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$1c);
+      elementProps = _objectWithoutProperties(props, _excluded$1f);
 
   var classes = getStyles(styles$11, ['.card']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -4114,7 +4114,7 @@ function useBackground(style, styleName) {
   return useBackgroundForPlatform(style, styleName);
 }
 
-var _excluded$1b = ["children", "onFocus", "onBlur", "onHoverIn", "onHoverOut", "onPressIn", "onPressOut", "disabled", "style", "textStyle", "styleName"];
+var _excluded$1e = ["children", "onFocus", "onBlur", "onHoverIn", "onHoverOut", "onPressIn", "onPressOut", "disabled", "style", "textStyle", "styleName"];
 
 var _templateObject$_, _templateObject2$J, _templateObject3$o, _templateObject4$l, _templateObject5$i;
 var propTypes$1i = {
@@ -4163,7 +4163,7 @@ var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = props.style,
       textStyle = props.textStyle,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$1b);
+      elementProps = _objectWithoutProperties(props, _excluded$1e);
 
   var media = useMedia();
 
@@ -4253,26 +4253,28 @@ function useIdentifier(prefix) {
 }
 
 function useControlledState(defaultValue, controlledValue) {
-  var onChange = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
+  var handleChange = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
 
   var _useState = useState(defaultValue),
       _useState2 = _slicedToArray(_useState, 2),
       stateValue = _useState2[0],
       setStateValue = _useState2[1];
 
-  var isControlled = typeof controlledValue === 'boolean';
+  var isControlled = controlledValue !== undefined && controlledValue !== null;
   var value = isControlled ? controlledValue : stateValue;
 
-  var setValue = function setValue(nextValue) {
+  var setValue = function setValue(next) {
+    var nextValue = typeof next === 'function' ? next(value) : next;
+
     if (value === nextValue) {
       return;
     }
 
     if (!isControlled) {
-      setStateValue(nextValue);
+      setStateValue(next);
     }
 
-    onChange(nextValue);
+    handleChange(nextValue);
   };
 
   return [value, setValue];
@@ -4317,12 +4319,12 @@ var CollapseProvider = function CollapseProvider(props) {
 CollapseProvider.displayName = 'CollapseProvider';
 CollapseProvider.propTypes = propTypes$1h;
 
-var _excluded$1a = ["onPress"];
+var _excluded$1d = ["onPress"];
 function useToggleCollapse(props) {
   var context = useForcedContext(CollapseContext);
 
   var handlePress = props.onPress,
-      restProps = _objectWithoutProperties(props, _excluded$1a);
+      restProps = _objectWithoutProperties(props, _excluded$1d);
 
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
     onPress: function onPress(event) {
@@ -4336,13 +4338,13 @@ function useToggleCollapse(props) {
   });
 }
 
-var _excluded$19 = ["children"];
+var _excluded$1c = ["children"];
 var propTypes$1g = {
   children: PropTypes.node
 };
 var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
-      elementProps = _objectWithoutProperties(props, _excluded$19);
+      elementProps = _objectWithoutProperties(props, _excluded$1c);
 
   var _useForcedContext = useForcedContext(CollapseContext),
       identifier = _useForcedContext.identifier,
@@ -4383,7 +4385,7 @@ function infix(breakpoint) {
 var NavbarContext = /*#__PURE__*/React.createContext();
 NavbarContext.displayName = 'NavbarContext';
 
-var _excluded$18 = ["fluid", "style"];
+var _excluded$1b = ["fluid", "style"];
 
 var _templateObject$Z, _templateObject2$I, _templateObject3$n, _templateObject4$k, _templateObject5$h, _templateObject6$f, _templateObject7$a, _templateObject8$a;
 var propTypes$1f = {
@@ -4438,7 +4440,7 @@ var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$fluid = props.fluid,
       fluid = _props$fluid === void 0 ? 'sm' : _props$fluid,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$18);
+      elementProps = _objectWithoutProperties(props, _excluded$1b);
 
   var navbar = useContext(NavbarContext);
   var classes = getStyles(styles$Z, ['.container', // Hint: Bootstrap's .container class is identical with .container-sm.
@@ -4455,7 +4457,7 @@ Container.propTypes = propTypes$1f;
 var FormCheckContext = /*#__PURE__*/React.createContext();
 FormCheckContext.displayName = 'FormCheckContext';
 
-var _excluded$17 = ["style"];
+var _excluded$1a = ["style"];
 var propTypes$1e = {
   type: PropTypes.oneOf(['checkbox', 'radio', 'switch']).isRequired,
   value: PropTypes.bool.isRequired,
@@ -4476,7 +4478,7 @@ var styles$Y = StyleSheet$1.create({
 
 var Input$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var style = _ref.style,
-      props = _objectWithoutProperties(_ref, _excluded$17);
+      props = _objectWithoutProperties(_ref, _excluded$1a);
 
   return unstable_createElement('input', _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
@@ -4559,7 +4561,7 @@ var FormCheckInputNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
 FormCheckInputNative.displayName = 'FormCheckInputNative';
 FormCheckInputNative.propTypes = propTypes$1d;
 
-var _excluded$16 = ["type", "value", "onFocus", "onBlur", "disabled", "valid", "invalid", "useNativeComponent", "style"];
+var _excluded$19 = ["type", "value", "onFocus", "onBlur", "disabled", "valid", "invalid", "useNativeComponent", "style"];
 
 var _templateObject$Y, _templateObject2$H, _templateObject3$m, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$9, _templateObject8$9, _templateObject9$8, _templateObject10$8, _templateObject11$5, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2;
 /* eslint-disable react/no-unused-prop-types */
@@ -4642,7 +4644,7 @@ var FormCheckInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _modifierProps$useNat = modifierProps.useNativeComponent,
       useNativeComponent = _modifierProps$useNat === void 0 ? false : _modifierProps$useNat,
       style = modifierProps.style,
-      elementProps = _objectWithoutProperties(modifierProps, _excluded$16);
+      elementProps = _objectWithoutProperties(modifierProps, _excluded$19);
 
   var media = useMedia();
 
@@ -4695,7 +4697,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$15 = ["children", "size", "sizeSm", "sizeMd", "sizeLg", "sizeXl", "style"];
+var _excluded$18 = ["children", "size", "sizeSm", "sizeMd", "sizeLg", "sizeXl", "style"];
 
 var _templateObject$X, _templateObject2$G, _templateObject3$l, _templateObject4$i, _templateObject5$f;
 var sizes = makeArray(GRID_COLUMNS).map(function (v) {
@@ -4730,7 +4732,7 @@ var Col = /*#__PURE__*/React.forwardRef(function (props, ref) {
       sizeLg = props.sizeLg,
       sizeXl = props.sizeXl,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$15);
+      elementProps = _objectWithoutProperties(props, _excluded$18);
 
   var classes = getStyles(styles$W, ['*', ".col-".concat(size.toString()), sizeSm && ".col-sm-".concat(sizeSm.toString()), sizeMd && ".col-md-".concat(sizeMd.toString()), sizeLg && ".col-lg-".concat(sizeLg.toString()), sizeXl && ".col-xl-".concat(sizeXl.toString())]);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -4741,7 +4743,7 @@ var Col = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Col.displayName = 'Col';
 Col.propTypes = propTypes$1b;
 
-var _excluded$14 = ["children", "style"];
+var _excluded$17 = ["children", "style"];
 
 var _templateObject$W;
 var propTypes$1a = {
@@ -4755,7 +4757,7 @@ var styles$V = StyleSheet.create({
 var Code = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$14);
+      elementProps = _objectWithoutProperties(props, _excluded$17);
 
   var classes = getStyles(styles$V, ['code']); // Accessiblity role code is only supported on web.
 
@@ -4772,12 +4774,12 @@ Code.propTypes = propTypes$1a;
 var DropdownContext = /*#__PURE__*/React.createContext();
 DropdownContext.displayName = 'DropdownContext';
 
-var _excluded$13 = ["onPress"];
+var _excluded$16 = ["onPress"];
 function useToggleDropdown(props) {
   var context = useForcedContext(DropdownContext);
 
   var handlePress = props.onPress,
-      restProps = _objectWithoutProperties(props, _excluded$13);
+      restProps = _objectWithoutProperties(props, _excluded$16);
 
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
     nativeID: context.identifier,
@@ -4970,7 +4972,7 @@ var BackdropHandler = function BackdropHandler(props) {
 BackdropHandler.displayName = 'BackdropHandler';
 BackdropHandler.propTypes = propTypes$17;
 
-var _excluded$12 = ["children", "start", "right", "end", "style", "textStyle"];
+var _excluded$15 = ["children", "start", "right", "end", "style", "textStyle"];
 
 var _templateObject$U, _templateObject2$F, _templateObject3$k, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$8, _templateObject8$8, _templateObject9$7, _templateObject10$7;
 var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
@@ -5036,7 +5038,7 @@ 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$12);
+      elementProps = _objectWithoutProperties(props, _excluded$15);
 
   if (right !== undefined) {
     // eslint-disable-next-line no-console
@@ -5112,7 +5114,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
 DropdownMenu.displayName = 'DropdownMenu';
 DropdownMenu.propTypes = propTypes$16;
 
-var _excluded$11 = ["children", "size", "style"];
+var _excluded$14 = ["children", "size", "style"];
 
 var _templateObject$T, _templateObject2$E;
 var propTypes$15 = {
@@ -5132,7 +5134,7 @@ var Heading$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       size = props.size,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$11);
+      elementProps = _objectWithoutProperties(props, _excluded$14);
 
   var classes = getStyles(styles$S, ['heading', ".h".concat(size)]);
   return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
@@ -5145,7 +5147,7 @@ var Heading$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Heading$2.displayName = 'Heading';
 Heading$2.propTypes = propTypes$15;
 
-var _excluded$10 = ["children", "style", "textStyle"];
+var _excluded$13 = ["children", "style", "textStyle"];
 
 var _templateObject$S, _templateObject2$D;
 var propTypes$14 = {
@@ -5163,7 +5165,7 @@ var DropdownHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$10);
+      elementProps = _objectWithoutProperties(props, _excluded$13);
 
   var classes = getStyles(styles$R, ['.dropdown-header']);
   var textClasses = getStyles(styles$R, ['.dropdown-header --text']); // composite component
@@ -5179,7 +5181,7 @@ var DropdownHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
 DropdownHeader.displayName = 'DropdownHeader';
 DropdownHeader.propTypes = propTypes$14;
 
-var _excluded$$ = ["children", "onPress", "active", "disabled", "style", "textStyle"];
+var _excluded$12 = ["children", "onPress", "active", "disabled", "style", "textStyle"];
 
 var _templateObject$R, _templateObject2$C, _templateObject3$j, _templateObject4$g, _templateObject5$d, _templateObject6$c;
 var propTypes$13 = {
@@ -5210,7 +5212,7 @@ var DropdownItem = function DropdownItem(props) {
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$$);
+      elementProps = _objectWithoutProperties(props, _excluded$12);
 
   var dropdown = useForcedContext(DropdownContext);
   var classes = getStyles(styles$Q, ['.dropdown-item', active && '.dropdown-item.active', disabled && '.dropdown-item.disabled']);
@@ -5228,7 +5230,7 @@ var DropdownItem = function DropdownItem(props) {
 DropdownItem.displayName = 'DropdownItem';
 DropdownItem.propTypes = propTypes$13;
 
-var _excluded$_ = ["children", "style", "textStyle"];
+var _excluded$11 = ["children", "style", "textStyle"];
 
 var _templateObject$Q, _templateObject2$B;
 var propTypes$12 = {
@@ -5246,7 +5248,7 @@ var DropdownItemText = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$_);
+      elementProps = _objectWithoutProperties(props, _excluded$11);
 
   var classes = getStyles(styles$P, ['.dropdown-item-text']);
   var textClasses = getStyles(styles$P, ['.dropdown-item-text --text']); // composite component
@@ -5261,7 +5263,7 @@ var DropdownItemText = /*#__PURE__*/React.forwardRef(function (props, ref) {
 DropdownItemText.displayName = 'DropdownItemText';
 DropdownItemText.propTypes = propTypes$12;
 
-var _excluded$Z = ["style"];
+var _excluded$10 = ["style"];
 
 var _templateObject$P;
 var propTypes$11 = {
@@ -5273,7 +5275,7 @@ var styles$O = StyleSheet.create({
 });
 var DropdownDivider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$Z);
+      elementProps = _objectWithoutProperties(props, _excluded$10);
 
   var classes = getStyles(styles$O, ['.dropdown-divider']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -5306,12 +5308,12 @@ function useDropdown(defaultVisible, controlledVisible, onToggle, direction, dis
   }, [visible]);
 }
 
-var _excluded$Y = ["onPress"];
+var _excluded$$ = ["onPress"];
 function useDismissDropdown(props) {
   var context = useForcedContext(DropdownContext);
 
   var handlePress = props.onPress,
-      restProps = _objectWithoutProperties(props, _excluded$Y);
+      restProps = _objectWithoutProperties(props, _excluded$$);
 
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
     onPress: function onPress(event) {
@@ -5321,7 +5323,7 @@ function useDismissDropdown(props) {
   });
 }
 
-var _excluded$X = ["children", "defaultVisible", "visible", "onToggle", "direction", "display", "autoClose", "style"];
+var _excluded$_ = ["children", "defaultVisible", "visible", "onToggle", "direction", "display", "autoClose", "style"];
 
 var _templateObject$O;
 var DIRECTIONS = ['top', 'bottom', 'start', 'end'];
@@ -5352,7 +5354,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$autoClose = props.autoClose,
       autoClose = _props$autoClose === void 0 ? 'outside' : _props$autoClose,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$X);
+      elementProps = _objectWithoutProperties(props, _excluded$_);
 
   var dropdown = useDropdown(defaultVisible, visible, onToggle, direction, display, autoClose);
   var classes = getStyles(styles$N, ['.dropdown']);
@@ -5375,7 +5377,7 @@ Dropdown.Divider = DropdownDivider;
 Dropdown.useDismiss = useDismissDropdown;
 Dropdown.useToggle = useToggleDropdown;
 
-var _excluded$W = ["children", "size", "style"];
+var _excluded$Z = ["children", "size", "style"];
 
 var _templateObject$N;
 var propTypes$$ = {
@@ -5393,7 +5395,7 @@ var DisplayHeading = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       size = props.size,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$W);
+      elementProps = _objectWithoutProperties(props, _excluded$Z);
 
   var classes = getStyles(styles$M, [".display-".concat(size)]);
   return /*#__PURE__*/React.createElement(Heading$2, _extends({}, elementProps, {
@@ -5405,7 +5407,7 @@ var DisplayHeading = /*#__PURE__*/React.forwardRef(function (props, ref) {
 DisplayHeading.displayName = 'Heading';
 DisplayHeading.propTypes = propTypes$$;
 
-var _excluded$V = ["children", "type", "style"];
+var _excluded$Y = ["children", "type", "style"];
 
 var _templateObject$M;
 var propTypes$_ = {
@@ -5423,7 +5425,7 @@ var Feedback = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       type = props.type,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$V);
+      elementProps = _objectWithoutProperties(props, _excluded$Y);
 
   var classes = getStyles(styles$L, [".".concat(type, "-feedback")]);
   return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
@@ -5434,7 +5436,7 @@ var Feedback = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Feedback.displayName = 'Feedback';
 Feedback.propTypes = propTypes$_;
 
-var _excluded$U = ["children", "htmlFor"];
+var _excluded$X = ["children", "htmlFor"];
 var propTypes$Z = {
   children: PropTypes.node.isRequired,
   htmlFor: PropTypes.string
@@ -5442,7 +5444,7 @@ var propTypes$Z = {
 var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       htmlFor = props.htmlFor,
-      elementProps = _objectWithoutProperties(props, _excluded$U); // Ref: https://github.com/necolas/react-native-web/issues/1651
+      elementProps = _objectWithoutProperties(props, _excluded$X); // Ref: https://github.com/necolas/react-native-web/issues/1651
 
 
   var forRef = React.useCallback(function (node) {
@@ -5461,7 +5463,7 @@ var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Heading$1.displayName = 'Heading';
 Heading$1.propTypes = propTypes$Z;
 
-var _excluded$T = ["children", "style", "textStyle"];
+var _excluded$W = ["children", "style", "textStyle"];
 
 var _templateObject$L, _templateObject2$A, _templateObject3$i, _templateObject4$f;
 var propTypes$Y = {
@@ -5484,7 +5486,7 @@ var FormCheckLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$T);
+      elementProps = _objectWithoutProperties(props, _excluded$W);
 
   var _useForcedContext = useForcedContext(FormCheckContext),
       disabled = _useForcedContext.disabled,
@@ -5504,6 +5506,8 @@ var FormCheckLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
 FormCheckLabel.displayName = 'FormCheckLabel';
 FormCheckLabel.propTypes = propTypes$Y;
 
+var _excluded$V = ["children", "reverse", "disabled", "valid", "invalid", "style"];
+
 var _templateObject$K, _templateObject2$z, _templateObject3$h;
 var propTypes$X = {
   children: PropTypes.node.isRequired,
@@ -5529,12 +5533,14 @@ var FormCheck = /*#__PURE__*/React.forwardRef(function (props, ref) {
       valid = _props$valid === void 0 ? false : _props$valid,
       _props$invalid = props.invalid,
       invalid = _props$invalid === void 0 ? false : _props$invalid,
-      style = props.style;
+      style = props.style,
+      elementProps = _objectWithoutProperties(props, _excluded$V);
+
   var classes = getStyles(styles$J, ['.form-check', reverse && '.form-check-reverse']);
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style]
-  }, /*#__PURE__*/React.createElement(FormCheckContext.Provider, {
+  }), /*#__PURE__*/React.createElement(FormCheckContext.Provider, {
     value: {
       reverse: reverse,
       disabled: disabled,
@@ -5547,7 +5553,7 @@ FormCheck.displayName = 'FormCheck';
 FormCheck.propTypes = propTypes$X;
 FormCheck.Label = FormCheckLabel;
 
-var _excluded$S = ["children", "style", "textStyle"];
+var _excluded$U = ["children", "style", "textStyle"];
 
 var _templateObject$J, _templateObject2$y;
 var propTypes$W = {
@@ -5565,7 +5571,7 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$S);
+      elementProps = _objectWithoutProperties(props, _excluded$U);
 
   var classes = getStyles(styles$I, ['.form-label']);
   var textClasses = getStyles(styles$I, ['.form-label --text']);
@@ -5578,7 +5584,7 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
 FormLabel.displayName = 'FormLabel';
 FormLabel.propTypes = propTypes$W;
 
-var _excluded$R = ["children", "style", "textStyle"];
+var _excluded$T = ["children", "style", "textStyle"];
 
 var _templateObject$I, _templateObject2$x;
 var propTypes$V = {
@@ -5596,7 +5602,7 @@ var FormText = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$R);
+      elementProps = _objectWithoutProperties(props, _excluded$T);
 
   var classes = getStyles(styles$H, ['.form-text']);
   var textClasses = getStyles(styles$H, ['.form-text --text']); // composite component
@@ -5611,7 +5617,7 @@ var FormText = /*#__PURE__*/React.forwardRef(function (props, ref) {
 FormText.displayName = 'FormText';
 FormText.propTypes = propTypes$V;
 
-var _excluded$Q = ["onFocus", "onBlur", "style", "styleName"];
+var _excluded$S = ["onFocus", "onBlur", "style", "styleName"];
 var propTypes$U = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
@@ -5627,7 +5633,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _onBlur = _props$onBlur === void 0 ? function () {} : _props$onBlur,
       style = props.style,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$Q);
+      elementProps = _objectWithoutProperties(props, _excluded$S);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -5659,7 +5665,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
 TextInput.displayName = 'TextInput';
 TextInput.propTypes = propTypes$U;
 
-var _excluded$P = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "editable", "selectTextOnFocus", "style"];
+var _excluded$R = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "editable", "selectTextOnFocus", "style"];
 
 var _templateObject$H, _templateObject2$w, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7, _templateObject8$7;
 var propTypes$T = {
@@ -5713,7 +5719,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _modifierProps$select = modifierProps.selectTextOnFocus,
       selectTextOnFocus = _modifierProps$select === void 0 ? true : _modifierProps$select,
       style = modifierProps.style,
-      elementProps = _objectWithoutProperties(modifierProps, _excluded$P);
+      elementProps = _objectWithoutProperties(modifierProps, _excluded$R);
 
   var classes = getStyles(styles$G, ['.form-control', disabled && '.form-control.disabled', size === 'sm' && '.form-control-sm', size === 'lg' && '.form-control-lg', multiline && '.form-control-multiline', multiline && size === 'sm' && '.form-control-multiline-sm', multiline && size === 'lg' && '.form-control-multiline-lg', valid && '.form-control:valid', invalid && '.form-control:invalid']);
   return /*#__PURE__*/React.createElement(TextInput, _extends({}, elementProps, {
@@ -5854,7 +5860,7 @@ function useTrigger(rawTrigger, props, elementProps, ref) {
 var PopoverContext = /*#__PURE__*/React.createContext();
 PopoverContext.displayName = 'PopoverContext';
 
-var _excluded$O = ["style"];
+var _excluded$Q = ["style"];
 
 var _templateObject$G, _templateObject2$v, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject10$6, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$2, _templateObject15$1;
 var propTypes$S = {
@@ -5896,7 +5902,7 @@ var styles$F = StyleSheet.create({
 });
 var PopoverArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$O);
+      elementProps = _objectWithoutProperties(props, _excluded$Q);
 
   var _useForcedContext = useForcedContext(PopoverContext),
       placement = _useForcedContext.placement,
@@ -5918,7 +5924,7 @@ var PopoverArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
 PopoverArrow.displayName = 'PopoverArrow';
 PopoverArrow.propTypes = propTypes$S;
 
-var _excluded$N = ["children", "style", "textStyle"];
+var _excluded$P = ["children", "style", "textStyle"];
 
 var _templateObject$F, _templateObject2$u;
 var propTypes$R = {
@@ -5936,7 +5942,7 @@ var PopoverHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$N);
+      elementProps = _objectWithoutProperties(props, _excluded$P);
 
   var classes = getStyles(styles$E, ['.popover-header']);
   var textClasses = getStyles(styles$E, ['.popover-header --text']); // composite component
@@ -5952,7 +5958,7 @@ var PopoverHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
 PopoverHeader.displayName = 'PopoverHeader';
 PopoverHeader.propTypes = propTypes$R;
 
-var _excluded$M = ["children", "style", "textStyle"];
+var _excluded$O = ["children", "style", "textStyle"];
 
 var _templateObject$E, _templateObject2$t;
 var propTypes$Q = {
@@ -5970,7 +5976,7 @@ var PopoverBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$M);
+      elementProps = _objectWithoutProperties(props, _excluded$O);
 
   var classes = getStyles(styles$D, ['.popover-body']);
   var textClasses = getStyles(styles$D, ['.popover-body --text']);
@@ -5983,7 +5989,7 @@ var PopoverBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 PopoverBody.displayName = 'PopoverBody';
 PopoverBody.propTypes = propTypes$Q;
 
-var _excluded$L = ["children", "placement", "popper", "style", "textStyle", "arrowStyle"];
+var _excluded$N = ["children", "placement", "popper", "style", "textStyle", "arrowStyle"];
 
 var _templateObject$D, _templateObject2$s;
 var propTypes$P = {
@@ -6009,7 +6015,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = props.style,
       textStyle = props.textStyle,
       arrowStyle = props.arrowStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$L);
+      elementProps = _objectWithoutProperties(props, _excluded$N);
 
   var popover = {
     placement: transformPlacement$1(placement),
@@ -6035,7 +6041,7 @@ Popover.Arrow = PopoverArrow;
 Popover.Header = PopoverHeader;
 Popover.Body = PopoverBody;
 
-var _excluded$K = ["title", "content", "autoClose", "trigger", "placement"],
+var _excluded$M = ["title", "content", "autoClose", "trigger", "placement"],
     _excluded2$1 = ["popover"];
 var propTypes$O = {
   popover: PropTypes.shape(_objectSpread2({
@@ -6056,7 +6062,7 @@ function injectPopover(Target) {
         trigger = _props$popover$trigge === void 0 ? 'press' : _props$popover$trigge,
         _props$popover$placem = _props$popover.placement,
         placement = _props$popover$placem === void 0 ? 'right' : _props$popover$placem,
-        tooltipProps = _objectWithoutProperties(_props$popover, _excluded$K),
+        tooltipProps = _objectWithoutProperties(_props$popover, _excluded$M),
         elementProps = _objectWithoutProperties(props, _excluded2$1);
     /* eslint-enable */
 
@@ -6103,7 +6109,7 @@ function injectPopover(Target) {
 var TooltipContext = /*#__PURE__*/React.createContext();
 TooltipContext.displayName = 'TooltipContext';
 
-var _excluded$J = ["style"];
+var _excluded$L = ["style"];
 
 var _templateObject$C, _templateObject2$r, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$5;
 var propTypes$N = {
@@ -6124,7 +6130,7 @@ var styles$B = StyleSheet.create({
 });
 var TooltipArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$J);
+      elementProps = _objectWithoutProperties(props, _excluded$L);
 
   var _useForcedContext = useForcedContext(TooltipContext),
       placement = _useForcedContext.placement,
@@ -6143,7 +6149,7 @@ var TooltipArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
 TooltipArrow.displayName = 'TooltipArrow';
 TooltipArrow.propTypes = propTypes$N;
 
-var _excluded$I = ["children", "style", "textStyle"];
+var _excluded$K = ["children", "style", "textStyle"];
 
 var _templateObject$B, _templateObject2$q;
 var propTypes$M = {
@@ -6161,7 +6167,7 @@ var TooltipInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$I);
+      elementProps = _objectWithoutProperties(props, _excluded$K);
 
   var classes = getStyles(styles$A, ['.tooltip-inner']);
   var textClasses = getStyles(styles$A, ['.tooltip-inner --text']); // composite component
@@ -6176,7 +6182,7 @@ var TooltipInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
 TooltipInner.displayName = 'TooltipInner';
 TooltipInner.propTypes = propTypes$M;
 
-var _excluded$H = ["children", "placement", "popper", "style", "textStyle", "arrowStyle"];
+var _excluded$J = ["children", "placement", "popper", "style", "textStyle", "arrowStyle"];
 
 var _templateObject$A, _templateObject2$p, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$8;
 var propTypes$L = {
@@ -6206,7 +6212,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = props.style,
       textStyle = props.textStyle,
       arrowStyle = props.arrowStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$H);
+      elementProps = _objectWithoutProperties(props, _excluded$J);
 
   var tooltip = {
     placement: transformPlacement$1(placement),
@@ -6232,7 +6238,7 @@ Tooltip.propTypes = propTypes$L;
 Tooltip.Arrow = TooltipArrow;
 Tooltip.Inner = TooltipInner;
 
-var _excluded$G = ["title", "autoClose", "trigger", "placement"],
+var _excluded$I = ["title", "autoClose", "trigger", "placement"],
     _excluded2 = ["tooltip"];
 var propTypes$K = {
   tooltip: PropTypes.shape(_objectSpread2({
@@ -6251,7 +6257,7 @@ function injectTooltip(Target) {
         trigger = _props$tooltip$trigge === void 0 ? 'hover focus' : _props$tooltip$trigge,
         _props$tooltip$placem = _props$tooltip.placement,
         placement = _props$tooltip$placem === void 0 ? 'top' : _props$tooltip$placem,
-        tooltipProps = _objectWithoutProperties(_props$tooltip, _excluded$G),
+        tooltipProps = _objectWithoutProperties(_props$tooltip, _excluded$I),
         elementProps = _objectWithoutProperties(props, _excluded2);
     /* eslint-enable */
 
@@ -6294,7 +6300,7 @@ function injectTooltip(Target) {
   return OverlayTooltip;
 }
 
-var _excluded$F = ["style", "styleName"];
+var _excluded$H = ["style", "styleName"];
 var propTypes$J = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -6304,7 +6310,7 @@ var propTypes$J = {
 var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$F);
+      elementProps = _objectWithoutProperties(props, _excluded$H);
 
   var media = useMedia();
   var resolveStyle = useStyle(style, styleName);
@@ -6318,7 +6324,7 @@ var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Image.displayName = 'Image';
 Image.propTypes = propTypes$J;
 
-var _excluded$E = ["style", "styleName"];
+var _excluded$G = ["style", "styleName"];
 var propTypes$I = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -6328,7 +6334,7 @@ var propTypes$I = {
 var ImageBackground = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$E);
+      elementProps = _objectWithoutProperties(props, _excluded$G);
 
   var media = useMedia();
   var resolveStyle = useStyle(style, styleName);
@@ -6345,7 +6351,7 @@ ImageBackground.propTypes = propTypes$I;
 var ListGroupContext = /*#__PURE__*/React.createContext();
 ListGroupContext.displayName = 'ListGroupContext';
 
-var _excluded$D = ["children", "color", "active", "disabled", "style", "textStyle"];
+var _excluded$F = ["children", "color", "active", "disabled", "style", "textStyle"];
 
 var _templateObject$z, _templateObject2$o, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$1;
 var propTypes$H = {
@@ -6359,7 +6365,7 @@ var propTypes$H = {
   textStyle: PropTypes.any
 };
 var styles$y = StyleSheet.create(_objectSpread2({
-  '.list-group-item': css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n    position: relative;\n    // display: block;\n    flex-direction: row; // added for bootstrap-rn\n    padding: $list-group-item-padding-y $list-group-item-padding-x;\n    background-color: $list-group-bg;\n    border: $list-group-border-width solid $list-group-border-color;\n  "]))),
+  '.list-group-item': css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n    position: relative;\n    // display: block;\n    padding: $list-group-item-padding-y $list-group-item-padding-x;\n    background-color: $list-group-bg;\n    border: $list-group-border-width solid $list-group-border-color;\n  "]))),
   '.list-group-item --text': css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteral(["\n    color: $list-group-color;\n    text-decoration: none; // if($link-decoration == none, null, none);\n  "]))),
   '.list-group-item:first-child': css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n    border-top-left-radius: $list-group-border-radius;\n    border-top-right-radius: $list-group-border-radius;\n  "]))),
   '.list-group-item:last-child': css(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral(["\n    border-bottom-left-radius: $list-group-border-radius;\n    border-bottom-right-radius: $list-group-border-radius;\n  "]))),
@@ -6389,7 +6395,7 @@ var ListGroupItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$D);
+      elementProps = _objectWithoutProperties(props, _excluded$F);
 
   var _useForcedContext = useForcedContext(ListContext),
       first = _useForcedContext.first,
@@ -6411,7 +6417,7 @@ var ListGroupItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ListGroupItem.displayName = 'ListGroupItem';
 ListGroupItem.propTypes = propTypes$H;
 
-var _excluded$C = ["children", "color", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
+var _excluded$E = ["children", "color", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
 var _templateObject$y, _templateObject2$n, _templateObject3$b, _templateObject4$9, _templateObject5$7, _templateObject6$6;
 var propTypes$G = {
@@ -6464,7 +6470,7 @@ var ListGroupItemAction = /*#__PURE__*/React.forwardRef(function (props, ref) {
       activeStyle = modifierProps.activeStyle,
       textStyle = modifierProps.textStyle,
       activeTextStyle = modifierProps.activeTextStyle,
-      elementProps = _objectWithoutProperties(modifierProps, _excluded$C);
+      elementProps = _objectWithoutProperties(modifierProps, _excluded$E);
 
   var _useForcedContext = useForcedContext(ListContext),
       first = _useForcedContext.first,
@@ -6494,7 +6500,7 @@ var ListGroupItemAction = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ListGroupItemAction.displayName = 'ListGroupItemAction';
 ListGroupItemAction.propTypes = propTypes$G;
 
-var _excluded$B = ["children", "flush", "style"];
+var _excluded$D = ["children", "flush", "style"];
 
 var _templateObject$x, _templateObject2$m;
 var propTypes$F = {
@@ -6524,7 +6530,7 @@ var ListGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       flush = props.flush,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$B);
+      elementProps = _objectWithoutProperties(props, _excluded$D);
 
   var list = useList(children);
   var classes = getStyles(styles$x, ['.list-group', flush && '.list-group-flush']); // TODO: Implement TabContext
@@ -6545,7 +6551,7 @@ ListGroup.propTypes = propTypes$F;
 ListGroup.Item = ListGroupItem;
 ListGroup.ItemAction = ListGroupItemAction;
 
-var _excluded$A = ["children", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onPressIn", "onPressOut", "style"];
+var _excluded$C = ["children", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onPressIn", "onPressOut", "style"];
 
 var _templateObject$w;
 var propTypes$E = {
@@ -6587,7 +6593,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _actionProps$onPressO = actionProps.onPressOut,
       _onPressOut = _actionProps$onPressO === void 0 ? function () {} : _actionProps$onPressO,
       style = actionProps.style,
-      elementProps = _objectWithoutProperties(actionProps, _excluded$A);
+      elementProps = _objectWithoutProperties(actionProps, _excluded$C);
 
   var media = useMedia();
 
@@ -6655,7 +6661,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Link.displayName = 'Link';
 Link.propTypes = propTypes$E;
 
-var _excluded$z = ["children", "contentContainerStyle", "style", "textStyle", "styleName"];
+var _excluded$B = ["children", "contentContainerStyle", "style", "textStyle", "styleName"];
 var propTypes$D = {
   children: PropTypes.node,
   // eslint-disable-next-line react/forbid-prop-types
@@ -6673,7 +6679,7 @@ var ScrollView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = props.style,
       textStyle = props.textStyle,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$z);
+      elementProps = _objectWithoutProperties(props, _excluded$B);
 
   var media = useMedia();
   var context = useContext(TextStyleContext);
@@ -6768,7 +6774,7 @@ function useModal(scrollable) {
   }, [scrollable]);
 }
 
-var _excluded$y = ["children", "style"];
+var _excluded$A = ["children", "style"];
 
 var _templateObject$v;
 var propTypes$C = {
@@ -6782,7 +6788,7 @@ var styles$v = StyleSheet.create({
 var ModalHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$y);
+      elementProps = _objectWithoutProperties(props, _excluded$A);
 
   var classes = getStyles(styles$v, ['.modal-header']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -6793,7 +6799,7 @@ var ModalHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ModalHeader.displayName = 'ModalHeader';
 ModalHeader.propTypes = propTypes$C;
 
-var _excluded$x = ["children", "style"];
+var _excluded$z = ["children", "style"];
 
 var _templateObject$u;
 var propTypes$B = {
@@ -6807,7 +6813,7 @@ var styles$u = StyleSheet.create({
 var ModalTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$x);
+      elementProps = _objectWithoutProperties(props, _excluded$z);
 
   var classes = getStyles(styles$u, ['.modal-title']);
   return /*#__PURE__*/React.createElement(Heading$2, _extends({
@@ -6820,7 +6826,7 @@ var ModalTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ModalTitle.displayName = 'ModalTitle';
 ModalTitle.propTypes = propTypes$B;
 
-var _excluded$w = ["children", "style", "contentContainerStyle"];
+var _excluded$y = ["children", "style", "contentContainerStyle"];
 
 var _templateObject$t;
 var propTypes$A = {
@@ -6837,7 +6843,7 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       contentContainerStyle = props.contentContainerStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$w);
+      elementProps = _objectWithoutProperties(props, _excluded$y);
 
   var _useForcedContext = useForcedContext(ModalContext),
       scrollable = _useForcedContext.scrollable;
@@ -6853,7 +6859,7 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ModalBody.displayName = 'ModalBody';
 ModalBody.propTypes = propTypes$A;
 
-var _excluded$v = ["children", "style"];
+var _excluded$x = ["children", "style"];
 
 var _templateObject$s;
 var propTypes$z = {
@@ -6867,7 +6873,7 @@ var styles$s = StyleSheet.create({
 var ModalFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$v);
+      elementProps = _objectWithoutProperties(props, _excluded$x);
 
   var classes = getStyles(styles$s, ['.modal-footer']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -6878,7 +6884,7 @@ var ModalFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ModalFooter.displayName = 'ModalFooter';
 ModalFooter.propTypes = propTypes$z;
 
-var _excluded$u = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "textStyle"];
+var _excluded$w = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "textStyle"];
 
 var _templateObject$r, _templateObject2$l, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$2;
 var MODAL_SIZES = ['sm', 'lg', 'xl'];
@@ -6921,7 +6927,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleToggle = props.onToggle,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$u);
+      elementProps = _objectWithoutProperties(props, _excluded$w);
 
   var dialogRef = useRef();
   var modal = useModal(scrollable);
@@ -6977,7 +6983,7 @@ Modal.Footer = ModalFooter;
 var NavContext = /*#__PURE__*/React.createContext();
 NavContext.displayName = 'NavContext';
 
-var _excluded$t = ["children", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
+var _excluded$v = ["children", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
 var _templateObject$q, _templateObject2$k, _templateObject3$9, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 var propTypes$x = {
@@ -7031,7 +7037,7 @@ var NavLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
       activeStyle = modifierProps.activeStyle,
       textStyle = modifierProps.textStyle,
       activeTextStyle = modifierProps.activeTextStyle,
-      elementProps = _objectWithoutProperties(modifierProps, _excluded$t);
+      elementProps = _objectWithoutProperties(modifierProps, _excluded$v);
 
   var _useForcedContext = useForcedContext(NavContext),
       variant = _useForcedContext.variant;
@@ -7061,7 +7067,7 @@ NavLink.propTypes = propTypes$x;
 var TabContext = /*#__PURE__*/createContext();
 TabContext.displayName = 'TabContext';
 
-var _excluded$s = ["children", "variant", "style"];
+var _excluded$u = ["children", "variant", "style"];
 
 var _templateObject$p, _templateObject2$j, _templateObject3$8, _templateObject4$6;
 var propTypes$w = {
@@ -7095,7 +7101,7 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       variant = props.variant,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$s);
+      elementProps = _objectWithoutProperties(props, _excluded$u);
 
   var navbar = useContext(NavbarContext);
   var tabbable = useContext(TabContext);
@@ -7116,7 +7122,7 @@ Nav.propTypes = propTypes$w;
 Nav.Context = NavContext;
 Nav.Link = NavLink;
 
-var _excluded$r = ["children", "style", "textStyle"];
+var _excluded$t = ["children", "style", "textStyle"];
 
 var _templateObject$o, _templateObject2$i, _templateObject3$7;
 var propTypes$v = {
@@ -7135,7 +7141,7 @@ var NavbarText = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$r);
+      elementProps = _objectWithoutProperties(props, _excluded$t);
 
   var _useForcedContext = useForcedContext(NavbarContext),
       variant = _useForcedContext.variant;
@@ -7153,7 +7159,7 @@ var NavbarText = /*#__PURE__*/React.forwardRef(function (props, ref) {
 NavbarText.displayName = 'NavbarText';
 NavbarText.propTypes = propTypes$v;
 
-var _excluded$q = ["children", "style", "textStyle"];
+var _excluded$s = ["children", "style", "textStyle"];
 
 var _templateObject$n, _templateObject2$h, _templateObject3$6, _templateObject4$5;
 var propTypes$u = {
@@ -7173,7 +7179,7 @@ var NavbarBrand = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$q);
+      elementProps = _objectWithoutProperties(props, _excluded$s);
 
   var _useForcedContext = useForcedContext(NavbarContext),
       variant = _useForcedContext.variant;
@@ -7189,7 +7195,7 @@ var NavbarBrand = /*#__PURE__*/React.forwardRef(function (props, ref) {
 NavbarBrand.displayName = 'NavbarBrand';
 NavbarBrand.propTypes = propTypes$u;
 
-var _excluded$p = ["children", "style"];
+var _excluded$r = ["children", "style"];
 
 var _templateObject$m, _templateObject2$g;
 var propTypes$t = {
@@ -7205,7 +7211,7 @@ var styles$m = StyleSheet.create(_objectSpread2({
 var NavbarCollapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$p);
+      elementProps = _objectWithoutProperties(props, _excluded$r);
 
   var _useForcedContext = useForcedContext(NavbarContext),
       expand = _useForcedContext.expand,
@@ -7227,12 +7233,12 @@ var NavbarCollapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
 NavbarCollapse.displayName = 'NavbarCollapse';
 NavbarCollapse.propTypes = propTypes$t;
 
-var _excluded$o = ["onPress"];
+var _excluded$q = ["onPress"];
 function useToggleNavbar(props) {
   var context = useForcedContext(NavbarContext);
 
   var handlePress = props.onPress,
-      restProps = _objectWithoutProperties(props, _excluded$o);
+      restProps = _objectWithoutProperties(props, _excluded$q);
 
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
     nativeID: context.identifier,
@@ -7248,7 +7254,7 @@ function useToggleNavbar(props) {
   });
 }
 
-var _excluded$n = ["style", "textStyle", "iconStyle"];
+var _excluded$p = ["style", "textStyle", "iconStyle"];
 
 var _templateObject$l, _templateObject2$f, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$3, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1;
 var propTypes$s = {
@@ -7281,7 +7287,7 @@ var NavbarToggler = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
       textStyle = props.textStyle,
       iconStyle = props.iconStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$n);
+      elementProps = _objectWithoutProperties(props, _excluded$p);
 
   var media = useMedia();
 
@@ -7327,12 +7333,12 @@ function useNavbar(variant, defaultExpanded, controlledExpanded, onToggle, expan
   }, [variant, expanded, expand]);
 }
 
-var _excluded$m = ["onPress"];
+var _excluded$o = ["onPress"];
 function useDismissNavbar(props) {
   var context = useForcedContext(NavbarContext);
 
   var handlePress = props.onPress,
-      restProps = _objectWithoutProperties(props, _excluded$m);
+      restProps = _objectWithoutProperties(props, _excluded$o);
 
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
     onPress: function onPress(event) {
@@ -7343,7 +7349,7 @@ function useDismissNavbar(props) {
   });
 }
 
-var _excluded$l = ["children", "variant", "defaultExpanded", "expanded", "onToggle", "expand", "style"];
+var _excluded$n = ["children", "variant", "defaultExpanded", "expanded", "onToggle", "expand", "style"];
 
 var _templateObject$k, _templateObject2$e;
 var propTypes$r = {
@@ -7371,7 +7377,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onToggle = props.onToggle,
       expand = props.expand,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$l);
+      elementProps = _objectWithoutProperties(props, _excluded$n);
 
   var navbar = useNavbar(variant, defaultExpanded, expanded, onToggle, expand);
   var classes = getStyles(styles$k, ['.navbar', expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand))]);
@@ -7397,7 +7403,7 @@ function useOffcanvas() {
   }, []);
 }
 
-var _excluded$k = ["children", "style"];
+var _excluded$m = ["children", "style"];
 
 var _templateObject$j, _templateObject2$d;
 var propTypes$q = {
@@ -7413,7 +7419,7 @@ var styles$j = StyleSheet.create(_objectSpread2({
 var OffcanvasHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$k);
+      elementProps = _objectWithoutProperties(props, _excluded$m);
 
   var navbar = useContext(NavbarContext);
   var classes = getStyles(styles$j, ['.offcanvas-header', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-header")]);
@@ -7425,7 +7431,7 @@ var OffcanvasHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
 OffcanvasHeader.displayName = 'OffcanvasHeader';
 OffcanvasHeader.propTypes = propTypes$q;
 
-var _excluded$j = ["children", "style"];
+var _excluded$l = ["children", "style"];
 
 var _templateObject$i;
 var propTypes$p = {
@@ -7439,7 +7445,7 @@ var styles$i = StyleSheet.create({
 var OffcanvasTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$j);
+      elementProps = _objectWithoutProperties(props, _excluded$l);
 
   var classes = getStyles(styles$i, ['.offcanvas-title']);
   return /*#__PURE__*/React.createElement(Heading$2, _extends({
@@ -7452,7 +7458,7 @@ var OffcanvasTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 OffcanvasTitle.displayName = 'OffcanvasTitle';
 OffcanvasTitle.propTypes = propTypes$p;
 
-var _excluded$i = ["children", "style", "contentContainerStyle"];
+var _excluded$k = ["children", "style", "contentContainerStyle"];
 
 var _templateObject$h, _templateObject2$c;
 var propTypes$o = {
@@ -7471,7 +7477,7 @@ var OffcanvasBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
       contentContainerStyle = props.contentContainerStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$i);
+      elementProps = _objectWithoutProperties(props, _excluded$k);
 
   var navbar = useContext(NavbarContext);
   var contentContainerClasses = getStyles(styles$h, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
@@ -7484,7 +7490,7 @@ var OffcanvasBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 OffcanvasBody.displayName = 'OffcanvasBody';
 OffcanvasBody.propTypes = propTypes$o;
 
-var _excluded$h = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "textStyle"];
+var _excluded$j = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "textStyle"];
 
 var _templateObject$g, _templateObject2$b, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 var PLACEMENTS = ['top', 'bottom', 'start', 'end']; // , 'auto'
@@ -7533,7 +7539,7 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleToggle = props.onToggle,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$h);
+      elementProps = _objectWithoutProperties(props, _excluded$j);
 
   var media = useMedia();
   var navbar = useContext(NavbarContext);
@@ -7590,6 +7596,7 @@ Offcanvas.Body = OffcanvasBody;
 var PickerWebContext = /*#__PURE__*/React.createContext();
 PickerWebContext.displayName = 'PickerWebContext';
 
+var _excluded$i = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "style"];
 var propTypes$m = {
   children: PropTypes.node.isRequired,
   selectedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string, PropTypes.object]),
@@ -7600,9 +7607,7 @@ var propTypes$m = {
   placeholderTextColor: PropTypes.string,
   disabled: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  nativeID: PropTypes.any
+  style: PropTypes.any
 };
 var PLACEHOLDER = '__PLACEHOLDER__';
 
@@ -7628,10 +7633,11 @@ var PickerWeb = /*#__PURE__*/React.forwardRef(function (props, ref) {
       placeholderTextColor = props.placeholderTextColor,
       disabled = props.disabled,
       style = props.style,
-      nativeID = props.nativeID;
+      elementProps = _objectWithoutProperties(props, _excluded$i);
+
   var background = useBackground(style);
   var showPlaceholder = placeholder && (selectedValue === undefined || selectedValue === null);
-  return /*#__PURE__*/React.createElement(Picker$1, {
+  return /*#__PURE__*/React.createElement(Picker$1, _extends({}, elementProps, {
     ref: ref,
     selectedValue: showPlaceholder ? PLACEHOLDER : selectedValue,
     onValueChange: onValueChange,
@@ -7640,9 +7646,8 @@ var PickerWeb = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disabled,
     style: [background.style, showPlaceholder && {
       color: placeholderTextColor
-    }],
-    nativeID: nativeID
-  }, placeholder && /*#__PURE__*/React.createElement("option", {
+    }]
+  }), placeholder && /*#__PURE__*/React.createElement("option", {
     value: PLACEHOLDER,
     disabled: true,
     hidden: true
@@ -7657,9 +7662,11 @@ PickerWeb.propTypes = propTypes$m;
 var PickerNativeContext = /*#__PURE__*/React.createContext();
 PickerNativeContext.displayName = 'PickerNativeContext';
 
+var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "renderText", "renderMenu", "style"];
+
 var _templateObject$f;
 var propTypes$l = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   selectedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string, PropTypes.object]),
   onValueChange: PropTypes.func,
   onFocus: PropTypes.func,
@@ -7667,10 +7674,10 @@ var propTypes$l = {
   placeholder: PropTypes.string,
   placeholderTextColor: PropTypes.string,
   disabled: PropTypes.bool,
+  renderText: PropTypes.func,
+  renderMenu: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  nativeID: PropTypes.any
+  style: PropTypes.any
 };
 var styles$f = StyleSheet.create({
   menu: css(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n    align-items: center;\n  "])))
@@ -7692,11 +7699,45 @@ var extractTextStyles = function extractTextStyles(style) {
   return textStyles;
 };
 
+var renderTextDefault = function renderTextDefault(_ref3) {
+  var children = _ref3.children,
+      selectedValue = _ref3.selectedValue;
+  var items = React.Children.map(children, function (child) {
+    return {
+      label: child.props.label,
+      value: child.props.value
+    };
+  });
+  var selectedItem = items.find(function (item) {
+    return item.value === selectedValue;
+  });
+  return selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label;
+};
+
+var renderMenuDefault = function renderMenuDefault(_ref4) {
+  var children = _ref4.children,
+      selectedValue = _ref4.selectedValue,
+      handleValueChange = _ref4.handleValueChange,
+      handleClose = _ref4.handleClose;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    placement: "bottom",
+    visible: true,
+    onToggle: handleClose
+  }, /*#__PURE__*/React.createElement(Offcanvas.Body, {
+    contentContainerStyle: styles$f.menu
+  }, /*#__PURE__*/React.createElement(PickerNativeContext.Provider, {
+    value: {
+      selectedValue: selectedValue,
+      handleValueChange: handleValueChange
+    }
+  }, children)));
+};
+
 var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       selectedValue = props.selectedValue,
       _props$onValueChange = props.onValueChange,
-      _onValueChange = _props$onValueChange === void 0 ? function () {} : _props$onValueChange,
+      onValueChange = _props$onValueChange === void 0 ? function () {} : _props$onValueChange,
       _props$onFocus = props.onFocus,
       onFocus = _props$onFocus === void 0 ? function () {} : _props$onFocus,
       _props$onBlur = props.onBlur,
@@ -7706,28 +7747,33 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
       placeholderTextColor = _props$placeholderTex === void 0 ? StyleSheet.value('input-placeholder-color') : _props$placeholderTex,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$renderText = props.renderText,
+      renderText = _props$renderText === void 0 ? renderTextDefault : _props$renderText,
+      _props$renderMenu = props.renderMenu,
+      renderMenu = _props$renderMenu === void 0 ? renderMenuDefault : _props$renderMenu,
       style = props.style,
-      nativeID = props.nativeID;
+      elementProps = _objectWithoutProperties(props, _excluded$h);
 
   var background = useBackground(style);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
+      visible = _useState2[0],
+      setVisible = _useState2[1];
 
-  var items = React.Children.map(children, function (child) {
-    return {
-      label: child.props.label,
-      value: child.props.value
-    };
-  });
-  var selectedItem = items.find(function (item) {
-    return item.value === selectedValue;
-  });
   var textStyle = extractTextStyles(background.style);
   var showPlaceholder = placeholder && (selectedValue === undefined || selectedValue === null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
+
+  var handleValueChange = function handleValueChange(nextValue) {
+    onValueChange(nextValue);
+    setVisible(false);
+  };
+
+  var handleClose = function handleClose() {
+    setVisible(false);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
     ref: ref,
     accessibilityRole: "combobox",
     accessibilityDisabled: disabled,
@@ -7735,36 +7781,26 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
     focusable: !disabled,
     selectable: false,
     onPress: function onPress() {
-      setOpen(true);
+      setVisible(true);
     },
     onFocus: onFocus,
     onBlur: onBlur,
     disabled: disabled,
-    style: background.style,
-    nativeID: nativeID
-  }, background.element, /*#__PURE__*/React.createElement(Text, {
+    style: background.style
+  }), background.element, /*#__PURE__*/React.createElement(Text, {
     numberOfLines: 1,
     style: [textStyle, showPlaceholder && {
       color: placeholderTextColor
     }]
-  }, selectedItem ? selectedItem.label : placeholder)), /*#__PURE__*/React.createElement(Offcanvas, {
-    placement: "bottom",
-    visible: open,
-    onToggle: function onToggle() {
-      setOpen(false);
-    }
-  }, /*#__PURE__*/React.createElement(Offcanvas.Body, {
-    contentContainerStyle: styles$f.menu
-  }, /*#__PURE__*/React.createElement(PickerNativeContext.Provider, {
-    value: {
-      selectedValue: selectedValue,
-      onValueChange: function onValueChange(nextValue) {
-        _onValueChange(nextValue);
-
-        setOpen(false);
-      }
-    }
-  }, children))));
+  }, showPlaceholder ? placeholder : renderText({
+    children: children,
+    selectedValue: selectedValue
+  }))), visible && renderMenu({
+    children: children,
+    selectedValue: selectedValue,
+    handleValueChange: handleValueChange,
+    handleClose: handleClose
+  }));
 });
 PickerNative.propTypes = propTypes$l;
 
@@ -7814,7 +7850,7 @@ var PickerNativeItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useForcedContext = useForcedContext(PickerNativeContext),
       selectedValue = _useForcedContext.selectedValue,
-      onValueChange = _useForcedContext.onValueChange;
+      handleValueChange = _useForcedContext.handleValueChange;
 
   var media = useMedia();
   var classes = getStyles(styles$e, ['item', disabled && 'itemDisabled']);
@@ -7823,7 +7859,7 @@ var PickerNativeItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
     onPress: function onPress() {
-      onValueChange(value);
+      handleValueChange(value);
     },
     accessibilitySelected: selected,
     disabled: disabled,
@@ -7868,7 +7904,7 @@ var _templateObject$d, _templateObject2$9, _templateObject3$3, _templateObject4$
 /* eslint-disable react/no-unused-prop-types */
 
 var propTypes$h = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   placeholderTextColor: PropTypes.string,