IOS : When using `removeClippedSubviews` in FlatList with `KeyboardAvoidingView`, Pressable buttons from `react-native-gesture-handler` are not pressable after scrolling
Describe the bug
When we have a KeyboardAvoidingView wrapping a FlatList using removeClippedSubview prop whereeach item is aPressablebutton fromreact-native-gesture-handler`, after scrolling a bit, the buttons are not working (are not pressable)
Code snippet
import { KeyboardAvoidingView } from "react-native-keyboard-controller";
import {
View,
Text,
TextInput,
StyleSheet,
} from "react-native";
import { Pressable, FlatList } from "react-native-gesture-handler";
const searchedUsers = Array.from({ length: 50 }, (_, i) => ({
id: i + 1,
firstName: `FirstName${i + 1}`,
lastName: `LastName${i + 1}`,
}));
export default function App() {
return (
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<TextInput
autoCapitalize="words"
placeholder="User finder input placeholder"
/>
<FlatList
data={searchedUsers}
ItemSeparatorComponent={() => (
<View style={{ height: 1, backgroundColor: "red" }} />
)}
keyExtractor={(item) => item.id.toString()}
removeClippedSubviews // <----- The issue is here
renderItem={({ item }) => (
<Pressable onPress={() => console.log("clicked")}>
<Text>{`${item.firstName} ${item.lastName}`}</Text>
</Pressable>
)}
showsVerticalScrollIndicator={false}
/>
</KeyboardAvoidingView>
);
}
To Reproduce After copy pasting the snippet above, launch an iOS simulator and scroll a bit in the screen, you will notice buttons won't be perusable after a while.
Expected behavior Buttons should be pressable no matter what
Screenshots
With removeClippedSubviews :
https://github.com/user-attachments/assets/6aec83e3-beb2-4617-b352-4f6576e87b96
Without removeClippedSubviews :
https://github.com/user-attachments/assets/076925df-015e-44fb-98ea-a5dfbdc94221
Smartphone (please complete the following information):
- OS: iOS
- RN version: 0.79.6
- RN architecture: New
- JS engine: Hermes
- Library version: 1.18.6