It is ineffective when used with react-native-draggable-flatlist.

[arafat813]

Describe the bug Based on the documentation, the implementation was attempted but not successful.

Code snippet <DraggableFlatList onDragBegin={onDragBegin} ListFooterComponent={() => ( <Footer footerBorderWidth={footerBorderWidth} flatListHeight={flatListHeight} /> )} ListFooterComponentStyle={styles.Footer} activationDistance={10} renderScrollComponent={props => ( <KeyboardAwareScrollView enabled={true} bottomOffset={10} {...props} /> )} contentContainerStyle={{ paddingTop: 10, paddingBottom: insets.bottom, }} data={ToolStore.userTool} onDragEnd={onDragEnd} keyExtractor={item => item.key} renderItem={renderItem} onContentSizeChange={(w, h) => { setFlatListHeight(h); }} />

To Reproduce

https://github.com/user-attachments/assets/d5d20c81-4bb1-4438-a251-58da9a03c083

Expected behavior I hope it runs as expected.

Smartphone (please complete the following information):

• RN version: [e.g. 0.75.3]

[kirillzyusko]

I think it happens because of the fact, that implementation of react-native-draggable-flatlist uses FlatList from react-native-gesture-handler. And RNGH implementation substitutes renderScrollComponent with its own implementation: https://github.com/software-mansion/react-native-gesture-handler/blob/af9b77c41f25ab4aa359e5cdb0a295721232c5ae/src/components/GestureComponents.tsx#L119-L126

So renderScrollComponent that you are passing to react-native-draggable-flatlist will be simply ignored 🤔

You can see a similar issue https://github.com/kirillzyusko/react-native-keyboard-controller/issues/505 https://github.com/kirillzyusko/react-native-keyboard-controller/issues/593 for more context

[arafat813]

took a look and made modifications based on the content, but it still didn't work. I tried using KeyboardAvoidingView on the outermost layer, but I found that keyboardVerticalOffset must be set, and there is a delay. Does this method solve the issue?

<KeyboardAvoidingView behavior={'padding'} keyboardVerticalOffset={150} contentContainerStyle={styles.container} style={styles.content}> <DraggableFlatList onDragBegin={onDragBegin} ListFooterComponent={() => ( <Footer footerBorderWidth={footerBorderWidth} flatListHeight={flatListHeight} /> )} ListFooterComponentStyle={styles.Footer} activationDistance={10} contentContainerStyle={{ paddingTop: 10, paddingBottom: insets.bottom, }} data={ToolStore.userTool} onDragEnd={onDragEnd} keyExtractor={item => item.key} renderItem={renderItem} onContentSizeChange={(w, h) => { setFlatListHeight(h); }} /> </KeyboardAvoidingView>

https://github.com/user-attachments/assets/ce5be576-c07a-4a36-9846-5b51e0c1283c

[kirillzyusko]

@arafat813 The KeyboardAvoidingView is not working in this case. According to your video it looks like the iOS itself does this additional scrolling 🤷‍♂️

The key thing here is that react-native-draggable-flatlist uses ScrollView from react-native-gesture-handler. That ScrollView doesn't allow you to pass a custom scroll component. That's why it doesn't work.

If I were you I would patch react-native-draggable-flatlist that would pass KeyboardAwareScrollView as a scroll component and for KeyboardAwareScrollView I would pass a custom scroll component (ScrollView from react-native-gesture-handler). I think such chain makes more sense than an existing one and should solve all the issues with integration that you have at the moment.