@draftbit/core 47.0.1-e04fa3.2 → 47.1.0

package/lib/commonjs/mappings/Touchable.js

@@ -5,16 +5,56 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SEED_DATA = void 0;
 var _types = require("@draftbit/types");
-const SEED_DATA = {
-  name: "Touchable",
-  tag: "Touchable",
-  description: "Simple button with no styles",
-  category: _types.COMPONENT_TYPES.button,
+const SEED_DATA_PROPS = {
   stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Borders],
   layout: {},
-  triggers: [_types.Triggers.OnPress],
+  triggers: [_types.Triggers.OnPress, _types.Triggers.OnLongPress],
   props: {
-    onPress: (0, _types.createActionProp)()
+    onPress: (0, _types.createActionProp)(),
+    onLongPress: (0, _types.createActionProp)(),
+    activeOpacity: (0, _types.createStaticNumberProp)({
+      label: "Active Opacity",
+      description: "The opacity when the button is pressed.",
+      defaultValue: 0.8,
+      min: 0,
+      max: 1,
+      step: 0.01,
+      precision: 2,
+      required: false
+    }),
+    disabledOpacity: (0, _types.createStaticNumberProp)({
+      label: "Disabled Opacity",
+      description: "The opacity when the button is disabled.",
+      defaultValue: 0.8,
+      min: 0,
+      max: 1,
+      step: 0.01,
+      precision: 2,
+      required: false
+    }),
+    delayLongPress: (0, _types.createStaticNumberProp)({
+      label: "Delay Long Press",
+      description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
+      required: false
+    }),
+    hitSlop: (0, _types.createStaticNumberProp)({
+      label: "Hit Slop",
+      description: "Sets additional distance outside of element in which a press can be detected.",
+      required: false
+    })
   }
 };
+const SEED_DATA = [{
+  name: "Touchable",
+  tag: "Touchable",
+  description: "An interactive view with no styles",
+  category: _types.COMPONENT_TYPES.button,
+  ...SEED_DATA_PROPS
+}, {
+  name: "Pressable",
+  tag: "Pressable",
+  description: "An interactive view with no styles",
+  category: _types.COMPONENT_TYPES.button,
+  ...SEED_DATA_PROPS
+}];
 exports.SEED_DATA = SEED_DATA;

package/lib/module/components/Button.js

