Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 888
poPaTheGuru Avatar asked Oct 17 '25 11:10

poPaTheGuru


1 Answers

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.

like image 121
Joshua Cody Avatar answered Oct 20 '25 00:10

Joshua Cody



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!