{
  "name": "SortableList",
  "category": "lists",
  "description": "A sortable list component",
  "extends": ["FlatList"],
  "extendsLink": ["https://reactnative.dev/docs/flatlist"],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SortableListScreen.tsx",
  "note": "We've seen a case where not all items are rendered on some Android devices, this appears to be a bug with `FlatList` that is using `CellRendererComponent`, our current workaround is for you to add `initialNumToRender={data.length}`.",
  "props": [
    {
      "name": "data",
      "type": "ItemT[] (ItemT extends {id: string})",
      "description": "The data of the list, with an id prop as unique identifier.",
      "note": "Do not update 'data' in 'onOrderChange' (i.e. for each order change); only update it when you change the items (i.g. adding and removing an item).",
      "required": true
    },
    {
      "name": "onOrderChange",
      "type": "(data: ItemT[], info: OrderChangeInfo) => void",
      "description": "A callback to get the new order (or swapped items) and info about the change (from and to indices).",
      "required": true
    },
    {
      "name": "enableHaptic",
      "type": "boolean",
      "description": "Whether to enable the haptic feedback.\n(please note that react-native-haptic-feedback does not support the specific haptic type on Android starting on an unknown version, you can use 1.8.2 for it to work properly)"
    },
    {
      "name": "scale",
      "type": "number",
      "default": "1",
      "description": "Scale the item once dragged."
    },
    {
      "name": "itemProps",
      "type": "{margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}}",
      "description": "Extra props for the item."
    },
    {
      "name": "flexMigration",
      "type": "boolean",
      "description": "A temporary migration flag for enabling flex on the list's container (like it should be by default)"
    }
  ],
  "snippet": [
    "<SortableList",
    "  data={data$1}",
    "  onOrderChange={onOrderChange$2}",
    "  renderItem={renderItem$3}",
    "  keyExtractor={keyExtractor$4}",
    "/>"
  ]
}