'React Native custom RefreshControl component doesn't work in FlatList on Android
I have a custom component for RefreshControl made so I can change the title property that the RefreshControl offers.
In the end this is the return of my custom RefreshControl component:
const [counter, setCounter] = useState(0)
useEffect(() => {
if (!refreshing && counter > 0) {
setTimeout(() => {
setCounter(previousValue => previousValue + 1)
}, 500)
}
!refreshing && counter === 0 && setCounter(previousValue => previousValue + 1)
}, [refreshing])
return (
<RefreshControl
onRefresh={onRefresh}
refreshing={refreshing}
title={counter > 1 ? 'Refreshing': 'Loading data'}
tintColor={Colors.main}
titleColor={Colors.main}
/>
)
This component of mine is used as follow in FlatList:
<FlatList
ref={flatListRef}
style={styles.flatList}
contentContainerStyle={styles.contentContainer}
showsVerticalScrollIndicator={false}
data={data}
renderItem={renderItem}
keyExtractor={item => item.number.toString()}
refreshControl={
<MyRefreshControl
onRefresh={makeRequest}
refreshing={isRefreshing}
/>
}
/>
This implementation works great on iOS but on Android the FlatList simply disappear, won't even show on the screen, but if I add directly the RefreshControl from the react-native will work.
How can I resolve this?
Thank you for your time!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
