@draftbit/core 47.0.1-2f600c.2 → 47.0.1-4681da.2

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

@@ -1,11 +1,13 @@
+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, Pressable } from "react-native";
+import { StyleSheet, View, Platform } 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 var Direction;
+export let Direction;
 (function (Direction) {
   Direction["Row"] = "row";
   Direction["RowReverse"] = "row-reverse";
@@ -47,6 +49,7 @@ const CheckboxRow = _ref => {
       setInternalValue(status);
     }
   }, [status]);
+
   // This special logic is to handle weird APIs like Airtable that return
   // true or undefined for a boolean
   const previousDefaultValue = usePrevious(defaultValue);
@@ -70,14 +73,13 @@ const CheckboxRow = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Pressable, {
+  return /*#__PURE__*/React.createElement(Touchable, _extends({
     onPress: handlePress,
     style: [viewStyles, styles.mainParent, {
       flexDirection: direction
     }],
-    disabled: disabled,
-    ...rest
-  }, /*#__PURE__*/React.createElement(View, {
+    disabled: disabled
+  }, rest), /*#__PURE__*/React.createElement(View, {
     style: [styles.label, {
       alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
     }, labelContainerStyle]
@@ -113,23 +115,4 @@ const styles = StyleSheet.create({
     flex: 3
   }
 });
-export default CheckboxRow;heet.create({
-  mainParent: {
-    alignItems: "center",
-    justifyContent: "space-around",
-    paddingStart: 20,
-    minHeight: 50,
-    paddingEnd: 20,
-    display: "flex",
-    ...Platform.select({
-      web: {
-        cursor: "pointer",
-        userSelect: "none"
-      }
-    })
-  },
-  label: {
-    flex: 3
-  }
-});
 export default CheckboxRow;

package/lib/module/components/DeprecatedButton.js

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

package/lib/module/components/DeprecatedCardWrapper.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 React from "react";
 import { withTheme } from "../theming";
 import Touchable from "./Touchable";
@@ -12,24 +13,6 @@ const getWidth = numColumns => {
   }
 };
 const Card = _ref => {
-  let {
-    numColumns = 3,
-    children,
-    onPress,
-    style,
-    ...rest
-  } = _ref;
-  const width = getWidth(numColumns);
-  return /*#__PURE__*/React.createElement(Touchable, {
-    disabled: !onPress,
-    onPress: onPress,
-    style: [style, {
-      width
-    }],
-    ...rest
-  }, children);
-};
-export default withTheme(Card);ef => {
   let {
     numColumns = 3,
     children,

package/lib/module/components/DeprecatedFAB.js

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

package/lib/module/components/NumberInput.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 React, { useEffect, useState } from "react";
 import { TextInput } from "react-native";
 import { isString, isNumber, isNaN } from "lodash";
@@ -25,6 +26,7 @@ const NumberInput = _ref => {
     }
     return "0";
   };
+
   // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
   useEffect(() => {
     const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
@@ -39,6 +41,7 @@ const NumberInput = _ref => {
     setCurrentStringNumberValue(newStringNumberValue);
     onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
   };
+
   // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
   useEffect(() => {
     const nextStringNumberValue = formatValueToStringNumber(value);
@@ -47,18 +50,6 @@ const NumberInput = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
-  return /*#__PURE__*/React.createElement(TextInput, {
-    keyboardType: "numeric",
-    value: currentStringNumberValue,
-    onChangeText: handleChangeText,
-    ...props
-  });
-};
-export default NumberInput;alue) {
-      handleChangeText(nextStringNumberValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
   return /*#__PURE__*/React.createElement(TextInput, _extends({
     keyboardType: "numeric",
     value: currentStringNumberValue,

package/lib/module/components/Portal/Portal.js

@@ -1,3 +1,6 @@
+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 * as React from "react";
 import PortalConsumer from "./PortalConsumer";
 import PortalHost, { PortalContext } from "./PortalHost";
@@ -24,6 +27,8 @@ import { ThemeProvider, withTheme } from "../../theming";
  * ```
  */
 class Portal extends React.Component {
+  // @component ./PortalHost.tsx
+
   render() {
     const {
       children,
@@ -36,6 +41,5 @@ class Portal extends React.Component {
     }, children)));
   }
 }
-// @component ./PortalHost.tsx
-Portal.Host = PortalHost;
+_defineProperty(Portal, "Host", PortalHost);
 export default withTheme(Portal);

package/lib/module/components/ProgressBar.js

@@ -1,3 +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); }
+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, { Component } from "react";
 import { Animated, Easing, View, I18nManager } from "react-native";
 const INDETERMINATE_WIDTH_FACTOR = 0.3;
@@ -5,7 +9,7 @@ const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_
 export default class ProgressBar extends Component {
   constructor(props) {
     super(props);
-    this.handleLayout = event => {
+    _defineProperty(this, "handleLayout", event => {
       const {
         width = 150,
         onLayout
@@ -18,7 +22,7 @@ export default class ProgressBar extends Component {
       if (onLayout) {
         onLayout(event);
       }
-    };
+    });
     const {
       progress: progressP = 0,
       indeterminate = false
@@ -66,6 +70,7 @@ export default class ProgressBar extends Component {
           ...animationConfig,
           toValue: progress,
           velocity: 0,
+          //adjust this value if animation fails - velocity is required
           useNativeDriver
         }).start();
       } else {
@@ -134,43 +139,6 @@ export default class ProgressBar extends Component {
         })
       }]
     };
-    return /*#__PURE__*/React.createElement(View, {
-      style: [containerStyle, style],
-      onLayout: this.handleLayout,
-      ...restProps
-    }, /*#__PURE__*/React.createElement(Animated.View, {
-      style: progressStyle
-    }), children);
-  }
-}   width,
-      borderWidth,
-      borderColor: borderColor || color,
-      borderRadius,
-      overflow: "hidden",
-      backgroundColor: unfilledColor
-    };
-    const progressStyle = {
-      backgroundColor: color,
-      // Always take up full height of container.
-      height: "100%",
-      transform: [{
-        translateX: this.state.animationValue.interpolate({
-          inputRange: [0, 1],
-          outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth]
-        })
-      }, {
-        translateX: this.state.progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [innerWidth / (I18nManager.isRTL ? 2 : -2), 0]
-        })
-      }, {
-        // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
-        scaleX: this.state.progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0.0001, 1]
-        })
-      }]
-    };
     return /*#__PURE__*/React.createElement(View, _extends({
       style: [containerStyle, style],
       onLayout: this.handleLayout

package/lib/module/components/Switch.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 { Switch as NativeSwitch } from "react-native";
 import { withTheme } from "../theming";
@@ -28,6 +29,7 @@ function Switch(_ref) {
       setChecked(value);
     }
   }, [value, checked]);
+
   // This special logic is to handle weird APIs like Airtable that return
   // true or undefined for a boolean
   const previousDefaultValue = usePrevious(defaultValue);
@@ -36,24 +38,24 @@ function Switch(_ref) {
       setChecked(Boolean(defaultValue));
     }
   }, [defaultValue, previousDefaultValue]);
-  return /*#__PURE__*/React.createElement(NativeSwitch, {
+  return /*#__PURE__*/React.createElement(NativeSwitch, _extends({
     value: checked,
     disabled: disabled,
     trackColor: {
       false: inactiveTrackThemeColor,
       true: activeTrackThemeColor
     },
-    thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor,
+    thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor
     // @ts-ignore react-native-web only
+    ,
     activeThumbColor: activeThumbThemeColor,
     ios_backgroundColor: inactiveTrackThemeColor,
     style: style,
     onValueChange: bool => {
       setChecked(bool);
       onValueChange && onValueChange(bool);
-    },
-    ...rest
-  });
+    }
+  }, rest));
 }
 function Row(_ref2) {
   let {
@@ -82,7 +84,7 @@ function Row(_ref2) {
       setChecked(defaultValue);
     }
   }, [defaultValue]);
-  return /*#__PURE__*/React.createElement(FormRow, {
+  return /*#__PURE__*/React.createElement(FormRow, _extends({
     disabled: disabled,
     onPress: () => {
       setChecked(!checked);
@@ -90,9 +92,8 @@ function Row(_ref2) {
     },
     label: label,
     direction: direction,
-    style: style,
-    ...rest
-  }, /*#__PURE__*/React.createElement(Switch, {
+    style: style
+  }, rest), /*#__PURE__*/React.createElement(Switch, {
     theme: theme,
     value: checked,
     disabled: disabled,
@@ -105,16 +106,4 @@ function Row(_ref2) {
 }
 const SwitchRow = withTheme(Row);
 export { SwitchRow };
-export default withTheme(Switch);: theme,
-    value: checked,
-    disabled: disabled,
-    onValueChange: onValueChange,
-    activeTrackColor: activeTrackColor,
-    inactiveTrackColor: inactiveTrackColor,
-    activeThumbColor: activeThumbColor,
-    inactiveThumbColor: inactiveThumbColor
-  }));
-}
-const SwitchRow = withTheme(Row);
-export { SwitchRow };
 export default withTheme(Switch);

package/lib/module/components/Touchable.js

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

package/lib/module/constants.js

@@ -6,5 +6,4 @@ const DEFAULT_STATUSBAR_HEIGHT_EXPO = expo !== null && expo !== void 0 && expo.C
 export const APPROX_STATUSBAR_HEIGHT = Platform.select({
   android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
   ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
-});O : 0
 });

package/lib/module/mappings/Button.js

@@ -1,8 +1,7 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, createStaticNumberProp } from "@draftbit/types";
-const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
+import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnPress];
 const SEED_DATA_PROPS = {
   onPress: createActionProp(),
-  onLongPress: createActionProp(),
   icon: createIconProp({
     defaultValue: null,
     required: false
@@ -13,37 +12,12 @@ const SEED_DATA_PROPS = {
     defaultValue: "Get Started"
   }),
   disabled: createDisabledProp(),
-  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
-  })
+  loading: createLoadingProp()
+};
+const LAYOUT = {
+  backgroundColor: "transparent",
+  borderRadius: 8,
+  fontFamily: "system-700"
 };
 export const SEED_DATA = [{
   name: "Button Outline",
@@ -51,8 +25,7 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.deprecated,
   stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
   layout: {
-    borderRadius: 8,
-    fontFamily: "system-700",
+    ...LAYOUT,
     backgroundColor: "transparent",
     borderWidth: 1,
     textAlign: "center"
@@ -65,8 +38,7 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.deprecated,
   stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
   layout: {
-    borderRadius: 8,
-    fontFamily: "system-700",
+    ...LAYOUT,
     backgroundColor: "primary",
     textAlign: "center"
   },
@@ -78,8 +50,7 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.button,
   stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
   layout: {
-    borderRadius: 8,
-    fontFamily: "system-700",
+    ...LAYOUT,
     backgroundColor: "primary",
     textAlign: "center"
   },

package/lib/module/mappings/FlashList.js

@@ -1,5 +1,40 @@
-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."
+    }),
+    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 +44,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 +66,11 @@ export const SEED_DATA = {
     }),
     numColumns: createNumColumnsType({
       editable: true
+    }),
+    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,15 @@ export const SEED_DATA = {
     }),
     numColumns: createNumColumnsType({
       editable: true
+    }),
+    initialNumToRender: createStaticBoolProp({
+      label: "Initial Num To Render",
+      descriprion: "How many items to render in the initial batch"
+    }),
+    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
     })
   }
 };