React Native custom RefreshControl component doesn't work in FlatList on Android

Question

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!

Answer 1

Passing a custom component as a refreshControl is sparsely documented, but if you're supplying your own component, you need to spread additional props into your component and pass them through to RefreshControl. So you'll want your code to look like this:

export const MyRefreshControl = ({
  refreshing,
  onRefresh,
  counter,
  ...props
}) => {
  return (
    <RefreshControl
      onRefresh={onRefresh}
      refreshing={refreshing}
      title={counter > 1 ? 'Refreshing' : 'Loading data'}
      tintColor={Colors.main}
      titleColor={Colors.main}
      {...props}
    />
  )
}

And the callsite will remain the same.