@draftbit/core 47.0.1-ed6e56.2 → 47.1.1-8b0b37.2

package/lib/module/components/Checkbox/Checkbox.js

@@ -1,8 +1,7 @@
 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, StyleSheet } from "react-native";
+import { View, StyleSheet, Pressable } from "react-native";
 import { useTheme } from "../../theming";
-import Touchable from "../Touchable";
 import { usePrevious } from "../../hooks";
 const Checkbox = _ref => {
   let {
@@ -51,7 +50,7 @@ const Checkbox = _ref => {
       onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
     }
   };
-  return /*#__PURE__*/React.createElement(Touchable, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
     onPress: handlePress,
     disabled: disabled,
     accessibilityState: {

package/lib/module/components/Checkbox/CheckboxGroupRow.js

@@ -1,11 +1,10 @@
 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 { StyleSheet, View, Platform } from "react-native";
+import { StyleSheet, View, Platform, Pressable } from "react-native";
 import Checkbox from "./Checkbox";
 import Text from "../Text";
 import { useCheckboxGroupContext } from "./context";
 import { Direction as GroupDirection } from "./context";
-import Touchable from "../Touchable";
 import { extractStyles } from "../../utilities";
 export let Direction;
 (function (Direction) {
@@ -64,7 +63,7 @@ const CheckboxGroupRow = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Touchable, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
     onPress: handlePress,
     style: [styles.mainParent, {
       flexDirection: direction

package/lib/module/components/Checkbox/CheckboxRow.js

@@ -1,11 +1,10 @@
 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 { StyleSheet, View, Platform } from "react-native";
+import { StyleSheet, View, Platform, Pressable } from "react-native";
 import { isString } from "lodash";
 import { extractStyles } from "../../utilities";
 import { usePrevious } from "../../hooks";
 import Text from "../Text";
-import Touchable from "../Touchable";
 import Checkbox from "./Checkbox";
 export let Direction;
 (function (Direction) {
@@ -73,7 +72,7 @@ const CheckboxRow = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Touchable, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
     onPress: handlePress,
     style: [viewStyles, styles.mainParent, {
       flexDirection: direction

package/lib/module/components/CircularProgress.js

@@ -1,27 +1,24 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React from "react";
 import { View } from "react-native";
 import { Svg, Path, G } from "react-native-svg";
 class CircularProgress extends React.Component {
   constructor() {
     super(...arguments);
-    _defineProperty(this, "polarToCartesian", (centerX, centerY, radius, angleInDegrees) => {
+    this.polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
       var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
       return {
         x: centerX + radius * Math.cos(angleInRadians),
         y: centerY + radius * Math.sin(angleInRadians)
       };
-    });
-    _defineProperty(this, "circlePath", (x, y, radius, startAngle, endAngle) => {
+    };
+    this.circlePath = (x, y, radius, startAngle, endAngle) => {
       var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
       var end = this.polarToCartesian(x, y, radius, startAngle);
       var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
       var d = ["M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y];
       return d.join(" ");
-    });
-    _defineProperty(this, "clampFill", fill => Math.min(100, Math.max(0, fill)));
+    };
+    this.clampFill = fill => Math.min(100, Math.max(0, fill));
   }
   render() {
     const {
@@ -101,4 +98,27 @@ class CircularProgress extends React.Component {
     }, children(fill)));
   }
 }
+export default CircularProgress;eElement(G, {
+      rotation: rotation,
+      originX: (size + padding) / 2,
+      originY: (size + padding) / 2
+    }, backgroundColor && /*#__PURE__*/React.createElement(Path, {
+      d: backgroundPath,
+      stroke: backgroundColor,
+      strokeWidth: backgroundWidth || width,
+      strokeLinecap: lineCap,
+      strokeDasharray: strokeDasharrayBackground,
+      fill: "transparent"
+    }), fill > 0 && /*#__PURE__*/React.createElement(Path, {
+      d: circlePathItem,
+      stroke: tintColor,
+      strokeWidth: width,
+      strokeLinecap: lineCap,
+      strokeDasharray: strokeDasharrayTint,
+      fill: "transparent"
+    }), cap)), children && /*#__PURE__*/React.createElement(View, {
+      style: localChildrenContainerStyle
+    }, children(fill)));
+  }
+}
 export default CircularProgress;

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

@@ -343,7 +343,6 @@ const DatePicker = _ref => {
   }, /*#__PURE__*/React.createElement(DateTimePicker, {
     value: getValidDate(),
     mode: mode,
-    displayMode: "default",
     isVisible: pickerVisible,
     toggleVisibility: toggleVisibility,
     onChange: (_event, data) => {

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

@@ -1,18 +1,19 @@
 import React from "react";
+import { Platform } from "react-native";
+import DateTimePicker from "@react-native-community/datetimepicker";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 const DatePickerComponent = _ref => {
   let {
     value,
     onChange,
-    displayMode = "default",
     mode,
     toggleVisibility
   } = _ref;
-  return /*#__PURE__*/React.createElement(DateTimePickerModal, {
+  return Platform.OS === "ios" || Platform.OS === "android" ? /*#__PURE__*/React.createElement(DateTimePickerModal, {
     date: value,
     mode: mode,
     isVisible: true,
-    display: displayMode,
+    display: Platform.OS === "ios" ? "spinner" : "default",
     onCancel: () => {
       console.log("Picker cancelled before selecting anything.");
       toggleVisibility();
@@ -20,6 +21,11 @@ const DatePickerComponent = _ref => {
     onConfirm: data => {
       onChange(null, data);
     }
+  }) : /*#__PURE__*/React.createElement(DateTimePicker, {
+    value: value,
+    mode: mode,
+    onChange: onChange,
+    display: "default"
   });
 };
 export default DatePickerComponent;

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

@@ -36,6 +36,7 @@ const DatePickerComponent = _ref => {
       onChange(null, d);
     },
     onClose: () => toggleVisibility(),
+    variant: "dialog",
     TextFieldComponent: () => null
   })));
 };

package/lib/module/components/DeprecatedButton.js

@@ -1,9 +1,8 @@
 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 { ActivityIndicator, View, Text, StyleSheet } from "react-native";
+import { ActivityIndicator, View, Text, StyleSheet, Pressable } from "react-native";
 import color from "color";
 import Config from "./Config";
-import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
 const Button = _ref => {
@@ -18,7 +17,6 @@ const Button = _ref => {
     children,
     onPress,
     elevation = 0,
-    style,
     theme: {
       colors,
       disabledOpacity,
@@ -72,41 +70,19 @@ const Button = _ref => {
     marginRight: -8,
     width: Config.buttonIconSize
   }];
-  const {
-    margin,
-    marginEnd,
-    marginTop,
-    marginLeft,
-    marginRight,
-    marginBottom,
-    marginHorizontal,
-    marginVertical,
-    ...innerStyles
-  } = StyleSheet.flatten(style || {});
-  const margins = {
-    margin,
-    marginEnd,
-    marginTop,
-    marginLeft,
-    marginRight,
-    marginBottom,
-    marginHorizontal,
-    marginVertical
-  };
   return /*#__PURE__*/React.createElement(Elevation, {
     style: {
       elevation,
-      alignSelf: "stretch",
-      ...margins
+      alignSelf: "stretch"
     }
-  }, /*#__PURE__*/React.createElement(Touchable, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
     onPress: onPress,
     accessibilityState: {
       disabled
     },
     accessibilityRole: "button",
     disabled: disabled || loading,
-    style: [styles.button, buttonStyle, innerStyles]
+    style: [styles.button, buttonStyle]
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.content
   }, icon && loading !== true ? /*#__PURE__*/React.createElement(View, {

package/lib/module/components/DeprecatedFAB.js

@@ -1,10 +1,9 @@
 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 { ActivityIndicator, View, StyleSheet } from "react-native";
+import { ActivityIndicator, View, StyleSheet, Pressable } from "react-native";
 import color from "color";
 import Config from "./Config";
 import Text from "./Text";
-import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
 const FAB = _ref => {
@@ -98,7 +97,7 @@ const FAB = _ref => {
     style: [{
       elevation
     }, style]
-  }, /*#__PURE__*/React.createElement(Touchable, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
     onPress: onPress,
     accessibilityState: {
       disabled

package/lib/module/components/Image.js

@@ -1,4 +1,3 @@
-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); }
 /* README: Internal Image component used for stuff like Card. DO NOT EXPORT! */
 import React from "react";
 import { Image as NativeImage, StyleSheet } from "react-native";
@@ -56,7 +55,24 @@ const Image = _ref2 => {
         height,
         aspectRatio
       }]
-    }, /*#__PURE__*/React.createElement(NativeImage, _extends({}, props, {
+    }, /*#__PURE__*/React.createElement(NativeImage, {
+      ...props,
+      source: imageSource,
+      resizeMode: resizeMode,
+      style: [style, {
+        height: "100%",
+        width: "100%"
+      }]
+    }));
+  }
+  return /*#__PURE__*/React.createElement(NativeImage, {
+    ...props,
+    source: source,
+    resizeMode: resizeMode,
+    style: style
+  });
+};
+export default Image;eImage, _extends({}, props, {
       source: imageSource,
       resizeMode: resizeMode,
       style: [style, {

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

@@ -1,4 +1,3 @@
-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, StyleSheet } from "react-native";
 import omit from "lodash.omit";
@@ -8,7 +7,6 @@ import { extractStyles } from "../../utilities";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 const Picker = _ref => {
-  var _options$find$label, _options$find;
   let {
     style,
     options,
@@ -18,6 +16,7 @@ const Picker = _ref => {
     onValueChange: onValueChangeOverride = () => {},
     ...props
   } = _ref;
+  var _a, _b;
   const {
     viewStyles: {
       borderRadius,
@@ -62,7 +61,7 @@ const Picker = _ref => {
   };
 
   const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  const selectedLabel = selectedValue && ((_b = (_a = options.find(o => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
   return /*#__PURE__*/React.createElement(Touchable, {
     disabled: disabled,
     onPress: toggleFocus,
@@ -84,6 +83,25 @@ const Picker = _ref => {
     label: o.label,
     value: o.value,
     key: o.value
+  }))), /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    ...props,
+    value: selectedLabel,
+    placeholder: placeholder,
+    // @ts-ignore
+    ref: textField,
+    disabled: disabled,
+    // @ts-expect-error
+    style: stylesWithoutMargin
+  }))));
+};
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  }
+});
+export default withTheme(Picker);y: o.value
   }))), /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {

package/lib/module/components/Pressable.js

@@ -0,0 +1,30 @@
+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 React from "react";
+import { Pressable as NativePressable } from "react-native";
+export default function Pressable(_ref) {
+  let {
+    children,
+    disabled,
+    onPress,
+    activeOpacity,
+    disabledOpacity,
+    delayLongPress,
+    hitSlop,
+    style,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(NativePressable, _extends({
+    onPress: onPress,
+    disabled: disabled,
+    delayLongPress: delayLongPress ? delayLongPress : 500,
+    hitSlop: hitSlop ? hitSlop : 8,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [{
+        opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
+      }, style];
+    }
+  }, props), children);
+}

package/lib/module/components/RadioButton/context.js

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-export let Direction;
+export var Direction;
 (function (Direction) {
   Direction["Horizontal"] = "horizontal";
   Direction["Vertical"] = "vertical";

package/lib/module/components/Swiper/Swiper.js

@@ -18,6 +18,7 @@ const Swiper = _ref => {
     keyExtractor,
     renderItem,
     children,
+    onIndexChanged,
     style
   } = _ref;
   return /*#__PURE__*/React.createElement(View, {
@@ -27,6 +28,7 @@ const Swiper = _ref => {
     loop: loop,
     timeout: timeout,
     vertical: vertical,
+    onIndexChanged: onIndexChanged,
     controlsProps: {
       prevTitle,
       nextTitle,

package/lib/module/components/Touchable.js

@@ -6,19 +6,24 @@ export default function Touchable(_ref) {
     children,
     disabled,
     onPress,
+    activeOpacity,
+    disabledOpacity,
+    delayLongPress,
+    hitSlop,
     style,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement(Pressable, _extends({
-    onPress: onPress,
     disabled: disabled,
-    hitSlop: 8,
+    onPress: onPress,
+    delayLongPress: delayLongPress ? delayLongPress : 500,
+    hitSlop: hitSlop ? hitSlop : 8,
     style: _ref2 => {
       let {
         pressed
       } = _ref2;
       return [{
-        opacity: pressed || disabled ? 0.75 : 1
+        opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
       }, style];
     }
   }, props), children);

package/lib/module/hooks.js

@@ -3,12 +3,11 @@ export function usePrevious(value) {
   // The ref object is a generic container whose current property is mutable
   // and can hold any value, similar to an instance property on a class
   const ref = React.useRef();
-
   // Store current value in ref
   React.useEffect(() => {
     ref.current = value;
   }, [value]);
-
   // Return previous value (happens before update in useEffect above)
   return ref.current;
+}
 }

package/lib/module/index.js

@@ -26,6 +26,7 @@ export { default as Switch, SwitchRow } from "./components/Switch";
 export { default as TextField } from "./components/TextField";
 export { default as ToggleButton } from "./components/ToggleButton";
 export { default as Touchable } from "./components/Touchable";
+export { default as Pressable } from "./components/Pressable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";

package/lib/module/mappings/Button.js

@@ -1,7 +1,8 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections } from "@draftbit/types";
-const SEED_DATA_TRIGGERS = [Triggers.OnPress];
+import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, createStaticNumberProp } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
 const SEED_DATA_PROPS = {
   onPress: createActionProp(),
+  onLongPress: createActionProp(),
   icon: createIconProp({
     defaultValue: null,
     required: false
@@ -12,12 +13,37 @@ const SEED_DATA_PROPS = {
     defaultValue: "Get Started"
   }),
   disabled: createDisabledProp(),
-  loading: createLoadingProp()
-};
-const LAYOUT = {
-  backgroundColor: "transparent",
-  borderRadius: 8,
-  fontFamily: "system-700"
+  loading: createLoadingProp(),
+  activeOpacity: createStaticNumberProp({
+    label: "Active Opacity",
+    description: "Opacity of the button when active.",
+    defaultValue: 0.8,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    precision: 2,
+    required: false
+  }),
+  disabledOpacity: createStaticNumberProp({
+    label: "Disabled Opacity",
+    description: "Opacity of the button when disabled.",
+    defaultValue: 0.8,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    precision: 2,
+    required: false
+  }),
+  delayLongPress: createStaticNumberProp({
+    label: "Delay Long Press",
+    description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
+    required: false
+  }),
+  hitSlop: createStaticNumberProp({
+    label: "Hit Slop",
+    description: "Sets additional distance outside of element in which a press can be detected",
+    required: false
+  })
 };
 export const SEED_DATA = [{
   name: "Button Outline",
@@ -25,7 +51,8 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.deprecated,
   stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
   layout: {
-    ...LAYOUT,
+    borderRadius: 8,
+    fontFamily: "system-700",
     backgroundColor: "transparent",
     borderWidth: 1,
     textAlign: "center"
@@ -38,7 +65,8 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.deprecated,
   stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
   layout: {
-    ...LAYOUT,
+    borderRadius: 8,
+    fontFamily: "system-700",
     backgroundColor: "primary",
     textAlign: "center"
   },
@@ -50,7 +78,8 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.button,
   stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
   layout: {
-    ...LAYOUT,
+    borderRadius: 8,
+    fontFamily: "system-700",
     backgroundColor: "primary",
     textAlign: "center"
   },

package/lib/module/mappings/FlashList.js

@@ -1,5 +1,45 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS } from "@draftbit/types";
-export const SEED_DATA = {
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, createStaticNumberProp } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Masonry List",
+  tag: "MasonryFlashList",
+  description: "Masonry Flashlist by Shopify",
+  packageName: "@shopify/flash-list",
+  category: COMPONENT_TYPES.data,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1
+  },
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+  props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
+    numColumns: createNumColumnsType({
+      editable: true
+    }),
+    estimatedItemSize: createNumberProp({
+      group: GROUPS.basic,
+      label: "Est. Item Size",
+      description: "Approximate size of the items before rendering.",
+      defaultValue: 50,
+      step: 1,
+      precision: 0
+    }),
+    optimizeItemArrangement: createStaticBoolProp({
+      label: "Optimize Item Arrangement",
+      description: "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false."
+    }),
+    initialNumToRender: createStaticNumberProp({
+      label: "Initial Num To Render",
+      description: "How many items to render in the initial batch",
+      defaultValue: null
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      label: "End Reached Threshold",
+      description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+      defaultValue: 0.5
+    })
+  }
+}, {
   name: "FlashList",
   tag: "FlashList",
   description: "Flashlist by Shopify",
@@ -9,7 +49,10 @@ export const SEED_DATA = {
   layout: {
     flex: 1
   },
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
   props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
     estimatedItemSize: createNumberProp({
       group: GROUPS.basic,
       label: "Est. Item Size",
@@ -28,6 +71,16 @@ export const SEED_DATA = {
     }),
     numColumns: createNumColumnsType({
       editable: true
+    }),
+    initialNumToRender: createStaticNumberProp({
+      label: "Initial Num To Render",
+      description: "How many items to render in the initial batch",
+      defaultValue: null
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      label: "End Reached Threshold",
+      description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+      defaultValue: 0.5
     })
   }
-};
+}];

package/lib/module/mappings/FlatList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createStaticNumberProp } from "@draftbit/types";
 export const SEED_DATA = {
   name: "List",
   tag: "FlatList",
@@ -8,7 +8,10 @@ export const SEED_DATA = {
   layout: {
     flex: 1
   },
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
   props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
     horizontal: createStaticBoolProp({
       label: "Horizontal",
       description: "Render list horizontally"
@@ -19,6 +22,16 @@ export const SEED_DATA = {
     }),
     numColumns: createNumColumnsType({
       editable: true
+    }),
+    initialNumToRender: createStaticNumberProp({
+      label: "Initial Num To Render",
+      description: "How many items to render in the initial batch",
+      defaultValue: null
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      label: "End Reached Threshold",
+      description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+      defaultValue: 0.5
     })
   }
 };