Touchables

Overview

React Native Sortables exports a few touchable components, i.e. Pressable, TouchableOpacity and TouchableHighlight.

The role of these components is to properly handle press gesture on components nested within children of sortable components.

Purpose

These touchable components are designed to:

• Handle press gestures properly within sortable component items
• Prevent conflicts between press handling and drag-and-drop functionality

When to Use?

Use these components when you need to add interactive elements (buttons, links, etc.) inside sortable items. The press gesture on a touchable component may interfere with the gesture detector used for item activation and dragging. These components will automatically ignore press events when sortable component item starts being dragged.

Usage

info

For the complete usage example, refer to the Touchables example.

Use these components withing a sortable component's child (item) component.

import Sortable from 'react-native-sortables';

// ... other components
<Sortable.Pressable
  onPress={() => {
    console.log('pressed');
  }}>
  {/* ... other components */}
</Sortable.Pressable>;
// ... other components

Props

onPress

Function that will be called when the user presses the component nested within a sortable component child.

type	default	required
((event: GestureResponderEvent) => void) | null | undefined	NO	NO

info

If you need more different props, you can open a Pull Request to add them or request them in the GitHub Discussions.