Skip to main content

Touchable

Description​

This example shows why the Sortable.Touchable component is useful when you need to properly detect press events on components nested inside the sortable component item (more precisely, nested within the part of the item that detects the drag gesture - this might be the entire item or just a part of it if the custom handle, like Sortable.Handle, is used).

Source Code​

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

const DATA = Array.from({ length: 4 }, (_, index) => `Item ${index + 1}`);

export default function Example() {
  const [data, setData] = useState(DATA);

  const renderItem = useCallback<SortableGridRenderItem<string>>(
    ({ item }) => (
      <View style={styles.card}>
        <Text style={styles.text}>{item}</Text>
        <Sortable.Touchable
          style={styles.deleteButton}
          onTap={() => setData(prev => prev.filter(i => i !== item))}>
          <Text style={styles.text}>Delete</Text>
        </Sortable.Touchable>
      </View>
    ),
    []
  );

  return (
    <View style={styles.container}>
      <Sortable.Grid
        columnGap={10}
        columns={2}
        data={data}
        renderItem={renderItem}
        rowGap={10}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    alignItems: 'center',
    backgroundColor: '#36877F',
    borderRadius: 10,
    gap: 10,
    height: 100,
    justifyContent: 'center'
  },
  container: {
    padding: 10
  },
  deleteButton: {
    backgroundColor: '#6AA67C',
    borderRadius: 10,
    padding: 10
  },
  text: {
    color: 'white',
    fontWeight: 'bold'
  }
});

Result​

You can see that the Pressable component from React Native still detects the press event even when the item started being dragged, which is not the desired behavior.

On the contrary, the Sortable.Touchable component from this library properly handles the press event and grid items are removed only when the Delete button is pressed, not when the item is dragged.

React Native's PressableSortable.Touchable