Update (20th May 2019) : SwipeableFlatList is only available till react-native version v0.59.8
As a React-Native developer, I always explore new components and libraries. Recently I found the experimental directory in the official react-native repository here which is available for use but, not officially. In the experimental directory, I found the SwipeableFlatList
component. There is no official doc available for SwipeableFlatList
in the React-Native component doc.
In this article, I will show you how to use SwipeableFlatList. After this article we will get the output like below:
Getting started
First let's understand the props for SwipeableFlatList
- …FlatList props – You can use all props of FlatList like data, keyExtractor, renderItem, etc.
- bounceFirstRowOnMount – (Boolean) — To alert the user that swiping is possible, the first row can bounce on the component mount.
- maxSwipeDistance – (number) – Maximum distance to open QuickActionMenu after a swipe.
- renderQuickActions – (Function) – Callback method to render the view that will be unveiled on swipe.it provides additional metadata like index and item like renderQuickActions={({index, item}) => //return (QuickAction component from here)}.
- _onClose() – (Function) – Reference method that close QuickActions if any.
Let’s Code Now
I am skipping the other part of the code and focusing on the main component.
import {SwipeableFlatList} from 'react-native'
<SwipeableFlatList
ref={(ref) => {
this.swipeableList = ref
}}
data={this.state.userData}
keyExtractor={(item, index) => index.toString()}
maxSwipeDistance={relativeWidth(25)}
bounceFirstRowOnMount={true}
renderQuickActions={({index, item}) =>
this.renderQuickActionButton(index, item)
}
renderItem={({index, item}) =>
this.renderListItem(index,item)
}/>
As I mentioned earlier SwipeableFlatList
accepts all the props of the FlatList
component, Let’s understand each props we gave to the component.
- ref : from ref, we can use methods of SwipeableFlatList directly
- data : data which is an array you can find Here.
- keyExtractor : Used to extract a unique key for a given item at the specified index
- maxSwipeDistance : We gave relativeWidth(25) which means 25% of width as per device width. You can find this function here
- bounceFirstRowOnMount : set true if you want the user to preview the bounce effect on the first row to indicate that the row can be swiped and set false otherwise. the default value of this props is false.
- renderQuickActions : function which give metadata ({index,item}) same as renderItem prop of FlatList. We just return the QuickAction view from that method.
renderQuickActionButton = (index, item) => {
return (
<View style={styles.quickActionContainer}>
<Ripple
onPress={() => {
this.showAlert(index, item);
}} style={styles.quickActionButtonStyle}>
<Icon
name={'delete'}
color={'white'}
size={25}/>
<Text
style={styles.quickActionButtonTextStyle}>
Delete
</Text>
</Ripple>
</View>
)
};
This is how we render the QuickAction
which will visible when the user swipes the ListItem
by 25% of the device width as we define maxSwipeDistance in the component.
You can find the styles used in the snippet here
- _close() : method that we can call when we grammatically close the QuickAction by using the ref of the component like below:
this.swipeableList._onClose();
and now the last but not the least prop renderItem
prop which I don’t think I need to describe. still, you can find the this.renderListItem(index, item)
method here.
I hope you’ve enjoyed reading.
You can find the whole source code from my GitHub repository below
If you have any queries regarding the use of SwipeableFlatList
, you can contact me on Twitter or comment below.
Hello There. I found your blog using msn. This is a really well written article.
I’ll make sure to bookmark it and come back to read more of your useful information. Thanks for the
post. I will definitely return.
At this time it seems like Drupal is the top blogging platform out there right now.
(from what I’ve read) Is that what you’re using on your blog?
Hi, always i used to check webpage posts here early in the dawn, for the reason that i love to find out more and more.
Hello everyone, it’s my first visit at this site, and paragraph is really fruitful designed for me, keep
up posting these types of articles.
Hi there it’s me, I am also visiting this web site on a regular basis, this site is in fact pleasant and the visitors are in fact sharing nice thoughts.
Keep on working, great job!
Heya! I understand this is sort of off-topic however I needed to ask.
Does running a well-established website like yours require a large amount of work?
I’m completely new to blogging however I do write in my diary daily.
I’d like to start a blog so I can share my experience and feelings online.
Please let me know if you have any kind of recommendations or tips for
brand new aspiring bloggers. Thankyou!