'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