react-native-ui-lib/src/components/sortableGridList/sortableGridList.api.json

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

{
  "name": "SortableGridList",
  "category": "lists",
  "description": "An sortable grid list (based on GridList component)",
  "note": "This component supports square items only",
  "extends": [
    "lists/GridList"
  ],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SortableGridListScreen.tsx",
  "props": [
    {
      "name": "data",
      "type": "any[] & {id: string}",
      "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).",
      "description": "Data of items with an id prop as unique identifier"
    },
    {
      "name": "renderItem",
      "type": "FlatListProps['renderItem']",
      "description": "Custom render item callback"
    },
    {
      "name": "onOrderChange",
      "type": "(newData: T[], newOrder: ItemsOrder) => void",
      "description": "Order change callback"
    },
    {
      "name": "extraData",
      "type": "any",
      "description": "Pass any extra data that should trigger a re-render"
    },
    {
      "name": "flexMigration",
      "type": "boolean",
      "description": "A temporary migration flag for enabling flex on the list's container (like it should be by default)"
    },
    {
      "name": "orderByIndex",
      "type": "boolean",
      "description": "Wether to reorder the items by index instead of by swapping locations.\nItems will move to the new index by pushing other items ahead or aback instead of swapping places with the item at the new index."
    }
  ],
  "snippet": [
    "function Example(props) {",
    "  const [shouldOrderByIndex, setShouldOrderByIndex] = useState(false);",
    "  const data = Data.products.map(product => ({...product}));",
    "",
    "  renderItem = ({item}) => {",
    "    return (",
    "      <Card flex customValue={item.id}>",
    "        <Card.Section",
    "          imageSource={{uri: item.mediaUrl}}",
    "          imageStyle={{width: '100%', height: 108.7, borderRadius: BorderRadiuses.br10}}",
    "          imageProps={{",
    "            customOverlayContent: (",
    "              <Text margin-s1 h1 orange30>",
    "                {item.id}",
    "              </Text>",
    "            )",
    "          }}",
    "        />",
    "      </Card>",
    "    );",
    "  };",
    "",
    "  return (",
    "      <View flex>",
    "        <Playground.ToggleControl title={'Order by index'} state={shouldOrderByIndex} setState={setShouldOrderByIndex}/>",
    "        <SortableGridList",
    "          data={data$1}",
    "          flexMigration",
    "          // onOrderChange={onOrderChange$2}",
    "          maxItemWidth={140$3}",
    "          renderItem={renderItem$4}",
    "          itemSpacing={Spacings.s3$5}",
    "          listPadding={Spacings.s5$6}",
    "          orderByIndex={shouldOrderByIndex$8}",
    "        />",
    "      </View>",
    "  );",
    "}"
  ],
  "docs": {
    "hero": {
      "title": "SortableGridList",
      "description": "An sortable grid list (based on GridList component)"
    },
    "tabs": [
      {
        "title": "UX Guidelines",
        "sections": [
          {
            "type": "section",
            "content": [
              {
                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=16685-543834&embed-host=share",
                "height": 1600
              }
            ]
          }
        ]
      }
    ]
  }
}