Elements moving unexpectedly after an initial scroll in the main snack

[lParraBraze]

Describe the bug When using the main snack example with small adjustments I see an element moving down and then stopping.

I think it would be expected that the element does not move if the conditions to active the scroll are not matched.

To Reproduce Going to write the code here because is very similar to the main snack:

import React, {useState} from 'react';
import {Text, StyleSheet, TouchableOpacity} from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist';

const NUM_ITEMS = 30;
function getColor(i: number) {
  const multiplier = 255 / (NUM_ITEMS - 1);
  const colorVal = i * multiplier;
  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
}

type Item = {
  key: string;
  label: string;
  height: number;
  width: number;
  backgroundColor: string;
};

const initialData: Item[] = [...Array(NUM_ITEMS)].map((d, index) => {
  const backgroundColor = getColor(index);
  return {
    key: `item-${index}`,
    label: String(index) + '',
    height: 100,
    width: 60 + Math.random() * 40,
    backgroundColor,
  };
});

export const MyRankings = () => {
  const [data, setData] = useState(initialData);

  const renderItem = ({item, drag, isActive}: RenderItemParams<Item>) => {
    return (
      <TouchableOpacity
        onLongPress={drag}
        disabled={isActive}
        style={[
          styles.rowItem,
          {backgroundColor: isActive ? 'red' : item.backgroundColor},
        ]}>
        <Text style={styles.text}>{item.label}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <DraggableFlatList
      data={data}
      onDragEnd={({data}) => setData(data)}
      keyExtractor={item => item.key}
      renderItem={renderItem}
    />
  );
};

const styles = StyleSheet.create({
  rowItem: {
    height: 50,
    width: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

https://github.com/computerjazz/react-native-draggable-flatlist/assets/94072077/d330d109-92cd-4182-921c-efac5a6de06a

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

• react-native-draggable-flatlist version: "^4.0.1"
• Platform:iOS
• React Native or Expo version: "0.72.2"
• Reanimated version: "^3.3.0"
• React Native Gesture Handler version: "^2.8.0"

Additional context My app looks like this:

const App = () => {
  return (
    <React.StrictMode>
      <GestureHandlerRootView style={{flex: 1}}>
        <MyRankings />
      </GestureHandlerRootView>
    </React.StrictMode>
  );
};

I think this could be related to https://github.com/computerjazz/react-native-draggable-flatlist/issues/509

[lParraBraze]

Quick update here, if you create 200 instead of 30 you can get this behavior, which is another bug where the dragged row doesn't show the content:

https://github.com/computerjazz/react-native-draggable-flatlist/assets/94072077/deb71647-f4c2-42e1-90f4-c7fe6d0e97f1

[tomas1808]

Same problem. Did you manage to fix this?

Is there a better drag and drop list for React Native? I wanted to like this one but seems to be unstable and semi-abandoned. Not production ready.