StickyHeaderFlatList Not Show Fully Refresh Control When Has Header

[blackknight101]

Environment

Library version: 1.1.1 OS version: iPhone 11, iOS 16.6

Affected platforms

• [X] Android
• [X] iOS

Current behavior

When I pull down to make pull refresh visible, then I release the touch. The animation of the pull to refresh control behind the Header.

Expected behavior

The pull to refresh control should be visible and bottom of the header

Reproduction

const [isRefresh, setRefresh] = useState(false);

const handleRefresh = useCallback(async () => { setRefresh(true); }, []);

<StickyHeaderFlatList numColumns={3} ref={flatListRef} data={data} renderHeader={() => <Header onSearch={onSearch} />} refreshing={isRefresh} onRefresh={handleRefresh} renderTabs={() => ( <SegmentType segmentType={segmentType} onSegmentPress={onSegmentPress} /> )} renderItem={({ item }) => ( <Card item={item} handleCardPressed={handleCardPressed} /> )} keyExtractor={(item: { name: string }) => item.name} onEndReached={loadMoreData} scrollEventThrottle={16} />

[blackknight101]

Hi, any update on this issue? Thanks,

[Paul12pp]

x2 Hi, any update on this issue? Thanks,

[maximesenger]

Same issue here. It is because the refresh indicator is under the renderTabs. The way is fixed it is by doing this :

<RefreshControl
            style={{ zIndex: 1 }}
            title="Refreshing..."
            colors={[color.brandPrimary]}
            progressViewOffset={175}
            refreshing={isLoading}
            onRefresh={refreshPublicStores}
/>

Set your progressViewOffset depending on the height of your tabs