items sometimes get "stuck" when dragging

[rkstar]

sometimes, inconsistently, when dragging an item it will get "stuck" in drag mode. it doesn't happen all the time, and it may only be happening on specific devices (?) -- i've only seen this reproduced on iphone 15 pro. it does not seem to happen on iphone 13 pro or samsung s23 devices.

everything else works fantastically: auto-scroll, enable/disable sorting, multi-column, etc... even the pagination and pull-to-refresh works great when wrapped Sortable.Grid in Animated.FlatList.

i don't think i'm doing anything special or outrageous, so i'm unsure why this would be happening. changing the data input or disable/enable sort seems to "reset" the drag state. here's the code i'm using:

  const ref = useAnimatedRef<Animated.FlatList<T>>();
  const overDrag: OverDrag = (props.columns ?? 0) >= 2 ? 'both' : 'vertical';
  const onOrderChange = () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

  const onDragEnd = ({
    sortedItem,
    sortedAfterItem,
    version,
  }: DragAndDropListDragEndParams<TodoListItemDataFragment>) => {
    // api call ... 
    handleEditListCustomSortOrder({ sortedItem, sortedAfterItem, version });
  };

  const renderItem = React.useCallback(
    ({ item }) => (
      <ListItem
        showListName
        item={item}
        listId={item.listId}
        listType={ListTypeEnum.TaskList}
        onRefresh={onRefresh}
      />
    ),
    [],
  );


  return (
    <Animated.FlatList
      ref={ref}
      data={[1]}
      refreshing={refreshing}
      onRefresh={onRefresh}
      keyboardDismissMode="on-drag"
      renderItem={() => (
        <Sortable.Grid<T>
          scrollableRef={ref}
          data={data}
          renderItem={renderItem}
          activeItemScale={1.05}
          inactiveItemOpacity={0.85}
          dragActivationDelay={600}
          overDrag={overDrag}
          onDragEnd={onDragEnd}
          onOrderChange={onOrderChange}
          rows={undefined}
        />
      )}
    />
  );

here's an example of it happening:

ScreenRecording_04-10-2025.07-33-59_1.MP4

[MatiPl01]

Hey @rkstar!

It is very weird that this issue happens only on specific devices and is inconsistent. I wrote myself a similar example to try to reproduce the issue on my end.

Example source code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import RNHapticFeedback from 'react-native-haptic-feedback';
import Animated, { useAnimatedRef } from 'react-native-reanimated';
import type {
  OverDrag,
  SortableGridDragEndParams,
  SortableGridRenderItem
} from 'react-native-sortables';
import Sortable from 'react-native-sortables';

import { Button } from '@/components';

type TodoItem = {
  id: string;
  title: string;
  category: 'dont_forget' | 'gifts' | 'todo';
  date?: string;
  icon?: string;
};

const initialTodos: Array<TodoItem> = [
  {
    category: 'dont_forget',
    date: 'Thu, Apr 10 @ 7:45am',
    icon: '🧠',
    id: '1',
    title: 'Pay insurance policy'
  },
  {
    category: 'dont_forget',
    date: 'Sun, Apr 13 @ 6:00pm',
    icon: '🧠',
    id: '2',
    title: 'Refill coffee beans'
  },
  {
    category: 'todo',
    date: 'Tue, Apr 8',
    id: '3',
    title: 'Start sending out invites for Le...'
  },
  {
    category: 'todo',
    date: 'Today @ 2:30pm',
    id: '4',
    title: 'Schedule dentist appointment'
  },
  {
    category: 'todo',
    date: 'Tomorrow',
    id: '5',
    title: 'Buy birthday cake for Sarah'
  },
  {
    category: 'dont_forget',
    date: 'Mon, Apr 15',
    icon: '🧠',
    id: '6',
    title: 'Renew passport'
  },
  {
    category: 'dont_forget',
    date: 'Sat, Apr 12',
    icon: '🧠',
    id: '7',
    title: 'Pay taxes'
  },
  {
    category: 'gifts',
    id: '8',
    title: 'Kelly slater book from Katherin...'
  },
  {
    category: 'gifts',
    id: '9',
    title: 'Custom Pokemon cards of Lea...'
  },
  {
    category: 'gifts',
    id: '10',
    title: 'Red wine from Brett + kelly'
  },
  {
    category: 'gifts',
    id: '11',
    title: 'Handmade scarf for mom'
  },
  {
    category: 'todo',
    date: 'Fri, Apr 11',
    id: '12',
    title: 'Submit quarterly report'
  },
  {
    category: 'dont_forget',
    date: 'Next week',
    icon: '🧠',
    id: '13',
    title: 'Car maintenance due'
  },
  {
    category: 'gifts',
    id: '14',
    title: 'Anniversary gift for David'
  },
  {
    category: 'dont_forget',
    date: 'This month',
    icon: '🧠',
    id: '15',
    title: 'Update emergency contacts'
  }
];

