sdcxtech / react-native-troika

Native UI Component for React Native, including nested-scroll, pull-to-refresh, bottom-sheet, etc.
https://todoit.tech
173 stars 23 forks source link

onEndReached function is not executed on reaching end of Flatlist #34

Open klmadnan opened 5 months ago

klmadnan commented 5 months ago

I am using latest version of react-native ("0.73.5"). I wrap PullToRefresh component to my Flatlist to achieve custom view for refresh control.

Implementation:

<PullToRefresh
            header={<CustomPullToRefreshHeader refreshing={isRefreshing} onRefresh={onRefresh} />}
        >
            <FlatList
                data={modifiedData}
                showsVerticalScrollIndicator={false}
                style={[styles.flatList, style]}
                contentContainerStyle={[
                    {
                        rowGap: Metrics.scale(gapY || 0),
                        columnGap: Metrics.scale(gapX || 0),
                    },
                    props.horizontal && styles.contentContainerHorizontal,
                    !props.horizontal && styles.contentContainerVertical,
                ]}
                scrollEventThrottle={16}
                {...rest}
                {...(listEmptyText && {
                    ListEmptyComponent: () => (
                        <ListEmptyComponent
                            listEmptyText={listEmptyText}
                            isLoading={isLoading}
                            LoaderComponent={LoaderComponent}
                            waitingForSearch={searchingListOnly && storeIsEmpty}
                            listEmptySubText={listEmptySubText}
                            EmptyComponent={EmptyComponent}
                        />
                    ),
                })}
                ListHeaderComponent={ListHeaderComponent}
                ListFooterComponent={() =>
                    footerLoadingCondition || meta.isFetchingNextPage ? (
                        <LoaderComponent size="small" count={2} />
                    ) : null
                }
                onEndReached={fetchMore}
                onEndReachedThreshold={0.4}
            />
        </PullToRefresh>

now the issue is by wrapping PullToRefresh onEndReached listener stop working. If i remove PullToRefresh Wrapper then onEndReach function working perfectly.