Unable to drag drop inside FlatList's ListHeaderComponent on Android

[safa-kajabi]

Describe the bug
A clear and concise description of what the bug is.

I have an app. Inside the app, I am using FlatList to render items. I want to use react-native-draggable in the ListHeaderComponent of the FlatList. It works on iOS, but dragging is not working on Android.

To Reproduce

   <FlatList
        ref={flatListRef}
        keyExtractor={keyExtractor}
        style={flatListStyles.style}
        contentContainerStyle={flatListStyles.contentContainerStyle}
        data={posts}
        renderItem={renderItem}
        refreshing={networkStatus === NetworkStatus.refetch}
        onRefresh={onRefetch}
        ListHeaderComponentStyle={flatListStyles.listHeaderComponentStyle}
        ListHeaderComponent={headerComponent} // Draggable FlatList rendered inside a container with and input component (Find the code below)
        ListFooterComponent={footerComponent}
        ListFooterComponentStyle={flatListStyles.listFooterComponentStyle}
        ListEmptyComponent={emptyComponent}
        onEndReachedThreshold={0.7}
        removeClippedSubviews={!isAndroid}
        onEndReached={fetchMorePosts}
        onScroll={onScroll}
        onScrollToIndexFailed={onScrollToIndexFailed}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
        scrollEnabled={!isReactionPickerVisible}
      />


<----- Header Component --->
.....
  const renderPollOptions = () => {
    return (
      <GestureHandlerRootView style={{ flex: 1 }}>
        <NestableDraggableFlatList
          data={pollOptions}
          style={[{ padding: 24, paddingTop: 0, paddingBottom: 0 }, customStyles?.pollOptionFlatList]}
          renderItem={({ item, index = 0, drag, isActive }) => (
            <PollOption
              control={control}
              disabled={isActive}
              emojiFormName={`pollOptions.${index}.option.emoji`}
              isTrashIconVisible={pollOptions.length > 2}
              key={item.option.id}
              name={`pollOptions.${index}.option.text`}
              onDrag={() => {
                setIsDragActive(true);
                drag();
              }}
              onFocus={onCloseEmojiKeyboard}
              onEmojiClicked={() => onShowEmojiKeyboard(index)}
              onOptionRemove={() => handleRemoveOption(index)}
              option={item.option}
            />
          )}
          keyExtractor={(item) => item.option.id}
          onDragBegin={() => {
            console.log('ondragbegin');
          }}
          onDragEnd={({ from, to }) => {
            console.log('ondragend');
            move(from, to);
            setIsDragActive(false);
          }}
        />
      </GestureHandlerRootView>
    );
  };

  return (
    <>
      <KeyboardAwareScrollView extraScrollHeight={120} scrollEnabled={!isDragActive}>
        {customInput || <RHInput name={'question'} control={control} rules={validations.question} />}
        <NestableScrollContainer style={[nestableScrollContainerStyle, customStyles?.scrollContainer]}>
          {renderPollOptions()}
          {listFooterComponent()}
        </NestableScrollContainer>
      </KeyboardAwareScrollView>
    </>
  );
};

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

• react-native-draggable-flatlist version: 3.1.2
• Platform: Android
• React Native: 0.67.5
• Reanimated version: 2.14.0
• React Native Gesture Handler version: 1.9.0

Additional context
Add any other context about the problem here.

Screen.Recording.2024-05-28.at.16.32.33.mov

[farazahmed12]

same issue here, It works fine on android, but not on iOS.