const TodoItemComponent: React.FC<{
  item: TodoItem;
  isActive?: boolean;
}> = ({ isActive, item }) => {
  const backgroundColor =
    item.category === 'todo'
      ? '#FFF1E6'
      : item.category === 'dont_forget'
        ? '#F3E5F5'
        : '#FFF3E0';

  return (
    <View
      style={[
        styles.todoItem,
        { backgroundColor },
        isActive && styles.activeItem
      ]}>
      <Text style={styles.title}>{item.title}</Text>
      <View style={styles.details}>
        {item.icon && <Text style={styles.icon}>{item.icon}</Text>}
        {item.category === 'dont_forget' && (
          <Text style={styles.category}>don&apos;t forget</Text>
        )}
        {item.category === 'gifts' && (
          <Text style={styles.category}>Gifts</Text>
        )}
        {item.date && <Text style={styles.date}> • {item.date}</Text>}
      </View>
    </View>
  );
};

export default function PlaygroundExample() {
  const [todos, setTodos] = React.useState<Array<TodoItem>>(initialTodos);
  const [columns, setColumns] = React.useState<number>(1);
  const ref = useAnimatedRef<Animated.FlatList<TodoItem>>();
  const overDrag: OverDrag = columns >= 2 ? 'both' : 'vertical';

  const renderItem: SortableGridRenderItem<TodoItem> = React.useCallback(
    ({ item }) => <TodoItemComponent isActive={false} item={item} />,
    []
  );

  const onOrderChange = () => {
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    RNHapticFeedback.trigger('impactLight');
  };

  const onDragEnd = (params: SortableGridDragEndParams<TodoItem>) => {
    setTodos(params.data);
  };

  const onColumnsChange = (columns: number) => {
    setColumns(columns);
  };

  return (
    <Animated.FlatList
      data={[1]}
      keyboardDismissMode='on-drag'
      ref={ref}
      ListHeaderComponent={() => (
        <View style={styles.header}>
          <Button title='Add column' onPress={() => setColumns(columns + 1)} />
          <Button
            title='Remove column'
            onPress={() => setColumns(columns - 1)}
          />
        </View>
      )}
      renderItem={() => (
        <Sortable.Grid<TodoItem>
          activeItemScale={1.05}
          columns={columns}
          data={todos}
          dragActivationDelay={600}
          inactiveItemOpacity={0.85}
          overDrag={overDrag}
          renderItem={renderItem}
          rows={undefined}
          scrollableRef={ref}
          onDragEnd={onDragEnd}
          onOrderChange={onOrderChange}
        />
      )}
    />
  );
}

const styles = StyleSheet.create({
  activeItem: {
    elevation: 5,
    shadowOpacity: 0.2,
    shadowRadius: 5
  },
  category: {
    color: '#666',
    fontSize: 14
  },
  date: {
    color: '#666',
    fontSize: 14
  },
  details: {
    alignItems: 'center',
    flexDirection: 'row'
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 16
  },
  icon: {
    fontSize: 14,
    marginRight: 4
  },
  title: {
    color: '#1a1a1a',
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4
  },
  todoItem: {
    borderRadius: 12,
    elevation: 3,
    margin: 8,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: {
      height: 2,
      width: 0
    },
    shadowOpacity: 0.1,
    shadowRadius: 3
  }
});

