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

Issue

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!

Solution

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.

Answered By - Joshua Cody
Answer Checked By - Mildred Charles (JavaFixing Admin)