React Native Android focus on TextInput inside Flatlist's sticky ListHeaderComponent makes list scroll position snap to y = 0

userpVch1 0
Viewed 65

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 textinput react-native
1 Answers

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.

Louay Sleman0
Related