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).

In this Sortable Flex example, each item has a delete button that removes it only when pressed, not when the item is dragged.

Example

Source Code

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

const INITIAL_DATA = [
  'Poland',
  'Germany',
  'France',
  'Italy',
  'Spain',
  'Portugal',
  'Greece',
  'Canada'
];

export default function FlexTouchableExample() {
  const [data, setData] = useState(INITIAL_DATA);

  return (
    <View style={styles.container}>
      <Sortable.Flex
        gap={10}
        onDragEnd={({ order }) => setData(order(data))}>
        {data.map(item => (
          <View key={item} style={styles.card}>
            <Text numberOfLines={1} style={styles.text}>
              {item}
            </Text>
            <Sortable.Touchable
              style={styles.deleteButton}
              onTap={() => setData(prev => prev.filter(i => i !== item))}>
              <Text style={styles.text}>✕</Text>
            </Sortable.Touchable>
          </View>
        ))}
      </Sortable.Flex>
      {data.length === 0 && (
        <View style={styles.emptyContainer}>
          <Text style={styles.emptyText}>All items deleted!</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    alignItems: 'center',
    backgroundColor: 'var(--ifm-color-primary)',
    borderRadius: 9999,
    flexDirection: 'row',
    gap: 10,
    paddingHorizontal: 16,
    paddingVertical: 12
  },
  container: {
    flex: 1,
    padding: 10
  },
  deleteButton: {
    alignItems: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.3)',
    borderRadius: 9999,
    height: 22,
    justifyContent: 'center',
    width: 22
  },
  emptyContainer: {
    alignItems: 'center',
    padding: 20
  },
  emptyText: {
    color: 'var(--ifm-color-emphasis-600)',
    fontSize: 16,
    fontStyle: 'italic'
  },
  text: {
    color: 'white',
    fontWeight: 'bold'
  }
});

Interactive Demo

Loading interactive demo...