[RN][iOS] - Scroll behaving weirdly when dragging to edge

[osamaaamer95]

Describe the bug Scroll on iOS is behaving weird, I have to gently prod the top and bottom edges of the container to make it work. Android is A-Okay. Here is a gif comparison:

Code setup in my screen is pretty simple

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "center" }}>
        <Text text={"Title:"} style={{ color: color.black, marginRight: spacing[1] }} />
        {categoryArray
          .slice(0, ITEMS_ALLOWED)
          .map(
            (item, i) =>
              item.isSelected && (
                <Text
                  text={`${item.label}${i + 1 < ITEMS_ALLOWED ? "," : ""}`}
                  style={{ color: color.palette.lightGrey, marginRight: spacing[1] }}
                />
              ),
          )}
      </View>
      <View style={{ flex: 1 }}>
        <DraggableFlatList
          data={categoryArray}
          renderItem={renderItem}
          keyExtractor={(item, index) => `draggable-item-${index}`}
          onDragEnd={({ data }) => setArray(data)}
        />
      </View>
    </View>
  )

To Reproduce I have not tested this on a barebones app, but there is nothing extraordinary in my setup.

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

• Platform: RN iOS
• React Native or Expo version: 0.62
• Reanimated version: 1.7.0
• React Native Gesture Handler version: 1.5.0

[dperrera]

I'm experiencing the same issue with Expo SDK 37.

[emroot]

Same issue here. That happens to me when scrollTop is equal to one of the edges (start of list: scrollTop=0 or end of list: scrollTop=listHeight-containerHeight). if I scroll a little bit (eq. scrollTop=100), I can scroll to the edges and it works :/

@computerjazz does this ring a bell?

[nelsonprsousa]

I am with the same problem. Just on iOS. Android works fine.

"react-native": "0.62.2",
"react-native-draggable-flatlist": "^2.3.3",

@computerjazz Is there something we can do about this?

[dperrera]

I just updated my app to Expo 38 and that seemed to fix the problem. I'm guessing it was a fix in a downstream dependency.

[nelsonprsousa]

We're using React Native CLI (0.62.2, last version), not using Expo, and we still got this problem. Without a solution for now 😞

[dperrera]

@nelsonprsousa Have you upgraded reanimated to the latest version? That might be worth a shot.

[nelsonprsousa]

@nelsonprsousa Have you upgraded reanimated to the latest version? That might be worth a shot.

I am using react-native-reanimated@^1.9.0. I am assuming I shouldn't use version 2 (still on alpha with breaking changes).

Tomorrow I'll push a repository to reproduce the problem 👍

[creambyemute]

@nelsonprsousa @computerjazz I just ran into the same problem on iOS only and it is definitely fixed for me after updating possibly involved libraries:

• RN-Draggable-Flatlist 2.3.3 --> 2.4.0
• RN-Gesture-Handler to 1.6.1 --> 1.8.0
• RN-Reanimated to 1.9 --> 1.13.1
• RN-Screens to 2.8 --> 2.11.0 (not sure if related)
• RN-Safe-Area-Context to 3.0.8 --> 3.1.8 (not sure if related)

Works fine now, tested in normal DND Flatlists and DND Flatlists inside a Keyboard-Aware-Scroll-View (APSL).