@draftbit/core 46.7.9-13d0dd.2 → 46.7.9-3ec6a6.2

package/lib/commonjs/components/Accordion/AccordionItem.js

@@ -12,7 +12,6 @@ var _theming = require("../../theming");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const AccordionItem = _ref => {
   let {
     Icon,
@@ -27,9 +26,10 @@ const AccordionItem = _ref => {
     textStyles,
     viewStyles
   } = (0, _utilities.extractStyles)(style);
-  return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
-    style: [styles.container, viewStyles]
-  }, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
+  return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    style: [styles.container, viewStyles],
+    ...rest
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.row
   }, icon ? /*#__PURE__*/React.createElement(Icon, {
     name: icon,
@@ -61,4 +61,23 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 var _default = (0, _theming.withTheme)(AccordionItem);
+exports.default = _default;.StyleSheet.create({
+  container: {
+    padding: 8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingLeft: 8
+  },
+  item: {
+    marginVertical: 6,
+    paddingLeft: 8
+  },
+  content: {
+    flex: 1,
+    justifyContent: "center"
+  }
+});
+var _default = (0, _theming.withTheme)(AccordionItem);
 exports.default = _default;

package/lib/commonjs/components/DatePicker/DatePicker.js

@@ -48,7 +48,6 @@ const DatePicker = _ref => {
     placeholder,
     borderColor: inputBorderColor,
     borderColorActive: inputBorderColorActive,
-    autoDismissKeyboard = true,
     ...props
   } = _ref;
   const [value, setValue] = React.useState(date || defaultValue);
@@ -144,11 +143,6 @@ const DatePicker = _ref => {
       clearTimeout(_showPlaceholder());
     };
   }, [focused, label, placeholder]);
-  React.useEffect(() => {
-    if (pickerVisible && autoDismissKeyboard) {
-      _reactNative.Keyboard.dismiss();
-    }
-  }, [pickerVisible, autoDismissKeyboard]);
   const _handleFocus = () => {
     if (disabled) {
       return;

package/lib/commonjs/components/DeckSwiper/DeckSwiper.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeDeckSwiper = _interopRequireDefault(require("react-native-deck-swiper"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DeckSwiper = _ref => {
+  let {
+    onIndexChanged,
+    onEndReached,
+    startCardIndex = 0,
+    infiniteSwiping = false,
+    verticalEnabled = true,
+    horizontalEnabled = true,
+    visibleCardCount = 1,
+    style,
+    children
+  } = _ref;
+  const childrenArray = _react.default.useMemo(() => _react.default.Children.toArray(children), [children]);
+
+  // an array of indices based on children count
+  const cardsFillerData = _react.default.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
+
+  /**
+   * By default react-native-deck-swiper positions everything with absolute position.
+   * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
+   *
+   *
+   * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
+   * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
+   * This effectivley makes the default height of the container be the height of the first card.
+   */
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.containerHeightFiller
+  }, childrenArray.length && childrenArray[0]), /*#__PURE__*/_react.default.createElement(_reactNativeDeckSwiper.default, {
+    cards: cardsFillerData,
+    renderCard: (_, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenArray[i]),
+    keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
+    containerStyle: _reactNative.StyleSheet.flatten([styles.cardsContainer, style]),
+    cardStyle: styles.card,
+    onSwiped: onIndexChanged,
+    onSwipedAll: onEndReached,
+    cardIndex: startCardIndex,
+    infinite: infiniteSwiping,
+    verticalSwipe: verticalEnabled,
+    horizontalSwipe: horizontalEnabled,
+    showSecondCard: visibleCardCount > 1,
+    stackSize: visibleCardCount,
+    backgroundColor: "transparent",
+    cardVerticalMargin: 0,
+    cardHorizontalMargin: 0
+  }));
+};
+const styles = _reactNative.StyleSheet.create({
+  cardsContainer: {
+    width: "100%"
+  },
+  card: {
+    left: 0,
+    right: 0,
+    width: "auto",
+    height: "auto"
+  },
+  containerHeightFiller: {
+    opacity: 0.0
+  }
+});
+var _default = DeckSwiper;
+exports.default = _default;

package/lib/commonjs/components/DeckSwiper/DeckSwiperCard.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _theming = require("../../theming");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DeckSwiperCard = _ref => {
+  let {
+    style,
+    children,
+    theme
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.card, {
+      backgroundColor: theme.colors.background,
+      borderColor: theme.colors.divider
+    }, style]
+  }, children);
+};
+const styles = _reactNative.StyleSheet.create({
+  card: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2
+  }
+});
+var _default = (0, _theming.withTheme)(DeckSwiperCard);
+exports.default = _default;

