react-native-keyboard-controller icon indicating copy to clipboard operation
react-native-keyboard-controller copied to clipboard

IOS : When using `removeClippedSubviews` in FlatList with `KeyboardAvoidingView`, Pressable buttons from `react-native-gesture-handler` are not pressable after scrolling

Open yonitou opened this issue 3 months ago • 2 comments

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

yonitou avatar Sep 11 '25 09:09 yonitou