Large titles (on iPad) do not work properly with `scrollEnabled:false` on `FlatList`
🐛 Bug Report
Large titles (on iPad) do not work properly with scrollEnabled:false on FlatList (does not matter if you use the FlatList implementation from react-native, react-native-gesture-handler or react-native-draggable-flatlist).
A bit of context ... I reported a bug here, because setting large titles did not properly work with this DraggableFlatlist. Turns out, it does not work nicely with react-native's own FlatList'. Basically, when you set scrollEnabled:false, the title becomes large again. Setting this prop however, is needed with react-native-draggable-flatlist during a drag or else dragging the item up and down scrolls the list instead of moving the item.
To Reproduce
Make a flatlist on a screen that has a large title, for example like this:
topBar: {
largeTitle: {
visible: true,
},
title: {
text: 'Large title example',
},
// Other options ...
},
Set onScrollBeginDrag on FlatList as follows:
<RNFlatList
onScrollBeginDrag={() => {
setTimeout(() => setScrollEnabled(false), 1000);
}}
// ...
/>
Expected behavior
The title does not become large, unless you are finished scrolling and the view is 'not scrolled up'. So in a nutshell: whether or not the title is large should not depend on scrollEnabled.
Actual Behavior
When you start scrolling, the title becomes small but whenever scrollEnabled is set to false, it becomes large again. Setting scrollEnabled to false (during scrolling) is a needed prop for libraries such as react-native-draggable-flatlist and react-native-gesture-handler(I could reproduce this with both).
In the video below I scroll up (so the title becomes small) and I hold the scroll. I have set a timeout so that after 1 second scrollEnabled is set to false, and as you can see the title becomes large again (and is positioned oddly).
https://user-images.githubusercontent.com/7559898/171214047-de648652-5baf-4a2e-a0bc-dfad30bb4e61.mp4
Your Environment
- React Native Navigation version: 7.28.0
- React Native version: 0.68.2
- Platform(s) (iOS, Android, or both?): iOS
- Device info (Simulator/Device? OS version? Debug/Release?): iPad Air, iPadOS 12.4.6.
Reproducible Demo
This mini repo contains a reproducible demo (Snack is not possible): https://github.com/haveneersrobin/draggable-flatlist-example
Are you willing to resolve this issue by submitting a Pull Request?
- ✖️ Yes, I have the time, and I know how to start.
- ✅ Yes, I have the time, but I don't know how to start. I would need guidance.
- ✖️ No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.