package/lib/commonjs/components/DeckSwiper/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DeckSwiper", {
+  enumerable: true,
+  get: function () {
+    return _DeckSwiper.default;
+  }
+});
+Object.defineProperty(exports, "DeckSwiperCard", {
+  enumerable: true,
+  get: function () {
+    return _DeckSwiperCard.default;
+  }
+});
+var _DeckSwiper = _interopRequireDefault(require("./DeckSwiper"));
+var _DeckSwiperCard = _interopRequireDefault(require("./DeckSwiperCard"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/commonjs/components/Divider.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _theming = require("../theming");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Divider = _ref => {
   let {
     style,
@@ -18,20 +19,6 @@ const Divider = _ref => {
     },
     ...rest
   } = _ref;
-  return /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: [{
-      backgroundColor: color || colors.divider,
-      height: _reactNative.StyleSheet.hairlineWidth
-    }, style],
-    ...rest
-  });
-};
-var _default = (0, _theming.withTheme)(Divider);
-exports.default = _default;eme: {
-      colors
-    },
-    ...rest
-  } = _ref;
   return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
     style: [{
       backgroundColor: color || colors.divider,

package/lib/commonjs/components/Elevation.js

@@ -11,6 +11,7 @@ var _theming = require("../theming");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
 const Elevation = _ref => {
   let {
@@ -27,24 +28,11 @@ const Elevation = _ref => {
     colors
   } = theme;
   const borderRadius = radius;
-  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
-    ...rest,
+  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, rest, {
     style: [{
       borderRadius,
       backgroundColor: colors.surface
     }, elevation ? (0, _shadow.default)(elevation) : null, style]
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: {
-      overflow: "hidden",
-      borderRadius
-    }
-  }, children));
-};
-var _default = (0, _theming.withTheme)(Elevation);
-exports.default = _default;
-      borderRadius,
-      backgroundColor: colors.surface
-    }, elevation ? (0, _shadow.default)(elevation) : null, style]
   }), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: {
       overflow: "hidden",

package/lib/commonjs/components/Picker/Picker.js

@@ -65,8 +65,7 @@ const Picker = _ref => {
     leftIconName,
     placeholderTextColor = unstyledColor,
     rightIconName,
-    type = "solid",
-    autoDismissKeyboard = true
+    type = "solid"
   } = _ref;
   const androidPickerRef = React.useRef(undefined);
   const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -90,11 +89,6 @@ const Picker = _ref => {
       androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
     }
   }, [pickerVisible, androidPickerRef]);
