Different Item Heights

Description

This example shows that the Sortable Grid component can handle different item heights without any issues.

Similar to the Sortable Grid component, the Sortable Flex component can also handle different item heights.

Example

Source Code

import { useCallback } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Sortable from 'react-native-sortables';

const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);
// Deterministic heights for demo purposes
const HEIGHTS = [120, 80, 150, 60, 100, 130, 90, 70, 110, 140, 50, 85];

export default function DifferentItemHeightsExample() {
  const renderItem = useCallback(
    ({ index, item }: { item: string; index: number }) => (
      <View style={[styles.card, { height: HEIGHTS[index % HEIGHTS.length] }]}>
        <Text style={styles.text}>{item}</Text>
      </View>
    ),
    []
  );

  return (
    <View style={styles.container}>
      <Sortable.Grid
        columnGap={10}
        columns={3}
        data={DATA}
        dimensionsAnimationType='worklet'
        renderItem={renderItem}
        rowGap={10}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    alignItems: 'center',
    backgroundColor: 'var(--ifm-color-primary)',
    borderRadius: 10,
    justifyContent: 'center'
  },
  container: {
    padding: 10
  },
  text: {
    color: 'white',
    fontWeight: 'bold'
  }
});

Interactive Demo

Loading interactive demo...

Result