I need to stop scroll vertical event in flatlist (In a Modal view).
Please check video - red color is flatlist and full screen is modal in react-navigation. Need to stop vertical touch event in flatlist. (Other part of modal need to enable gesture).
https://drive.google.com/file/d/1hXkbIH4lnjrIRREZ45KRAENEOllOLNjW/view?usp=sharing
When running on Android, after scrolling the Flatlist and getting its content below the fixed ListHeaderComponent, when focusing the TextInput that lives inside the given header, the screen flickers and the list snaps back to scroll position y = 0.
On iOS everything runs as supposed.
Steps to reproduce:
Using the snack below, on Android, scroll the list and focus the input in the header, notice that the list snaps to new scroll position where y = 0.
Snack, code example, screenshot, or link to a repository: snack
FlatList have the same props as ScrollView and on Android when you focus on the input the ScrollView scroll to the input which in your case it's the first element.
You can avoid that in IOS but on Android, unfortunately, there's still no way to archive it, I prefer you move the view of the header out from the FlatList if it's a requirement or you can keep it the way it's.
I wanted to ask how can one swipe a horizontal FlatList nested as a first child of a TouchableOpacity? Every time i try to swipe i just activates the TouchableOpacity's onPress.
Happens in both android and ios.
version 0.61.5 of RN
In regular native behavior, scrolling an unfocused text view does not make it focus. In React Native however, when you have a multiline TextInput, and you try to scroll, it immediately focuses.
Looking at the source code, this seems to be by design, as the text view is wrapped in a TouchableWithoutFeedback that calls focus on press.
Any workarounds short of forking React Native?
How can i can detect onScroll ScrollView event from a user vs an animation
in React Native the "onScroll" event is returned when a user makes a move and also when I move it using code