bootstrap-rn 0.2.1 → 0.2.2

package/dist/bootstrap-rn.cjs.js

@@ -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) {
@@ -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];
@@ -7669,11 +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", "style"];
+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,
@@ -7681,6 +7683,8 @@ 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
 };
@@ -7704,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,
@@ -7718,6 +7756,10 @@ 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,
       elementProps = _objectWithoutProperties(props, _excluded$h);
 
@@ -7725,20 +7767,21 @@ var PickerNative = /*#__PURE__*/React__default["default"].forwardRef(function (p
 
   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);
+
+  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",
@@ -7747,7 +7790,7 @@ var PickerNative = /*#__PURE__*/React__default["default"].forwardRef(function (p
     focusable: !disabled,
     selectable: false,
     onPress: function onPress() {
-      setOpen(true);
+      setVisible(true);
     },
     onFocus: onFocus,
     onBlur: onBlur,
@@ -7758,24 +7801,15 @@ var PickerNative = /*#__PURE__*/React__default["default"].forwardRef(function (p
     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;
 
@@ -7825,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']);
@@ -7834,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,
@@ -7879,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,

package/dist/bootstrap-rn.esm.js

@@ -3660,7 +3660,7 @@ var propTypes$1n = {
   styleName: PropTypes.any
 };
 var styles$15 = StyleSheet.create({
-  body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    flex-grow: 1; // added for bootstrap-rn\n  "]))),
+  body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    height: 100%; // added for bootstrap-rn\n  "]))),
   'body --text': css(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteral(["\n    color: $body-color;\n    text-align: $body-text-align;\n  "])))
 });
 var Body = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -4253,26 +4253,28 @@ function useIdentifier(prefix) {
 }
 
 function useControlledState(defaultValue, controlledValue) {
-  var onChange = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
+  var handleChange = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
 
   var _useState = useState(defaultValue),
       _useState2 = _slicedToArray(_useState, 2),
       stateValue = _useState2[0],
       setStateValue = _useState2[1];
 
-  var isControlled = typeof controlledValue === 'boolean';
+  var isControlled = controlledValue !== undefined && controlledValue !== null;
   var value = isControlled ? controlledValue : stateValue;
 
-  var setValue = function setValue(nextValue) {
+  var setValue = function setValue(next) {
+    var nextValue = typeof next === 'function' ? next(value) : next;
+
     if (value === nextValue) {
       return;
     }
 
     if (!isControlled) {
-      setStateValue(nextValue);
+      setStateValue(next);
     }
 
-    onChange(nextValue);
+    handleChange(nextValue);
   };
 
   return [value, setValue];
@@ -7660,11 +7662,11 @@ PickerWeb.propTypes = propTypes$m;
 var PickerNativeContext = /*#__PURE__*/React.createContext();
 PickerNativeContext.displayName = 'PickerNativeContext';
 
-var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "style"];
+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,
@@ -7672,6 +7674,8 @@ var propTypes$l = {
   placeholder: PropTypes.string,
   placeholderTextColor: PropTypes.string,
   disabled: PropTypes.bool,
+  renderText: PropTypes.func,
+  renderMenu: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
 };
@@ -7695,11 +7699,45 @@ var extractTextStyles = function extractTextStyles(style) {
   return textStyles;
 };
 
+var renderTextDefault = function renderTextDefault(_ref3) {
+  var children = _ref3.children,
+      selectedValue = _ref3.selectedValue;
+  var items = React.Children.map(children, function (child) {
+    return {
+      label: child.props.label,
+      value: child.props.value
+    };
+  });
+  var selectedItem = items.find(function (item) {
+    return item.value === selectedValue;
+  });
+  return selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label;
+};
+
+var renderMenuDefault = function renderMenuDefault(_ref4) {
+  var children = _ref4.children,
+      selectedValue = _ref4.selectedValue,
+      handleValueChange = _ref4.handleValueChange,
+      handleClose = _ref4.handleClose;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    placement: "bottom",
+    visible: true,
+    onToggle: handleClose
+  }, /*#__PURE__*/React.createElement(Offcanvas.Body, {
+    contentContainerStyle: styles$f.menu
+  }, /*#__PURE__*/React.createElement(PickerNativeContext.Provider, {
+    value: {
+      selectedValue: selectedValue,
+      handleValueChange: handleValueChange
+    }
+  }, children)));
+};
+
 var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       selectedValue = props.selectedValue,
       _props$onValueChange = props.onValueChange,
-      _onValueChange = _props$onValueChange === void 0 ? function () {} : _props$onValueChange,
+      onValueChange = _props$onValueChange === void 0 ? function () {} : _props$onValueChange,
       _props$onFocus = props.onFocus,
       onFocus = _props$onFocus === void 0 ? function () {} : _props$onFocus,
       _props$onBlur = props.onBlur,
@@ -7709,6 +7747,10 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
       placeholderTextColor = _props$placeholderTex === void 0 ? StyleSheet.value('input-placeholder-color') : _props$placeholderTex,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$renderText = props.renderText,
+      renderText = _props$renderText === void 0 ? renderTextDefault : _props$renderText,
+      _props$renderMenu = props.renderMenu,
+      renderMenu = _props$renderMenu === void 0 ? renderMenuDefault : _props$renderMenu,
       style = props.style,
       elementProps = _objectWithoutProperties(props, _excluded$h);
 
@@ -7716,20 +7758,21 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
+      visible = _useState2[0],
+      setVisible = _useState2[1];
 
-  var items = React.Children.map(children, function (child) {
-    return {
-      label: child.props.label,
-      value: child.props.value
-    };
-  });
-  var selectedItem = items.find(function (item) {
-    return item.value === selectedValue;
-  });
   var textStyle = extractTextStyles(background.style);
   var showPlaceholder = placeholder && (selectedValue === undefined || selectedValue === null);
+
+  var handleValueChange = function handleValueChange(nextValue) {
+    onValueChange(nextValue);
+    setVisible(false);
+  };
+
+  var handleClose = function handleClose() {
+    setVisible(false);
+  };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
     ref: ref,
     accessibilityRole: "combobox",
@@ -7738,7 +7781,7 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
     focusable: !disabled,
     selectable: false,
     onPress: function onPress() {
-      setOpen(true);
+      setVisible(true);
     },
     onFocus: onFocus,
     onBlur: onBlur,
@@ -7749,24 +7792,15 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: [textStyle, showPlaceholder && {
       color: placeholderTextColor
     }]
-  }, selectedItem ? selectedItem.label : placeholder)), /*#__PURE__*/React.createElement(Offcanvas, {
-    placement: "bottom",
-    visible: open,
-    onToggle: function onToggle() {
-      setOpen(false);
-    }
-  }, /*#__PURE__*/React.createElement(Offcanvas.Body, {
-    contentContainerStyle: styles$f.menu
-  }, /*#__PURE__*/React.createElement(PickerNativeContext.Provider, {
-    value: {
-      selectedValue: selectedValue,
-      onValueChange: function onValueChange(nextValue) {
-        _onValueChange(nextValue);
-
-        setOpen(false);
-      }
-    }
-  }, children))));
+  }, showPlaceholder ? placeholder : renderText({
+    children: children,
+    selectedValue: selectedValue
+  }))), visible && renderMenu({
+    children: children,
+    selectedValue: selectedValue,
+    handleValueChange: handleValueChange,
+    handleClose: handleClose
+  }));
 });
 PickerNative.propTypes = propTypes$l;
 