-  React.useEffect(() => {
-    if (pickerVisible && autoDismissKeyboard) {
-      _reactNative.Keyboard.dismiss();
-    }
-  }, [pickerVisible, autoDismissKeyboard]);
   const normalizedOptions = normalizeOptions(options);
   const pickerOptions = placeholder ? [{
     value: placeholder,

package/lib/commonjs/index.js

@@ -123,6 +123,18 @@ Object.defineProperty(exports, "DatePicker", {
     return _DatePicker.default;
   }
 });
+Object.defineProperty(exports, "DeckSwiper", {
+  enumerable: true,
+  get: function () {
+    return _DeckSwiper.DeckSwiper;
+  }
+});
+Object.defineProperty(exports, "DeckSwiperCard", {
+  enumerable: true,
+  get: function () {
+    return _DeckSwiper.DeckSwiperCard;
+  }
+});
 Object.defineProperty(exports, "DefaultTheme", {
   enumerable: true,
   get: function () {
@@ -401,6 +413,7 @@ var _ActionSheet = require("./components/ActionSheet");
 var _Swiper = require("./components/Swiper");
 var _Layout = require("./components/Layout");
 var _index = require("./components/RadioButton/index");
+var _DeckSwiper = require("./components/DeckSwiper");
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));

package/lib/commonjs/mappings/DatePicker.js

@@ -169,12 +169,7 @@ const SEED_DATA = [{
       editable: true,
       required: true,
       group: _types.GROUPS.basic
-    },
-    autoDismissKeyboard: (0, _types.createStaticBoolProp)({
-      label: "Auto dismiss keyboard",
-      description: "Automatically dismiss keyboard when DatePicker is opened",
-      defaultValue: true
-    })
+    }
   }
 }];
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/DeckSwiper.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Deck Swiper",
+  tag: "DeckSwiper",
+  description: "Deck swiper container",
+  category: _types.COMPONENT_TYPES.swiper,
+  stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
+  layout: {
+    width: "100%"
+  },
+  triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
+  props: {
+    onIndexChanged: (0, _types.createActionProp)({
+      label: "On index changed",
+      description: "Action to execute when swipe to new index"
+    }),
+    onEndReached: (0, _types.createActionProp)({
+      label: "On end reached",
+      description: "Action to execute when end of swiping reached"
+    }),
+    startCardIndex: (0, _types.createStaticNumberProp)({
+      label: "Start card index",
+      description: "Index of card to start swiping from",
+      defaultValue: 0
+    }),
+    infiniteSwiping: (0, _types.createStaticBoolProp)({
+      label: "Infinite swiping",
+      description: "Whether to infinitley loop through cards or not"
+    }),
+    verticalEnabled: (0, _types.createStaticBoolProp)({
+      label: "Vertical swipe enabled",
+      description: "Whether cards should be swipeable vertically or not",
+      defaultValue: true
+    }),
+    horizontalEnabled: (0, _types.createStaticBoolProp)({
+      label: "Horizontal swipe enabled",
+      description: "Whether cards should be swipeable horizontally or not",
+      defaultValue: true
+    }),
+    visibleCardCount: (0, _types.createStaticNumberProp)({
+      label: "Visible card count",
+      description: "Number of cards visible behind (and including) the current card",
+      defaultValue: 1,
+      min: 1,
+      step: 1
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/DeckSwiperCard.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Deck Swiper Card",
+  tag: "DeckSwiperCard",
+  description: "Single Deck Swiper Card item to be used in DeckSwiper",
+  category: _types.COMPONENT_TYPES.swiper,
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2
+  },
+  props: {}
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/Picker.js

@@ -142,11 +142,6 @@ const SEED_DATA = [{
     }),
     iconColor: (0, _types.createColorProp)({
       label: "Icon Color"
-    }),
-    autoDismissKeyboard: (0, _types.createStaticBoolProp)({
-      label: "Auto dismiss keyboard",
-      description: "Automatically dismiss keyboard when Picker is opened",
-      defaultValue: true
     })
   },
   layout: {}

package/lib/module/components/Accordion/AccordionItem.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import Text from "../Text";
@@ -17,10 +18,9 @@ const AccordionItem = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Pressable, {
-    style: [styles.container, viewStyles],
-    ...rest
-  }, /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: [styles.container, viewStyles]
+  }, rest), /*#__PURE__*/React.createElement(View, {
     style: styles.row
   }, icon ? /*#__PURE__*/React.createElement(Icon, {
     name: icon,
@@ -51,25 +51,4 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   }
 });
-export default withTheme(AccordionItem);xtStyles
-  }, label))));
-};
-const styles = StyleSheet.create({
-  container: {
-    padding: 8
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingLeft: 8
-  },
-  item: {
-    marginVertical: 6,
-    paddingLeft: 8
-  },
-  content: {
-    flex: 1,
-    justifyContent: "center"
-  }
-});
 export default withTheme(AccordionItem);

package/lib/module/components/DatePicker/DatePicker.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
-import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, Keyboard } from "react-native";
+import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import dateFormat from "dateformat";
 import { withTheme } from "../../theming";
@@ -39,7 +39,6 @@ const DatePicker = _ref => {
     placeholder,
     borderColor: inputBorderColor,
     borderColorActive: inputBorderColorActive,
-    autoDismissKeyboard = true,
     ...props
   } = _ref;
   const [value, setValue] = React.useState(date || defaultValue);
@@ -135,11 +134,6 @@ const DatePicker = _ref => {
       clearTimeout(_showPlaceholder());
     };
   }, [focused, label, placeholder]);
