react-native-draggable-flatlist icon indicating copy to clipboard operation
react-native-draggable-flatlist copied to clipboard

Doesn't work with KeyboardAvoidingView

Open sgup opened this issue 1 year ago • 1 comments

When you have list components that have input, wrapping the component in KeyboardAvoidingView adds the necessary space to the parent view, but it doesn't auto scroll the flatlist to the correct spot.

To Reproduce

<KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : "height"}
  style={{
    flex: 1,
  }}
>
<DraggableFlatList
  style={{
    height: "100%",
  }}
  data={data}
  keyExtractor={keyExtractor}
  onDragEnd={onReordered}
  renderItem={renderItem}
/>
</KeyboardAvoidingView>

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

  • react-native-draggable-flatlist version: "react-native-draggable-flatlist": "^4.0.1",
  • Platform:
  • React Native or Expo version: "expo": "^52.0.18",
  • Reanimated version: "react-native-reanimated": "~3.16.1",
  • React Native Gesture Handler version: "react-native-gesture-handler": "~2.20.2",

sgup avatar Dec 18 '24 21:12 sgup

you can use the getIndex() from the render item and a ref on the DraggableFlatlist to scroll the current item into view:

listRef.current.scrollToIndex({ index: getIndex() });

Kilian avatar Jan 29 '25 16:01 Kilian