@@ -7816,7 +7850,7 @@ var PickerNativeItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useForcedContext = useForcedContext(PickerNativeContext),
       selectedValue = _useForcedContext.selectedValue,
-      onValueChange = _useForcedContext.onValueChange;
+      handleValueChange = _useForcedContext.handleValueChange;
 
   var media = useMedia();
   var classes = getStyles(styles$e, ['item', disabled && 'itemDisabled']);
@@ -7825,7 +7859,7 @@ var PickerNativeItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
     onPress: function onPress() {
-      onValueChange(value);
+      handleValueChange(value);
     },
     accessibilitySelected: selected,
     disabled: disabled,
@@ -7870,7 +7904,7 @@ var _templateObject$d, _templateObject2$9, _templateObject3$3, _templateObject4$
 /* eslint-disable react/no-unused-prop-types */
 
 var propTypes$h = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   placeholderTextColor: PropTypes.string,

package/dist/bootstrap-rn.umd.js

@@ -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) {
@@ -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];
@@ -11664,11 +11666,11 @@
   var PickerNativeContext = /*#__PURE__*/React__default["default"].createContext();
   PickerNativeContext.displayName = 'PickerNativeContext';
 
-  var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "style"];
+  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,
@@ -11676,6 +11678,8 @@
     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
   };
@@ -11699,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,
@@ -11713,6 +11751,10 @@
         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,
         elementProps = _objectWithoutProperties(props, _excluded$h);
 
@@ -11720,20 +11762,21 @@
 
     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);
+
+    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",
@@ -11742,7 +11785,7 @@
       focusable: !disabled,
       selectable: false,
       onPress: function onPress() {
-        setOpen(true);
+        setVisible(true);
       },
       onFocus: onFocus,
       onBlur: onBlur,
@@ -11753,24 +11796,15 @@
       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;
 
@@ -11820,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']);
@@ -11829,7 +11863,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Pressable, {
       ref: ref,
       onPress: function onPress() {
-        onValueChange(value);
+        handleValueChange(value);
       },
       accessibilitySelected: selected,
       disabled: disabled,
@@ -11874,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,