[RN][iOS] - Scroll behaving weirdly when dragging to edge
See original GitHub issueIssue Description
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
Issue Analytics
- State:
- Created 3 years ago
- Comments:8
Top Results From Across the Web
How do I turn off scroll bounce on Edge browser?
In Edge, navigate to edge://flags, search the word "scroll", and disable one flag at a time until you find the scroll feature you...
Read more >Weird UIPageViewController + drag bug - Apple Developer
When a drag hovers over a UIPageViewController set up to scroll horizontally, it'll randomly scroll a full page's worth leftwards, into blank space....
Read more >Node view doesn't auto scroll when you drag near the edge
PROBLEM I have a very large shader node graph I must drag from one node ... something is being dragged for smooth scrolling...
Read more >41708 - Should be able to scroll in the viewport while dragging
When dragging links on a page, you should be able to scroll the page up by dragging up and scroll it down by...
Read more >Does anyone here use drag scroll rather than edge scroll?
21 votes, 44 comments. If so, what do you bind it to? I noticed Serral does it often so I'm trying it out...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@nelsonprsousa @computerjazz I just ran into the same problem on iOS only and it is definitely fixed for me after updating possibly involved libraries:
Works fine now, tested in normal DND Flatlists and DND Flatlists inside a Keyboard-Aware-Scroll-View (APSL).
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 👍