I tried to reproduce the issue on iOS simulator, physical iPhone 15 Pro and Samsung Galaxy S22 Ultra on both the Old and the New Architecture and, unfortunately, everything worked as expected. Can you possibly check if everything works on our end when you use my code example? I tested it on the latest version of the library in my example app.

Can you please tell me which versions of dependencies (react-native-sortables, react-native-reanimated, react-native-gesture-handler, react-native) do you use and if you use the New or the Old Architecture?

Could you also describe more in detail when the issue happens? I know you already wrote that this behavior is not consistent but it is hard to reproduce without knowing when the issue can happen 🙁

[rkstar]

Could you also describe more in detail when the issue happens? I know you already wrote that this behavior is not consistent but it is hard to reproduce without knowing when the issue can happen 🙁

what i've been able to figure out is it seems to be happening intermittently when autoscroll during drag. i am using a paginated list so maybe the problem is happening when autoscrolling causes an update to the underlying data? if i'm actively dragging an item and i add another 25 records to the list, that might be what's causing it to get confused.

I tried to reproduce the issue on iOS simulator, physical iPhone 15 Pro and Samsung Galaxy S22 Ultra on both the Old and the New Architecture and, unfortunately, everything worked as expected. Can you possibly check if everything works on our end when you use my code example? I tested it on the latest version of the library in my example app.

@MatiPl01 thank you for this! i'm going to try your code shortly. i'll see if i can get it to break.

i tried out your code in my app and it works fine still for me. i'm going to deploy a new build with sortables 1.5.2 and see if that fixes it for the affected users. i'll report back later today. thank you for looking at this so quickly. you've done some great work with this package.

Can you please tell me which versions of dependencies (react-native-sortables, react-native-reanimated, react-native-gesture-handler, react-native) do you use and if you use the New or the Old Architecture?

new architecture
expo: 52.0.38
react-native: 0.76.7
react-native-sortables: 1.5.0
react-native-reanimated: 3.17.2
react-native-gesture-handler: 2.24.0

very shortly i'm going to be updating to expo@52.0.42 and react-native@0.77.x

[MatiPl01]

Thanks @rkstar for your response.

if i'm actively dragging an item and i add another 25 records to the list, that might be what's causing it to get confused.

I haven't tested what happens if you add new items during auto scroll so it might be good to test.

I will also test it today or tomorrow on your versions of dependencies to see if I can reproduce the issue. Will let you know if I figure something out.

[rkstar]

@MatiPl01 -- an update! i was able to consistently reproduce this issue. for context, the sortables grid/list is being rendered in a bottom tab navigator.

the dragged item seemed to get stuck on a tab navigator screen when…

1. a user dragged an item
2. left the tab screen w/ the sortable grid
3. came back to the tab screen w/ the sortable grid
4. dragged the same item they dragged previously

i fixed this by adding a key prop on the Sortable.Grid component that updates on every focus to force a re-mount of the grid and in turn, reset whatever values may be stale or incorrect within the grid component itself that could be causing the freezing issue.

[MatiPl01]

Sorry for the late response here and thanks for providing detailed reproduction steps. I was finally able to spend some more time on debugging this strange problem and I found that it happens only on iOS on the New Architecture. This is not something I can fix on my end as the gesture handler is broken.

I opened an issue on the react-native-gesture-handler repo with a simplified reproduction example:
software-mansion/react-native-gesture-handler#3560

It seems that the root of the issue is the react-native-screens library which breaks react-naive-gesture-handler, as well as some react-native-reanimated features when detachInactiveScreens option is set to false.

If someone also encounters this issue, please check if disabling screens via enableScreens(false) call fixes the issue. If yes, this is a react-native-screens issue that I cannot fix. If not, please describe the problem thoroughly and I will investigate it.