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": "Sortable Grid List is used to display a collection of items in an organized grid and allows rearrangement of these. Any element (text, image, media) can be arranged in a grid and customized. ",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SortableGridList/listItem_overview_cover.png"
        }
      ]
    },
    "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
              }
            ]
          }
        ]
      },
      {
        "title": "Overview",
        "sections": [
          {
            "type": "section",
            "title": "Usage Examples",
            "description": "",
            "content": [
              {
                "value": "\"https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=14331-62322&embed-host=share\" "
              }
            ]
          },
          {
            "type": "section",
            "title": "Spec",
            "description": "Markdown:\n**Grid Columns Calculation**\nOption 1 - Max Item Width:\nSet maximum width of a single item, and amount of items in a row will be set automatically, according to screen width.\nOption 2 - Num Columns:\nSet amount of Columns, and items width will be automatic according to screen width.\n**Rearranging items**\nPress and hold an item and to move it around and reorder the grid, the item expands by 10% to indicate that it has been selected. ",
            "layout": "horizontal",
            "content": [
              {
                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SortableGridList/spec.png"
              }
            ]
          },
          {
            "type": "section",
            "title": "Tablet",
            "description": "The tablet version will keep it’s proportions and will allow displaying up to 6 columns of items, to avoid a cluttered screen.",
            "content": [
              {
                "value": "\"https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=14331-63246&embed-host=share\""
              }
            ]
          }
        ]
      }
    ]
  }
}