@@ -13,10 +13,11 @@ function Base(_ref) {
     Icon,
     icon,
     title,
-    onPress,
     loading,
     disabled,
     style,
+    activeOpacity,
+    disabledOpacity,
     ...props
   } = _ref;
   const {
@@ -53,14 +54,13 @@ function Base(_ref) {
     buttonStyles.justifyContent = "flex-end";
   }
   return /*#__PURE__*/React.createElement(Pressable, _extends({
-    onPress: onPress,
     disabled: disabled || loading,
     style: _ref2 => {
       let {
         pressed
       } = _ref2;
       return [styles.base, {
-        opacity: pressed || disabled ? 0.75 : 1
+        opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
       }, buttonStyles];
     }
   }, props), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {

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/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/Justification.js

@@ -1 +0,0 @@
-export {};

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/ResizeMode.js

@@ -1 +0,0 @@
-export {};

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/index.js

@@ -2,143 +2,54 @@ export { injectIcon } from "./interfaces/Icon";
 export { withTheme, ThemeProvider } from "./theming";
 export { default as Provider } from "./Provider";
 export { default as DefaultTheme } from "./styles/DefaultTheme";
-
-/** Replaced By NativeBase
- * export { default as Avatar } from "./components/CircleImage";
- * export { default as Container } from "./components/Container";
- * export { default as FAB } from "./components/FAB";
- * export {
-  Center,
-  Circle,
-  Square,
-  Row,
-  Stack,
-  Spacer,
-} from "./components/Layout";
- */
-
-// BASIC
-export { default as ScreenContainer } from "./components/ScreenContainer";
+export { Link } from "./components/Text";
 export { default as Banner } from "./components/Banner";
-
-// BUTTONS
 export { Button, ButtonSolid, ButtonOutline } from "./components/Button";
-export { Link } from "./components/Text";
+export { default as Avatar } from "./components/CircleImage";
+export { default as AvatarEdit } from "./components/AvatarEdit";
+export { default as Card } from "./components/Card";
+export { default as Carousel } from "./components/Carousel";
+export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
+export { default as CircleImage } from "./components/CircleImage";
+export { default as Container } from "./components/Container";
+export { default as Divider } from "./components/Divider";
+export { default as FAB } from "./components/FAB";
+export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
 export { default as IconButton } from "./components/IconButton";
-export { default as Touchable } from "./components/Touchable";
-export { default as ToggleButton } from "./components/ToggleButton";
-
-// INPUTS
-export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as Image } from "./components/Image";
+export { default as SVG } from "./components/SVG";
 export { default as NumberInput } from "./components/NumberInput";
-export { default as TextField } from "./components/TextField";
-export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
-export { default as Picker } from "./components/Picker/Picker";
-
-// CONTROLS
-export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
-export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
-export { default as Slider } from "./components/Slider";
-export { default as Stepper } from "./components/Stepper";
+export { default as ScreenContainer } from "./components/ScreenContainer";
 export { default as StarRating } from "./components/StarRating";
+export { default as Surface } from "./components/Surface";
 export { default as Switch, SwitchRow } from "./components/Switch";
-
-// MEDIA
-export { default as SVG } from "./components/SVG";
-export { default as Image } from "./components/Image";
-// export { default as Avatar } from "./components/CircleImage"; Replaced by NativeBase
-export { default as AvatarEdit } from "./components/AvatarEdit";
-export { default as CircleImage } from "./components/CircleImage";
-
-// SWIPER
-export { Swiper, SwiperItem } from "./components/Swiper";
-
-// CONTAINERS
+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 { default as Surface } from "./components/Surface";
-
-// ACTIONSHEET
 export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/ActionSheet";
+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";
 
-// OTHER
-export { default as Carousel } from "./components/Carousel";
-export { default as Divider } from "./components/Divider";
+/* Deprecated: Fix or Delete!  */
+export { default as CardBlock } from "./components/CardBlock";
+export { default as CardContainer } from "./components/CardContainer";
+export { default as CardContainerRating } from "./components/CardContainerRating";
+export { default as CardInline } from "./components/CardInline";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as HeaderLarge } from "./components/HeaderLarge";
 export { default as HeaderMedium } from "./components/HeaderMedium";
 export { default as HeaderOverline } from "./components/HeaderOverline";
+export { default as Picker } from "./components/Picker/Picker";
 export { default as ProgressBar } from "./components/ProgressBar";
 export { default as ProgressCircle } from "./components/ProgressCircle";
 export { default as RowBodyIcon } from "./components/RowBodyIcon";
 export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
 export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
-export { default as Card } from "./components/Card";
-export { default as CardBlock } from "./components/CardBlock";
-export { default as CardContainer } from "./components/CardContainer";
-export { default as CardContainerRating } from "./components/CardContainerRating";
-export { default as CardInline } from "./components/CardInline";
+export { default as Slider } from "./components/Slider";
+export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";
 
-/**
- * NativeBase Components Jan 2023
- *
- * ALERT
- * - AlertDialog
- * - AlertDialog.Header
- * - AlertDialog.Body
- * - AlertDialog.Footer
- * - AlertDialog.Content
- * - AlertDialog.CloseButton
- *
- * FORMS
- * - Button -- COMMENTED OUT
- * - Button.Group -- COMMENTED OUT
- * - Fab
- *
- * DATA DISPLAY
- * - Badge
- * - Divider
- *
- * FEEDBACK
- * - Alert
- * - Alert.Icon
- * - Progress
- *
- * LAYOUT
- * - AspectRatio
- * - Box
- * - Center
- * - Square
- * - Circle
- * - Column
- * - Container
- * - Flex
- * - Spacer
- * - Row
- * - Stack
- * - ZStack
- *
- * MEDIA
- * - Avatar
- * - Avatar.Badge
- * - Avatar.Group
- *
- * MENU
- * - Menu
- * - Menu.Item
- * - Menu.Group
- * - Menu.OptionGroup
- * - Menu.ItemOption
- * - Menu.Trigger
- *
- * MODAL
- * - Modal
- * - Modal.Content
- * - Modal.Header
- * - Modal.Footer
- * - Modal.Body
- * - Modal.CloseButton
- *
- * OTHER
- * - Tooltip
- *
- * */
+// a comment to fix sourcemap comment issue

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,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
     })
   }
-};
+}];