Horizontal scrolling does not work when using ScrollView with ReorderableList

[VitalyMih]

Description

Hello!
First of all, thanks for this library!

I have this issue:

When you wrap the ReorderableList in a ScrollView from react-native or react-native-gesture-handler with the horizontal prop to implement horizontal scrolling of the list, horizontal scrolling simply does not work (the list does not move horizontally) on both iOS and Android.

https://github.com/user-attachments/assets/267ddd0f-9eca-46f0-8d90-96b2a28f3e13
https://github.com/user-attachments/assets/0a69732c-02ee-4306-a797-4ca75358ec8d

Steps to reproduce

1. Wrap ReorderableList with ScrollView from react-native or react-native-gesture-handler with the horizontal prop;
2. Try to scroll the list horizontally;

Minimal reproducible example

import React, { memo, useState } from "react";
import {
  ListRenderItemInfo,
  Pressable,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { ScrollView } from "react-native-gesture-handler";

import ReorderableList, {
  ReorderableListReorderEvent,
  reorderItems,
  useReorderableDrag,
} from "react-native-reorderable-list";

interface CardProps {
  id: string;
  color: string;
  height: number;
}

const rand = () => Math.floor(Math.random() * 256);

const seedData: CardProps[] = Array(20)
  .fill(null)
  .map((_, i) => ({
    id: i.toString(),
    color: `rgb(${rand()}, ${rand()}, ${rand()})`,
    height: Math.max(60, Math.floor(Math.random() * 100)),
  }));

const Card: React.FC<CardProps> = memo(({ id, color, height }) => {
  const drag = useReorderableDrag();

  return (
    <View style={[styles.card, { height }]}>
      <Pressable style={styles.pressablePart} onPressIn={drag}>
        <Text style={styles.text}>:</Text>
      </Pressable>
      <View>
        <Text style={[styles.text, { color }]} numberOfLines={1}>
          Card {id}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Sed sed molestie augue. Nunc ac lectus fringilla, molestie nulla
          auctor, porttitor est. Donec ultricies at felis ac sollicitudin.
          Maecenas pellentesque mollis purus quis posuere. Integer sagittis
          neque nulla, ac tristique orci tincidunt pulvinar.
        </Text>
      </View>
    </View>
  );
});

const Example = () => {
  const [data, setData] = useState(seedData);

  const handleReorder = ({ from, to }: ReorderableListReorderEvent) => {
    setData((value) => reorderItems(value, from, to));
  };

  const renderItem = ({ item }: ListRenderItemInfo<CardProps>) => (
    <Card {...item} />
  );

  return (
    <ScrollView horizontal>
      <ReorderableList
        data={data}
        onReorder={handleReorder}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  card: {
    width: "200%",
    paddingHorizontal: 20,
    gap: 20,
    alignItems: "center",
    flexDirection: "row",
    backgroundColor: "white",
    borderBottomWidth: 1,
    borderBottomColor: "#ddd",
  },
  pressablePart: {
    backgroundColor: "pink",
    justifyContent: "center",
    alignItems: "center",
    width: 20,
  },
  text: {
    fontSize: 20,
  },
});

export default Example;

Relevant logs

No response

Reorderable List version

0.11.0

React Native version

0.76.7

Project type

Expo

Architecture

Fabric (New Architecture)

Reanimated version

3.16.1

Gesture Handler version

2.20.2

Affected platforms

iOS, Android

[omahili]

Hi @VitalyMih, have you tried with ScrollViewContainer and NestedReorderableList?

[VitalyMih]

@omahili thanks for the tip! Yes, I tried it, and the horizontal scroll now really works, but autoscroll stopped working:

Screen.Recording.2025-02-26.at.09.16.28.mp4

[omahili]

Weird, have you tried playing with autoscrollThresholdOffset? It should push the autoscroll area inwards.

[VitalyMih]

@omahili I tried it, but it had no effect

[omahili]

I was able to reproduce the bug, for now to overcome this you can use onLongPress={drag} in the item and set panActivateAfterLongPress={500} on the reorderable list. I'll give a look into why this happens.

[VitalyMih]

@omahili ok! Thank you!