Menu
I have a View that renders dynamic cards from an API
<View>
<Card>1</Card>
<Card>2</Card>
<Card>3</Card>
</View>
Is there a way to do a pull-to-refresh on this view?
Make a call to the server and refresh this view without a FlatList component?
318
Pull to Refresh functionality is implemented using RefreshControl component in React Native. RefreshControl is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0 , swiping down triggers an onRefresh event.
Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native developer menu. With Fast Refresh enabled, most edits should be visible within a second or two.
Note: refreshing is a controlled prop, this is why it needs to be set to true in the onRefresh function otherwise the refresh indicator will stop immediately.
Pull-to-refresh lets a user pull down on a list of data using touch in order to retrieve more data. Pull-to-refresh is widely used on devices with a touch screen.
React-Native's RefreshControl can only be applied to a ScrollView. (Note that a FlatList is actually a ScrollView).
So wrap your <Card />'s in a <ScrollView> rather than a <View> and you can apply the RefreshControl to it as seen in the docs.
Here is an example Snack for you: https://snack.expo.io/Hk606OYKM
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
