bootstrap-rn 0.2.0 → 0.2.2

package/dist/bootstrap-rn.cjs.js

@@ -2937,7 +2937,7 @@ function useStyle(style, styleName) {
   };
 }
 
-var _excluded$1u = ["children", "style", "textStyle", "styleName"];
+var _excluded$1x = ["children", "style", "textStyle", "styleName"];
 var propTypes$1y = {
   children: PropTypes__default["default"].node,
   // eslint-disable-next-line react/forbid-prop-types
@@ -2952,7 +2952,7 @@ var View = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
       style = props.style,
       textStyle = props.textStyle,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$1u);
+      elementProps = _objectWithoutProperties(props, _excluded$1x);
 
   var media = useMedia();
   var context = React.useContext(TextStyleContext);
@@ -2976,7 +2976,7 @@ var View = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
 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 = {
@@ -3012,7 +3012,7 @@ var Alert = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
       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")]);
@@ -3026,7 +3026,7 @@ var Alert = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
 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 = {
@@ -3068,7 +3068,7 @@ var Text = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
       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 = React.useContext(TextStyleContext);
@@ -3100,7 +3100,7 @@ var Text = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
 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 = {
@@ -3118,7 +3118,7 @@ var Badge = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
   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
@@ -3191,7 +3191,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 = {
@@ -3216,7 +3216,7 @@ var BreadcrumbItem = /*#__PURE__*/React__default["default"].forwardRef(function
       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;
@@ -3241,7 +3241,7 @@ var BreadcrumbItem = /*#__PURE__*/React__default["default"].forwardRef(function
 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 = {
@@ -3259,7 +3259,7 @@ var Breadcrumb = /*#__PURE__*/React__default["default"].forwardRef(function (pro
   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']);
@@ -3279,7 +3279,7 @@ Breadcrumb.Item = BreadcrumbItem;
 var ButtonGroupContext = /*#__PURE__*/React__default["default"].createContext();
 ButtonGroupContext.displayName = 'ButtonGroupContext';
 
-var _excluded$1o = ["children", "size", "style"];
+var _excluded$1r = ["children", "size", "style"];
 
 var _templateObject$17;
 var propTypes$1s = {
@@ -3295,7 +3295,7 @@ var ButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function (pr
   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.
@@ -3314,7 +3314,7 @@ var ButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function (pr
 ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = propTypes$1s;
 
-var _excluded$1n = ["children", "style"];
+var _excluded$1q = ["children", "style"];
 
 var _templateObject$16;
 var propTypes$1r = {
@@ -3328,7 +3328,7 @@ var styles$18 = StyleSheet.create({
 var ButtonToolbar = /*#__PURE__*/React__default["default"].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__default["default"].createElement(View, _extends({}, elementProps, {
@@ -3340,7 +3340,7 @@ var ButtonToolbar = /*#__PURE__*/React__default["default"].forwardRef(function (
 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];
@@ -3351,12 +3351,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) {
@@ -3374,7 +3374,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);
 
@@ -3393,7 +3393,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__default["default"].node,
   active: PropTypes__default["default"].bool,
@@ -3446,7 +3446,7 @@ var Pressable = /*#__PURE__*/React__default["default"].forwardRef(function (prop
       textStyle = actionProps.textStyle,
       activeTextStyle = actionProps.activeTextStyle,
       styleName = actionProps.styleName,
-      elementProps = _objectWithoutProperties(actionProps, _excluded$1k);
+      elementProps = _objectWithoutProperties(actionProps, _excluded$1n);
 
   var media = useMedia();
   var context = React.useContext(TextStyleContext);
@@ -3485,11 +3485,11 @@ var Pressable = /*#__PURE__*/React__default["default"].forwardRef(function (prop
 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 = React.useState(active),
       _useState2 = _slicedToArray(_useState, 2),
@@ -3508,7 +3508,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 = {
@@ -3599,7 +3599,7 @@ var Button = /*#__PURE__*/React__default["default"].forwardRef(function (props,
       activeStyle = props.activeStyle,
       textStyle = props.textStyle,
       activeTextStyle = props.activeTextStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$1i);
+      elementProps = _objectWithoutProperties(props, _excluded$1l);
 
   invariant__default["default"](color !== 'link' || !outline, 'Button link variant is only available as non outline style.');
   var listItem = React.useContext(ListContext);
@@ -3622,7 +3622,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 = {
@@ -3640,7 +3640,7 @@ var Blockquote = /*#__PURE__*/React__default["default"].forwardRef(function (pro
   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.
@@ -3656,7 +3656,7 @@ var Blockquote = /*#__PURE__*/React__default["default"].forwardRef(function (pro
 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 = {
@@ -3669,7 +3669,7 @@ var propTypes$1n = {
   styleName: PropTypes__default["default"].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__default["default"].forwardRef(function (props, ref) {
@@ -3677,7 +3677,7 @@ var Body = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
       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']);
@@ -3700,7 +3700,7 @@ var Body = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
 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 = {
@@ -3718,7 +3718,7 @@ var CardBody = /*#__PURE__*/React__default["default"].forwardRef(function (props
   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"]);
@@ -3731,7 +3731,7 @@ var CardBody = /*#__PURE__*/React__default["default"].forwardRef(function (props
 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 = {
@@ -3749,7 +3749,7 @@ var CardHeader = /*#__PURE__*/React__default["default"].forwardRef(function (pro
   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']);
@@ -3762,7 +3762,7 @@ var CardHeader = /*#__PURE__*/React__default["default"].forwardRef(function (pro
 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 = {
@@ -3780,7 +3780,7 @@ var CardFooter = /*#__PURE__*/React__default["default"].forwardRef(function (pro
   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']);
@@ -3793,7 +3793,7 @@ var CardFooter = /*#__PURE__*/React__default["default"].forwardRef(function (pro
 CardFooter.displayName = 'CardFooter';
 CardFooter.propTypes = propTypes$1k;
 
-var _excluded$1c = ["children", "style"];
+var _excluded$1f = ["children", "style"];
 
 var _templateObject$$;
 var propTypes$1j = {
@@ -3807,7 +3807,7 @@ var styles$11 = StyleSheet.create({
 var Card = /*#__PURE__*/React__default["default"].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__default["default"].createElement(View, _extends({}, elementProps, {
@@ -4123,7 +4123,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 = {
@@ -4172,7 +4172,7 @@ var CloseButton = /*#__PURE__*/React__default["default"].forwardRef(function (pr
       style = props.style,
       textStyle = props.textStyle,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$1b);
+      elementProps = _objectWithoutProperties(props, _excluded$1e);
 
   var media = useMedia();
 
@@ -4262,26 +4262,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 = React.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];
@@ -4326,12 +4328,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) {
@@ -4345,13 +4347,13 @@ function useToggleCollapse(props) {
   });
 }
 
-var _excluded$19 = ["children"];
+var _excluded$1c = ["children"];
 var propTypes$1g = {
   children: PropTypes__default["default"].node
 };
 var Collapse = /*#__PURE__*/React__default["default"].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,
@@ -4392,7 +4394,7 @@ function infix(breakpoint) {
 var NavbarContext = /*#__PURE__*/React__default["default"].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 = {
@@ -4447,7 +4449,7 @@ var Container = /*#__PURE__*/React__default["default"].forwardRef(function (prop
   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 = React.useContext(NavbarContext);
   var classes = getStyles(styles$Z, ['.container', // Hint: Bootstrap's .container class is identical with .container-sm.
@@ -4464,7 +4466,7 @@ Container.propTypes = propTypes$1f;
 var FormCheckContext = /*#__PURE__*/React__default["default"].createContext();
 FormCheckContext.displayName = 'FormCheckContext';
 
-var _excluded$17 = ["style"];
+var _excluded$1a = ["style"];
 var propTypes$1e = {
   type: PropTypes__default["default"].oneOf(['checkbox', 'radio', 'switch']).isRequired,
   value: PropTypes__default["default"].bool.isRequired,
@@ -4485,7 +4487,7 @@ var styles$Y = reactNative.StyleSheet.create({
 
 var Input$1 = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var style = _ref.style,
-      props = _objectWithoutProperties(_ref, _excluded$17);
+      props = _objectWithoutProperties(_ref, _excluded$1a);
 
   return reactNative.unstable_createElement('input', _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
@@ -4568,7 +4570,7 @@ var FormCheckInputNative = /*#__PURE__*/React__default["default"].forwardRef(fun
 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 */
@@ -4651,7 +4653,7 @@ var FormCheckInput = /*#__PURE__*/React__default["default"].forwardRef(function
       _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();
 
@@ -4704,7 +4706,7 @@ var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (props
 });
 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) {
@@ -4739,7 +4741,7 @@ var Col = /*#__PURE__*/React__default["default"].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__default["default"].createElement(View, _extends({}, elementProps, {
@@ -4750,7 +4752,7 @@ var Col = /*#__PURE__*/React__default["default"].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 = {
@@ -4764,7 +4766,7 @@ var styles$V = StyleSheet.create({
 var Code = /*#__PURE__*/React__default["default"].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.
 
@@ -4781,12 +4783,12 @@ Code.propTypes = propTypes$1a;
 var DropdownContext = /*#__PURE__*/React__default["default"].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,
@@ -4979,7 +4981,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'];
@@ -5045,7 +5047,7 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
       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
@@ -5121,7 +5123,7 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
 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 = {
@@ -5141,7 +5143,7 @@ var Heading$2 = /*#__PURE__*/React__default["default"].forwardRef(function (prop
   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__default["default"].createElement(Text, _extends({}, elementProps, {
@@ -5154,7 +5156,7 @@ var Heading$2 = /*#__PURE__*/React__default["default"].forwardRef(function (prop
 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 = {
@@ -5172,7 +5174,7 @@ var DropdownHeader = /*#__PURE__*/React__default["default"].forwardRef(function
   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
@@ -5188,7 +5190,7 @@ var DropdownHeader = /*#__PURE__*/React__default["default"].forwardRef(function
 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 = {
@@ -5219,7 +5221,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']);
@@ -5237,7 +5239,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 = {
@@ -5255,7 +5257,7 @@ var DropdownItemText = /*#__PURE__*/React__default["default"].forwardRef(functio
   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
@@ -5270,7 +5272,7 @@ var DropdownItemText = /*#__PURE__*/React__default["default"].forwardRef(functio
 DropdownItemText.displayName = 'DropdownItemText';
 DropdownItemText.propTypes = propTypes$12;
 
-var _excluded$Z = ["style"];
+var _excluded$10 = ["style"];
 
 var _templateObject$P;
 var propTypes$11 = {
@@ -5282,7 +5284,7 @@ var styles$O = StyleSheet.create({
 });
 var DropdownDivider = /*#__PURE__*/React__default["default"].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__default["default"].createElement(View, _extends({}, elementProps, {
@@ -5315,12 +5317,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) {
@@ -5330,7 +5332,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'];
@@ -5361,7 +5363,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (props
       _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']);
@@ -5384,7 +5386,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$$ = {
@@ -5402,7 +5404,7 @@ var DisplayHeading = /*#__PURE__*/React__default["default"].forwardRef(function
   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__default["default"].createElement(Heading$2, _extends({}, elementProps, {
@@ -5414,7 +5416,7 @@ var DisplayHeading = /*#__PURE__*/React__default["default"].forwardRef(function
 DisplayHeading.displayName = 'Heading';
 DisplayHeading.propTypes = propTypes$$;
 
-var _excluded$V = ["children", "type", "style"];
+var _excluded$Y = ["children", "type", "style"];
 
 var _templateObject$M;
 var propTypes$_ = {
@@ -5432,7 +5434,7 @@ var Feedback = /*#__PURE__*/React__default["default"].forwardRef(function (props
   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__default["default"].createElement(Text, _extends({}, elementProps, {
@@ -5443,7 +5445,7 @@ var Feedback = /*#__PURE__*/React__default["default"].forwardRef(function (props
 Feedback.displayName = 'Feedback';
 Feedback.propTypes = propTypes$_;
 
-var _excluded$U = ["children", "htmlFor"];
+var _excluded$X = ["children", "htmlFor"];
 var propTypes$Z = {
   children: PropTypes__default["default"].node.isRequired,
   htmlFor: PropTypes__default["default"].string
@@ -5451,7 +5453,7 @@ var propTypes$Z = {
 var Heading$1 = /*#__PURE__*/React__default["default"].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__default["default"].useCallback(function (node) {
@@ -5470,7 +5472,7 @@ var Heading$1 = /*#__PURE__*/React__default["default"].forwardRef(function (prop
 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 = {
@@ -5493,7 +5495,7 @@ var FormCheckLabel = /*#__PURE__*/React__default["default"].forwardRef(function
   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,
@@ -5513,6 +5515,8 @@ var FormCheckLabel = /*#__PURE__*/React__default["default"].forwardRef(function
 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__default["default"].node.isRequired,
@@ -5538,12 +5542,14 @@ var FormCheck = /*#__PURE__*/React__default["default"].forwardRef(function (prop
       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__default["default"].createElement(View, {
+  return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style]
-  }, /*#__PURE__*/React__default["default"].createElement(FormCheckContext.Provider, {
+  }), /*#__PURE__*/React__default["default"].createElement(FormCheckContext.Provider, {
     value: {
       reverse: reverse,
       disabled: disabled,
@@ -5556,7 +5562,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 = {
@@ -5574,7 +5580,7 @@ var FormLabel = /*#__PURE__*/React__default["default"].forwardRef(function (prop
   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']);
@@ -5587,7 +5593,7 @@ var FormLabel = /*#__PURE__*/React__default["default"].forwardRef(function (prop
 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 = {
@@ -5605,7 +5611,7 @@ var FormText = /*#__PURE__*/React__default["default"].forwardRef(function (props
   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
@@ -5620,7 +5626,7 @@ var FormText = /*#__PURE__*/React__default["default"].forwardRef(function (props
 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__default["default"].func,
   onBlur: PropTypes__default["default"].func,
@@ -5636,7 +5642,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
       _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 = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -5668,7 +5674,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
 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 = {
@@ -5722,7 +5728,7 @@ var Input = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
       _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__default["default"].createElement(TextInput, _extends({}, elementProps, {
@@ -5863,7 +5869,7 @@ function useTrigger(rawTrigger, props, elementProps, ref) {
 var PopoverContext = /*#__PURE__*/React__default["default"].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 = {
@@ -5905,7 +5911,7 @@ var styles$F = StyleSheet.create({
 });
 var PopoverArrow = /*#__PURE__*/React__default["default"].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,
@@ -5927,7 +5933,7 @@ var PopoverArrow = /*#__PURE__*/React__default["default"].forwardRef(function (p
 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 = {
@@ -5945,7 +5951,7 @@ var PopoverHeader = /*#__PURE__*/React__default["default"].forwardRef(function (
   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
@@ -5961,7 +5967,7 @@ var PopoverHeader = /*#__PURE__*/React__default["default"].forwardRef(function (
 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 = {
@@ -5979,7 +5985,7 @@ var PopoverBody = /*#__PURE__*/React__default["default"].forwardRef(function (pr
   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']);
@@ -5992,7 +5998,7 @@ var PopoverBody = /*#__PURE__*/React__default["default"].forwardRef(function (pr
 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 = {
@@ -6018,7 +6024,7 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (props,
       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),
@@ -6044,7 +6050,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__default["default"].shape(_objectSpread2({
@@ -6065,7 +6071,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 */
 
@@ -6112,7 +6118,7 @@ function injectPopover(Target) {
 var TooltipContext = /*#__PURE__*/React__default["default"].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 = {
@@ -6133,7 +6139,7 @@ var styles$B = StyleSheet.create({
 });
 var TooltipArrow = /*#__PURE__*/React__default["default"].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,
@@ -6152,7 +6158,7 @@ var TooltipArrow = /*#__PURE__*/React__default["default"].forwardRef(function (p
 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 = {
@@ -6170,7 +6176,7 @@ var TooltipInner = /*#__PURE__*/React__default["default"].forwardRef(function (p
   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
@@ -6185,7 +6191,7 @@ var TooltipInner = /*#__PURE__*/React__default["default"].forwardRef(function (p
 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 = {
@@ -6215,7 +6221,7 @@ var Tooltip = /*#__PURE__*/React__default["default"].forwardRef(function (props,
       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),
@@ -6241,7 +6247,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__default["default"].shape(_objectSpread2({
@@ -6260,7 +6266,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 */
 
@@ -6303,7 +6309,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__default["default"].any,
@@ -6313,7 +6319,7 @@ var propTypes$J = {
 var Image = /*#__PURE__*/React__default["default"].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);
@@ -6327,7 +6333,7 @@ var Image = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
 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__default["default"].any,
@@ -6337,7 +6343,7 @@ var propTypes$I = {
 var ImageBackground = /*#__PURE__*/React__default["default"].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);
@@ -6354,7 +6360,7 @@ ImageBackground.propTypes = propTypes$I;
 var ListGroupContext = /*#__PURE__*/React__default["default"].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 = {
@@ -6368,7 +6374,7 @@ var propTypes$H = {
   textStyle: PropTypes__default["default"].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  "]))),
@@ -6398,7 +6404,7 @@ var ListGroupItem = /*#__PURE__*/React__default["default"].forwardRef(function (
       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,
@@ -6420,7 +6426,7 @@ var ListGroupItem = /*#__PURE__*/React__default["default"].forwardRef(function (
 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 = {
@@ -6473,7 +6479,7 @@ var ListGroupItemAction = /*#__PURE__*/React__default["default"].forwardRef(func
       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,
@@ -6503,7 +6509,7 @@ var ListGroupItemAction = /*#__PURE__*/React__default["default"].forwardRef(func
 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 = {
@@ -6533,7 +6539,7 @@ var ListGroup = /*#__PURE__*/React__default["default"].forwardRef(function (prop
   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
@@ -6554,7 +6560,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 = {
@@ -6596,7 +6602,7 @@ var Link = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
       _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();
 
@@ -6664,7 +6670,7 @@ var Link = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
 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__default["default"].node,
   // eslint-disable-next-line react/forbid-prop-types
@@ -6682,7 +6688,7 @@ var ScrollView = /*#__PURE__*/React__default["default"].forwardRef(function (pro
       style = props.style,
       textStyle = props.textStyle,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$z);
+      elementProps = _objectWithoutProperties(props, _excluded$B);
 
   var media = useMedia();
   var context = React.useContext(TextStyleContext);
@@ -6777,7 +6783,7 @@ function useModal(scrollable) {
   }, [scrollable]);
 }
 
-var _excluded$y = ["children", "style"];
+var _excluded$A = ["children", "style"];
 
 var _templateObject$v;
 var propTypes$C = {
@@ -6791,7 +6797,7 @@ var styles$v = StyleSheet.create({
 var ModalHeader = /*#__PURE__*/React__default["default"].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__default["default"].createElement(View, _extends({}, elementProps, {
@@ -6802,7 +6808,7 @@ var ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function (pr
 ModalHeader.displayName = 'ModalHeader';
 ModalHeader.propTypes = propTypes$C;
 
-var _excluded$x = ["children", "style"];
+var _excluded$z = ["children", "style"];
 
 var _templateObject$u;
 var propTypes$B = {
@@ -6816,7 +6822,7 @@ var styles$u = StyleSheet.create({
 var ModalTitle = /*#__PURE__*/React__default["default"].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__default["default"].createElement(Heading$2, _extends({
@@ -6829,7 +6835,7 @@ var ModalTitle = /*#__PURE__*/React__default["default"].forwardRef(function (pro
 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 = {
@@ -6846,7 +6852,7 @@ var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function (prop
   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;
@@ -6862,7 +6868,7 @@ var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function (prop
 ModalBody.displayName = 'ModalBody';
 ModalBody.propTypes = propTypes$A;
 
-var _excluded$v = ["children", "style"];
+var _excluded$x = ["children", "style"];
 
 var _templateObject$s;
 var propTypes$z = {
@@ -6876,7 +6882,7 @@ var styles$s = StyleSheet.create({
 var ModalFooter = /*#__PURE__*/React__default["default"].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__default["default"].createElement(View, _extends({}, elementProps, {
@@ -6887,7 +6893,7 @@ var ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function (pr
 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'];
@@ -6930,7 +6936,7 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
       handleToggle = props.onToggle,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$u);
+      elementProps = _objectWithoutProperties(props, _excluded$w);
 
   var dialogRef = React.useRef();
   var modal = useModal(scrollable);
@@ -6986,7 +6992,7 @@ Modal.Footer = ModalFooter;
 var NavContext = /*#__PURE__*/React__default["default"].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 = {
@@ -7040,7 +7046,7 @@ var NavLink = /*#__PURE__*/React__default["default"].forwardRef(function (props,
       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;
@@ -7070,7 +7076,7 @@ NavLink.propTypes = propTypes$x;
 var TabContext = /*#__PURE__*/React.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 = {
@@ -7104,7 +7110,7 @@ var Nav = /*#__PURE__*/React__default["default"].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 = React.useContext(NavbarContext);
   var tabbable = React.useContext(TabContext);
@@ -7125,7 +7131,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 = {
@@ -7144,7 +7150,7 @@ var NavbarText = /*#__PURE__*/React__default["default"].forwardRef(function (pro
   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;
@@ -7162,7 +7168,7 @@ var NavbarText = /*#__PURE__*/React__default["default"].forwardRef(function (pro
 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 = {
@@ -7182,7 +7188,7 @@ var NavbarBrand = /*#__PURE__*/React__default["default"].forwardRef(function (pr
   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;
@@ -7198,7 +7204,7 @@ var NavbarBrand = /*#__PURE__*/React__default["default"].forwardRef(function (pr
 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 = {
@@ -7214,7 +7220,7 @@ var styles$m = StyleSheet.create(_objectSpread2({
 var NavbarCollapse = /*#__PURE__*/React__default["default"].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,
@@ -7236,12 +7242,12 @@ var NavbarCollapse = /*#__PURE__*/React__default["default"].forwardRef(function
 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,
@@ -7257,7 +7263,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 = {
@@ -7290,7 +7296,7 @@ var NavbarToggler = /*#__PURE__*/React__default["default"].forwardRef(function (
   var style = props.style,
       textStyle = props.textStyle,
       iconStyle = props.iconStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$n);
+      elementProps = _objectWithoutProperties(props, _excluded$p);
 
   var media = useMedia();
 
@@ -7336,12 +7342,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) {
@@ -7352,7 +7358,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 = {
@@ -7380,7 +7386,7 @@ var Navbar = /*#__PURE__*/React__default["default"].forwardRef(function (props,
       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))]);
@@ -7406,7 +7412,7 @@ function useOffcanvas() {
   }, []);
 }
 
-var _excluded$k = ["children", "style"];
+var _excluded$m = ["children", "style"];
 
 var _templateObject$j, _templateObject2$d;
 var propTypes$q = {
@@ -7422,7 +7428,7 @@ var styles$j = StyleSheet.create(_objectSpread2({
 var OffcanvasHeader = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$k);
+      elementProps = _objectWithoutProperties(props, _excluded$m);
 
   var navbar = React.useContext(NavbarContext);
   var classes = getStyles(styles$j, ['.offcanvas-header', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-header")]);
@@ -7434,7 +7440,7 @@ var OffcanvasHeader = /*#__PURE__*/React__default["default"].forwardRef(function
 OffcanvasHeader.displayName = 'OffcanvasHeader';
 OffcanvasHeader.propTypes = propTypes$q;
 
-var _excluded$j = ["children", "style"];
+var _excluded$l = ["children", "style"];
 
 var _templateObject$i;
 var propTypes$p = {
@@ -7448,7 +7454,7 @@ var styles$i = StyleSheet.create({
 var OffcanvasTitle = /*#__PURE__*/React__default["default"].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__default["default"].createElement(Heading$2, _extends({
@@ -7461,7 +7467,7 @@ var OffcanvasTitle = /*#__PURE__*/React__default["default"].forwardRef(function
 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 = {
@@ -7480,7 +7486,7 @@ var OffcanvasBody = /*#__PURE__*/React__default["default"].forwardRef(function (
   var children = props.children,
       style = props.style,
       contentContainerStyle = props.contentContainerStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$i);
+      elementProps = _objectWithoutProperties(props, _excluded$k);
 
   var navbar = React.useContext(NavbarContext);
   var contentContainerClasses = getStyles(styles$h, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
@@ -7493,7 +7499,7 @@ var OffcanvasBody = /*#__PURE__*/React__default["default"].forwardRef(function (
 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'
@@ -7542,7 +7548,7 @@ var Offcanvas = /*#__PURE__*/React__default["default"].forwardRef(function (prop
       handleToggle = props.onToggle,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$h);
+      elementProps = _objectWithoutProperties(props, _excluded$j);
 
   var media = useMedia();
   var navbar = React.useContext(NavbarContext);
@@ -7599,6 +7605,7 @@ Offcanvas.Body = OffcanvasBody;
 var PickerWebContext = /*#__PURE__*/React__default["default"].createContext();
 PickerWebContext.displayName = 'PickerWebContext';
 
+var _excluded$i = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "style"];
 var propTypes$m = {
   children: PropTypes__default["default"].node.isRequired,
   selectedValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].object]),
@@ -7609,9 +7616,7 @@ var propTypes$m = {
   placeholderTextColor: PropTypes__default["default"].string,
   disabled: PropTypes__default["default"].bool,
   // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes__default["default"].any,
-  // eslint-disable-next-line react/forbid-prop-types
-  nativeID: PropTypes__default["default"].any
+  style: PropTypes__default["default"].any
 };
 var PLACEHOLDER = '__PLACEHOLDER__';
 
@@ -7637,10 +7642,11 @@ var PickerWeb = /*#__PURE__*/React__default["default"].forwardRef(function (prop
       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__default["default"].createElement(reactNative.Picker, {
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.Picker, _extends({}, elementProps, {
     ref: ref,
     selectedValue: showPlaceholder ? PLACEHOLDER : selectedValue,
     onValueChange: onValueChange,
@@ -7649,9 +7655,8 @@ var PickerWeb = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     disabled: disabled,
     style: [background.style, showPlaceholder && {
       color: placeholderTextColor
-    }],
-    nativeID: nativeID
-  }, placeholder && /*#__PURE__*/React__default["default"].createElement("option", {
+    }]
+  }), placeholder && /*#__PURE__*/React__default["default"].createElement("option", {
     value: PLACEHOLDER,
     disabled: true,
     hidden: true
@@ -7666,9 +7671,11 @@ PickerWeb.propTypes = propTypes$m;
 var PickerNativeContext = /*#__PURE__*/React__default["default"].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__default["default"].node.isRequired,
+  children: PropTypes__default["default"].node,
   selectedValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].object]),
   onValueChange: PropTypes__default["default"].func,
   onFocus: PropTypes__default["default"].func,
@@ -7676,10 +7683,10 @@ var propTypes$l = {
   placeholder: PropTypes__default["default"].string,
   placeholderTextColor: PropTypes__default["default"].string,
   disabled: PropTypes__default["default"].bool,
+  renderText: PropTypes__default["default"].func,
+  renderMenu: PropTypes__default["default"].func,
   // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes__default["default"].any,
-  // eslint-disable-next-line react/forbid-prop-types
-  nativeID: PropTypes__default["default"].any
+  style: PropTypes__default["default"].any
 };
 var styles$f = StyleSheet.create({
   menu: css(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n    align-items: center;\n  "])))
@@ -7701,11 +7708,45 @@ var extractTextStyles = function extractTextStyles(style) {
   return textStyles;
 };
 
+var renderTextDefault = function renderTextDefault(_ref3) {
+  var children = _ref3.children,
+      selectedValue = _ref3.selectedValue;
+  var items = React__default["default"].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__default["default"].createElement(Offcanvas, {
+    placement: "bottom",
+    visible: true,
+    onToggle: handleClose
+  }, /*#__PURE__*/React__default["default"].createElement(Offcanvas.Body, {
+    contentContainerStyle: styles$f.menu
+  }, /*#__PURE__*/React__default["default"].createElement(PickerNativeContext.Provider, {
+    value: {
+      selectedValue: selectedValue,
+      handleValueChange: handleValueChange
+    }
+  }, children)));
+};
+
 var PickerNative = /*#__PURE__*/React__default["default"].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,
@@ -7715,28 +7756,33 @@ var PickerNative = /*#__PURE__*/React__default["default"].forwardRef(function (p
       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 = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
+      visible = _useState2[0],
+      setVisible = _useState2[1];
 
-  var items = React__default["default"].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__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Pressable, {
+
+  var handleValueChange = function handleValueChange(nextValue) {
+    onValueChange(nextValue);
+    setVisible(false);
+  };
+
+  var handleClose = function handleClose() {
+    setVisible(false);
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
     ref: ref,
     accessibilityRole: "combobox",
     accessibilityDisabled: disabled,
@@ -7744,36 +7790,26 @@ var PickerNative = /*#__PURE__*/React__default["default"].forwardRef(function (p
     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__default["default"].createElement(Text, {
+    style: background.style
+  }), background.element, /*#__PURE__*/React__default["default"].createElement(Text, {
     numberOfLines: 1,
     style: [textStyle, showPlaceholder && {
       color: placeholderTextColor
     }]
-  }, selectedItem ? selectedItem.label : placeholder)), /*#__PURE__*/React__default["default"].createElement(Offcanvas, {
-    placement: "bottom",
-    visible: open,
-    onToggle: function onToggle() {
-      setOpen(false);
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Offcanvas.Body, {
-    contentContainerStyle: styles$f.menu
-  }, /*#__PURE__*/React__default["default"].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;
 
@@ -7823,7 +7859,7 @@ var PickerNativeItem = /*#__PURE__*/React__default["default"].forwardRef(functio
 
   var _useForcedContext = useForcedContext(PickerNativeContext),
       selectedValue = _useForcedContext.selectedValue,
-      onValueChange = _useForcedContext.onValueChange;
+      handleValueChange = _useForcedContext.handleValueChange;
 
   var media = useMedia();
   var classes = getStyles(styles$e, ['item', disabled && 'itemDisabled']);
@@ -7832,7 +7868,7 @@ var PickerNativeItem = /*#__PURE__*/React__default["default"].forwardRef(functio
   return /*#__PURE__*/React__default["default"].createElement(Pressable, {
     ref: ref,
     onPress: function onPress() {
-      onValueChange(value);
+      handleValueChange(value);
     },
     accessibilitySelected: selected,
     disabled: disabled,
@@ -7877,7 +7913,7 @@ var _templateObject$d, _templateObject2$9, _templateObject3$3, _templateObject4$
 /* eslint-disable react/no-unused-prop-types */
 
 var propTypes$h = {
-  children: PropTypes__default["default"].node.isRequired,
+  children: PropTypes__default["default"].node,
   onFocus: PropTypes__default["default"].func,
   onBlur: PropTypes__default["default"].func,
   placeholderTextColor: PropTypes__default["default"].string,