bootstrap-rn 0.2.0 → 0.2.2

package/dist/bootstrap-rn.umd.js

@@ -6922,7 +6922,7 @@
     };
   }
 
-  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
@@ -6937,7 +6937,7 @@
         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);
@@ -6961,7 +6961,7 @@
   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 = {
@@ -6997,7 +6997,7 @@
         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")]);
@@ -7011,7 +7011,7 @@
   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 = {
@@ -7053,7 +7053,7 @@
         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);
@@ -7085,7 +7085,7 @@
   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 = {
@@ -7103,7 +7103,7 @@
     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
@@ -7186,7 +7186,7 @@
     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 = {
@@ -7211,7 +7211,7 @@
         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;
@@ -7236,7 +7236,7 @@
   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 = {
@@ -7254,7 +7254,7 @@
     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']);
@@ -7274,7 +7274,7 @@
   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 = {
@@ -7290,7 +7290,7 @@
     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.
@@ -7309,7 +7309,7 @@
   ButtonGroup.displayName = 'ButtonGroup';
   ButtonGroup.propTypes = propTypes$1s;
 
-  var _excluded$1n = ["children", "style"];
+  var _excluded$1q = ["children", "style"];
 
   var _templateObject$16;
   var propTypes$1r = {
@@ -7323,7 +7323,7 @@
   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$1({}, elementProps, {
@@ -7335,7 +7335,7 @@
   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];
@@ -7346,12 +7346,12 @@
 
     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) {
@@ -7369,7 +7369,7 @@
   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);
 
@@ -7388,7 +7388,7 @@
     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,
@@ -7441,7 +7441,7 @@
         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);
@@ -7480,11 +7480,11 @@
   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),
@@ -7503,7 +7503,7 @@
     });
   }
 
-  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 = {
@@ -7594,7 +7594,7 @@
         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 = React.useContext(ListContext);
@@ -7617,7 +7617,7 @@
   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 = {
@@ -7635,7 +7635,7 @@
     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.
@@ -7651,7 +7651,7 @@
   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 = {
@@ -7664,7 +7664,7 @@
     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__default["default"].forwardRef(function (props, ref) {
@@ -7672,7 +7672,7 @@
         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']);
@@ -7695,7 +7695,7 @@
   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 = {
@@ -7713,7 +7713,7 @@
     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"]);
@@ -7726,7 +7726,7 @@
   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 = {
@@ -7744,7 +7744,7 @@
     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']);
@@ -7757,7 +7757,7 @@
   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 = {
@@ -7775,7 +7775,7 @@
     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']);
@@ -7788,7 +7788,7 @@
   CardFooter.displayName = 'CardFooter';
   CardFooter.propTypes = propTypes$1k;
 
-  var _excluded$1c = ["children", "style"];
+  var _excluded$1f = ["children", "style"];
 
   var _templateObject$$;
   var propTypes$1j = {
@@ -7802,7 +7802,7 @@
   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$1({}, elementProps, {
@@ -8118,7 +8118,7 @@
     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 = {
@@ -8167,7 +8167,7 @@
         style = props.style,
         textStyle = props.textStyle,
         styleName = props.styleName,
-        elementProps = _objectWithoutProperties(props, _excluded$1b);
+        elementProps = _objectWithoutProperties(props, _excluded$1e);
 
     var media = useMedia();
 
@@ -8257,26 +8257,28 @@
   }
 
   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];
@@ -8321,12 +8323,12 @@
   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) {
@@ -8340,13 +8342,13 @@
     });
   }
 
-  var _excluded$19 = ["children"];
+  var _excluded$1c = ["children"];
   var propTypes$1g = {
     children: PropTypes.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,
@@ -8387,7 +8389,7 @@
   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 = {
@@ -8442,7 +8444,7 @@
     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.
@@ -8459,7 +8461,7 @@
   var FormCheckContext = /*#__PURE__*/React__default["default"].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,
@@ -8480,7 +8482,7 @@
 
   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,
@@ -8563,7 +8565,7 @@
   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 */
@@ -8646,7 +8648,7 @@
         _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();
 
@@ -8699,7 +8701,7 @@
   });
   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) {
@@ -8734,7 +8736,7 @@
         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$1({}, elementProps, {
@@ -8745,7 +8747,7 @@
   Col.displayName = 'Col';
   Col.propTypes = propTypes$1b;
 
-  var _excluded$14 = ["children", "style"];
+  var _excluded$17 = ["children", "style"];
 
   var _templateObject$W;
   var propTypes$1a = {
@@ -8759,7 +8761,7 @@
   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.
 
@@ -8776,12 +8778,12 @@
   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,
@@ -8974,7 +8976,7 @@
   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'];
@@ -9040,7 +9042,7 @@
         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
@@ -9116,7 +9118,7 @@
   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 = {
@@ -9136,7 +9138,7 @@
     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$1({}, elementProps, {
@@ -9149,7 +9151,7 @@
   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 = {
@@ -9167,7 +9169,7 @@
     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
@@ -9183,7 +9185,7 @@
   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 = {
@@ -9214,7 +9216,7 @@
         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']);
@@ -9232,7 +9234,7 @@
   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 = {
@@ -9250,7 +9252,7 @@
     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
@@ -9265,7 +9267,7 @@
   DropdownItemText.displayName = 'DropdownItemText';
   DropdownItemText.propTypes = propTypes$12;
 
-  var _excluded$Z = ["style"];
+  var _excluded$10 = ["style"];
 
   var _templateObject$P;
   var propTypes$11 = {
@@ -9277,7 +9279,7 @@
   });
   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$1({}, elementProps, {
@@ -9310,12 +9312,12 @@
     }, [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) {
@@ -9325,7 +9327,7 @@
     });
   }
 
-  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'];
@@ -9356,7 +9358,7 @@
         _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']);
@@ -9379,7 +9381,7 @@
   Dropdown.useDismiss = useDismissDropdown;
   Dropdown.useToggle = useToggleDropdown;
 
-  var _excluded$W = ["children", "size", "style"];
+  var _excluded$Z = ["children", "size", "style"];
 
   var _templateObject$N;
   var propTypes$$ = {
@@ -9397,7 +9399,7 @@
     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$1({}, elementProps, {
@@ -9409,7 +9411,7 @@
   DisplayHeading.displayName = 'Heading';
   DisplayHeading.propTypes = propTypes$$;
 
-  var _excluded$V = ["children", "type", "style"];
+  var _excluded$Y = ["children", "type", "style"];
 
   var _templateObject$M;
   var propTypes$_ = {
@@ -9427,7 +9429,7 @@
     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$1({}, elementProps, {
@@ -9438,7 +9440,7 @@
   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
@@ -9446,7 +9448,7 @@
   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) {
@@ -9465,7 +9467,7 @@
   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 = {
@@ -9488,7 +9490,7 @@
     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,
@@ -9508,6 +9510,8 @@
   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,
@@ -9533,12 +9537,14 @@
         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$1({}, 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,
@@ -9551,7 +9557,7 @@
   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 = {
@@ -9569,7 +9575,7 @@
     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']);
@@ -9582,7 +9588,7 @@
   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 = {
@@ -9600,7 +9606,7 @@
     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
@@ -9615,7 +9621,7 @@
   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,
@@ -9631,7 +9637,7 @@
         _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),
@@ -9663,7 +9669,7 @@
   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 = {
@@ -9717,7 +9723,7 @@
         _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$1({}, elementProps, {
@@ -9858,7 +9864,7 @@
   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 = {
@@ -9900,7 +9906,7 @@
   });
   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,
@@ -9922,7 +9928,7 @@
   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 = {
@@ -9940,7 +9946,7 @@
     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
@@ -9956,7 +9962,7 @@
   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 = {
@@ -9974,7 +9980,7 @@
     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']);
@@ -9987,7 +9993,7 @@
   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 = {
@@ -10013,7 +10019,7 @@
         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),
@@ -10039,7 +10045,7 @@
   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({
@@ -10060,7 +10066,7 @@
           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 */
 
@@ -10107,7 +10113,7 @@
   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 = {
@@ -10128,7 +10134,7 @@
   });
   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,
@@ -10147,7 +10153,7 @@
   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 = {
@@ -10165,7 +10171,7 @@
     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
@@ -10180,7 +10186,7 @@
   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 = {
@@ -10210,7 +10216,7 @@
         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),
@@ -10236,7 +10242,7 @@
   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({
@@ -10255,7 +10261,7 @@
           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 */
 
@@ -10298,7 +10304,7 @@
     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,
@@ -10308,7 +10314,7 @@
   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);
@@ -10322,7 +10328,7 @@
   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,
@@ -10332,7 +10338,7 @@
   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);
@@ -10349,7 +10355,7 @@
   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 = {
@@ -10363,7 +10369,7 @@
     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  "]))),
@@ -10393,7 +10399,7 @@
         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,
@@ -10415,7 +10421,7 @@
   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 = {
@@ -10468,7 +10474,7 @@
         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,
@@ -10498,7 +10504,7 @@
   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 = {
@@ -10528,7 +10534,7 @@
     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
@@ -10549,7 +10555,7 @@
   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 = {
@@ -10591,7 +10597,7 @@
         _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();
 
@@ -10659,7 +10665,7 @@
   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
@@ -10677,7 +10683,7 @@
         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);
@@ -10772,7 +10778,7 @@
     }, [scrollable]);
   }
 
-  var _excluded$y = ["children", "style"];
+  var _excluded$A = ["children", "style"];
 
   var _templateObject$v;
   var propTypes$C = {
@@ -10786,7 +10792,7 @@
   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$1({}, elementProps, {
@@ -10797,7 +10803,7 @@
   ModalHeader.displayName = 'ModalHeader';
   ModalHeader.propTypes = propTypes$C;
 
-  var _excluded$x = ["children", "style"];
+  var _excluded$z = ["children", "style"];
 
   var _templateObject$u;
   var propTypes$B = {
@@ -10811,7 +10817,7 @@
   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$1({
@@ -10824,7 +10830,7 @@
   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 = {
@@ -10841,7 +10847,7 @@
     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;
@@ -10857,7 +10863,7 @@
   ModalBody.displayName = 'ModalBody';
   ModalBody.propTypes = propTypes$A;
 
-  var _excluded$v = ["children", "style"];
+  var _excluded$x = ["children", "style"];
 
   var _templateObject$s;
   var propTypes$z = {
@@ -10871,7 +10877,7 @@
   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$1({}, elementProps, {
@@ -10882,7 +10888,7 @@
   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'];
@@ -10925,7 +10931,7 @@
         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);
@@ -10981,7 +10987,7 @@
   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 = {
@@ -11035,7 +11041,7 @@
         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;
@@ -11065,7 +11071,7 @@
   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 = {
@@ -11099,7 +11105,7 @@
     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);
@@ -11120,7 +11126,7 @@
   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 = {
@@ -11139,7 +11145,7 @@
     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;
@@ -11157,7 +11163,7 @@
   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 = {
@@ -11177,7 +11183,7 @@
     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;
@@ -11193,7 +11199,7 @@
   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 = {
@@ -11209,7 +11215,7 @@
   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,
@@ -11231,12 +11237,12 @@
   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,
@@ -11252,7 +11258,7 @@
     });
   }
 
-  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 = {
@@ -11285,7 +11291,7 @@
     var style = props.style,
         textStyle = props.textStyle,
         iconStyle = props.iconStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$n);
+        elementProps = _objectWithoutProperties(props, _excluded$p);
 
     var media = useMedia();
 
@@ -11331,12 +11337,12 @@
     }, [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) {
@@ -11347,7 +11353,7 @@
     });
   }
 
-  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 = {
@@ -11375,7 +11381,7 @@
         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))]);
@@ -11401,7 +11407,7 @@
     }, []);
   }
 
-  var _excluded$k = ["children", "style"];
+  var _excluded$m = ["children", "style"];
 
   var _templateObject$j, _templateObject2$d;
   var propTypes$q = {
@@ -11417,7 +11423,7 @@
   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")]);
@@ -11429,7 +11435,7 @@
   OffcanvasHeader.displayName = 'OffcanvasHeader';
   OffcanvasHeader.propTypes = propTypes$q;
 
-  var _excluded$j = ["children", "style"];
+  var _excluded$l = ["children", "style"];
 
   var _templateObject$i;
   var propTypes$p = {
@@ -11443,7 +11449,7 @@
   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$1({
@@ -11456,7 +11462,7 @@
   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 = {
@@ -11475,7 +11481,7 @@
     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")]);
@@ -11488,7 +11494,7 @@
   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'
@@ -11537,7 +11543,7 @@
         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);
@@ -11594,6 +11600,7 @@
   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.node.isRequired,
     selectedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string, PropTypes.object]),
@@ -11604,9 +11611,7 @@
     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__';
 
@@ -11632,10 +11637,11 @@
         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$1({}, elementProps, {
       ref: ref,
       selectedValue: showPlaceholder ? PLACEHOLDER : selectedValue,
       onValueChange: onValueChange,
@@ -11644,9 +11650,8 @@
       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
@@ -11661,9 +11666,11 @@
   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.node.isRequired,
+    children: PropTypes.node,
     selectedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string, PropTypes.object]),
     onValueChange: PropTypes.func,
     onFocus: PropTypes.func,
@@ -11671,10 +11678,10 @@
     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  "])))
@@ -11696,11 +11703,45 @@
     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,
@@ -11710,28 +11751,33 @@
         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$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "combobox",
       accessibilityDisabled: disabled,
@@ -11739,36 +11785,26 @@
       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;
 
@@ -11818,7 +11854,7 @@
 
     var _useForcedContext = useForcedContext(PickerNativeContext),
         selectedValue = _useForcedContext.selectedValue,
-        onValueChange = _useForcedContext.onValueChange;
+        handleValueChange = _useForcedContext.handleValueChange;
 
     var media = useMedia();
     var classes = getStyles(styles$e, ['item', disabled && 'itemDisabled']);
@@ -11827,7 +11863,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Pressable, {
       ref: ref,
       onPress: function onPress() {
-        onValueChange(value);
+        handleValueChange(value);
       },
       accessibilitySelected: selected,
       disabled: disabled,
@@ -11872,7 +11908,7 @@
   /* 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,