react-native-ui-lib/src/components/sortableList/SortableList.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "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": [
    "function Example(props) {",
    "  const data = Array.from({length: 10}, (_, index) => {",
    "    let text = `${index}`;",
    "    if (index === 3) {",
    "      text = 'Locked item';",
    "    }",
    "  ",
    "    return {",
    "      text,",
    "      id: `${index}`,",
    "      locked: index === 3",
    "    };",
    "  });",
    "",
    "  const renderItem = useCallback(({item, index: _index}: {item: Item; index: number}) => {",
    "    const {locked} = item;",
    "    return (",
    "      <View",
    "        style={{height: 52, borderColor: Colors.$outlineDefault, borderBottomWidth: 1}}",
    "        centerV",
    "        centerH={locked}",
    "        paddingH-10",
    "      >",
    "        <View flex row spread centerV>",
    "          {!locked && <Icon source={Assets.icons.demo.drag} tintColor={Colors.$iconDisabled}/>}",
    "          <Text center $textDefault={!locked} $textNeutralLight={locked}>",
    "            {item.text}",
    "          </Text>",
    "          {!locked && <Icon source={Assets.icons.demo.chevronRight} tintColor={Colors.$iconDefault}/>}",
    "        </View>",
    "      </View>",
    "    );",
    "  }, []);",
    "",
    "  const keyExtractor = useCallback((item: Item) => {",
    "    return `${item.id}`;",
    "  }, []);",
    "",
    "  return (",
    "    <View>",
    "      <SortableList",
    "        data={data$1}",
    "        flexMigration",
    "        // onOrderChange={onOrderChange$2}",
    "        renderItem={renderItem$3}",
    "        keyExtractor={keyExtractor$4}",
    "      />",
    "    </View>",
    "  )",
    "};"
  ]
}