Items not dragable android expo

[shop-fluencer]

I cant drag and drop my items. If I longpress nothing happens

import React, { useCallback, useState } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DraggableFlatList, {
  ScaleDecorator,
  ShadowDecorator,
  OpacityDecorator,
  RenderItemParams,
} from "react-native-draggable-flatlist";
import { GestureHandlerRootView, gestureHandlerRootHOC } from "react-native-gesture-handler";

const NUM_ITEMS = 100;

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

export const mapIndexToData = (_d: any, index: number, arr: any[]) => {
  const backgroundColor = getColor(index, arr.length);
  return {
    text: `${index}`,
    key: `key-${index}`,
    backgroundColor,
    height: 75,
  };
};

export type Item = ReturnType<typeof mapIndexToData>;

const initialData: Item[] = [...Array(NUM_ITEMS)].map(mapIndexToData);

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

  const renderItem = useCallback(
    ({ item, drag, isActive }: RenderItemParams<Item>) => {
      return (
        <ShadowDecorator>
          <ScaleDecorator>
            <OpacityDecorator>
              <TouchableOpacity
                activeOpacity={1}
                onLongPress={drag}
                disabled={isActive}
                style={[
                  styles.rowItem,
                  { backgroundColor: isActive ? "blue" : item.backgroundColor },
                ]}
              >
                <Text style={styles.text}>{item.text}</Text>
              </TouchableOpacity>
            </OpacityDecorator>
          </ScaleDecorator>
        </ShadowDecorator>
      );
    },
    []
  );

  return (
    <GestureHandlerRootView>
      <DraggableFlatList
        data={data}
        onDragEnd={({ data }) => setData(data)}
        keyExtractor={(item) => item.key}
        renderItem={renderItem}
        renderPlaceholder={() => (
          <View style={{ flex: 1, backgroundColor: "tomato" }} />
        )}
      />
    </GestureHandlerRootView>
  );
}

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

export default gestureHandlerRootHOC(ChoosenImages);

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

• react-native-draggable-flatlist version: 3.1.2
• Platform:
• React Native or Expo version: expo (46)
• Reanimated version: 2.9.1
• React Native Gesture Handler version: 2.5.0

[idoodler]

We are facing the same issue, did you find any workaround?

[KiwiKilian]

We were experiencing the same problem with version 3.1.2 and Expo SDK 47. We were missing the GestureHandlerRootView Component. Maybe try wrapping your roote component (App.(jsx,tsx) with <GestureHandlerRootView style={{ flex: 1 }}>.

Also see https://github.com/computerjazz/react-native-draggable-flatlist/issues/377#issuecomment-1106080209.

[shop-fluencer]

We were experiencing the same problem with version 3.1.2 and Expo SDK 47. We were missing the GestureHandlerRootView Component. Maybe try wrapping your roote component (App.(jsx,tsx) with <GestureHandlerRootView style={{ flex: 1 }}>.

Also see #377 (comment).

I wrapped gestureHandlerRootView on App but not working.

    <Provider store={store}>
     <SafeAreaProvider>
      <SafeAreaView style={s.rootView}>
        <NavigationContainer>
          <GestureHandlerRootView style={s.rootView}>
            <Host>
              <NativeStackWrapper />
            </Host>
            <Toast position='bottom' config={ToastConfig} />
          </GestureHandlerRootView>
        </NavigationContainer>
        </SafeAreaView>
      </SafeAreaProvider>
    </Provider>

[Haseebshah936]

@shop-fluencer did you found any work around of this issue?

[DLawla]

@shop-fluencer, @idoodler any luck finding a solution here? Still seeing the issue in the lastest Expo: "expo": "^48.0.0", "react-native-draggable-flatlist": "^3.1.2", "react-native-gesture-handler": "~2.9.0", "react-native-reanimated": "~2.14.4",

Wrapping the App in a GestureHandlerRootView is still not working.

[DLawla]

To follow-up on my previous comment -- after upgrading this library to 4.0.1 (w/ expo SDK to 48), re-ordering on Android works again as expected!

[LinFeiLong]

We were experiencing the same problem with version 3.1.2 and Expo SDK 47. We were missing the GestureHandlerRootView Component. Maybe try wrapping your roote component (App.(jsx,tsx) with <GestureHandlerRootView style={{ flex: 1 }}>.

Also see #377 (comment).

Thanks, it resolved my issue on Android.

[schowdhuri]

For me, adding GestureHandlerRootView solved it on Android. Odd that it works on iOS without GestureHandlerRootView