-  React.useEffect(() => {
-    if (pickerVisible && autoDismissKeyboard) {
-      Keyboard.dismiss();
-    }
-  }, [pickerVisible, autoDismissKeyboard]);
   const _handleFocus = () => {
     if (disabled) {
       return;

package/lib/module/components/DeckSwiper/DeckSwiper.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import DeckSwiperComponent from "react-native-deck-swiper";
+const DeckSwiper = _ref => {
+  let {
+    onIndexChanged,
+    onEndReached,
+    startCardIndex = 0,
+    infiniteSwiping = false,
+    verticalEnabled = true,
+    horizontalEnabled = true,
+    visibleCardCount = 1,
+    style,
+    children
+  } = _ref;
+  const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
+
+  // an array of indices based on children count
+  const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
+
+  /**
+   * By default react-native-deck-swiper positions everything with absolute position.
+   * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
+   *
+   *
+   * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
+   * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
+   * This effectivley makes the default height of the container be the height of the first card.
+   */
+
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.containerHeightFiller
+  }, childrenArray.length && childrenArray[0]), /*#__PURE__*/React.createElement(DeckSwiperComponent, {
+    cards: cardsFillerData,
+    renderCard: (_, i) => /*#__PURE__*/React.createElement(React.Fragment, null, childrenArray[i]),
+    keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
+    containerStyle: StyleSheet.flatten([styles.cardsContainer, style]),
+    cardStyle: styles.card,
+    onSwiped: onIndexChanged,
+    onSwipedAll: onEndReached,
+    cardIndex: startCardIndex,
+    infinite: infiniteSwiping,
+    verticalSwipe: verticalEnabled,
+    horizontalSwipe: horizontalEnabled,
+    showSecondCard: visibleCardCount > 1,
+    stackSize: visibleCardCount,
+    backgroundColor: "transparent",
+    cardVerticalMargin: 0,
+    cardHorizontalMargin: 0
+  }));
+};
+const styles = StyleSheet.create({
+  cardsContainer: {
+    width: "100%"
+  },
+  card: {
+    left: 0,
+    right: 0,
+    width: "auto",
+    height: "auto"
+  },
+  containerHeightFiller: {
+    opacity: 0.0
+  }
+});
+export default DeckSwiper;

package/lib/module/components/DeckSwiper/DeckSwiperCard.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+const DeckSwiperCard = _ref => {
+  let {
+    style,
+    children,
+    theme
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.card, {
+      backgroundColor: theme.colors.background,
+      borderColor: theme.colors.divider
+    }, style]
+  }, children);
+};
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2
+  }
+});
+export default withTheme(DeckSwiperCard);

package/lib/module/components/DeckSwiper/index.js

@@ -0,0 +1,2 @@
+export { default as DeckSwiper } from "./DeckSwiper";
+export { default as DeckSwiperCard } from "./DeckSwiperCard";

package/lib/module/components/Picker/Picker.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions, Keyboard } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePicker } from "@react-native-picker/picker";
@@ -56,8 +56,7 @@ const Picker = _ref => {
     leftIconName,
     placeholderTextColor = unstyledColor,
     rightIconName,
-    type = "solid",
-    autoDismissKeyboard = true
+    type = "solid"
   } = _ref;
   const androidPickerRef = React.useRef(undefined);
   const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -81,11 +80,6 @@ const Picker = _ref => {
       androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
     }
   }, [pickerVisible, androidPickerRef]);
-  React.useEffect(() => {
-    if (pickerVisible && autoDismissKeyboard) {
-      Keyboard.dismiss();
-    }
-  }, [pickerVisible, autoDismissKeyboard]);
   const normalizedOptions = normalizeOptions(options);
   const pickerOptions = placeholder ? [{
     value: placeholder,

package/lib/module/index.js

@@ -31,6 +31,7 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/Ac
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
+export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";

package/lib/module/mappings/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, createStaticBoolProp } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp } from "@draftbit/types";
 const SEED_DATA_PROPS = {
   mode: {
     label: "Mode",
@@ -163,11 +163,6 @@ export const SEED_DATA = [{
       editable: true,
       required: true,
       group: GROUPS.basic
-    },
-    autoDismissKeyboard: createStaticBoolProp({
-      label: "Auto dismiss keyboard",
-      description: "Automatically dismiss keyboard when DatePicker is opened",
-      defaultValue: true
-    })
+    }
   }
 }];