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

GitHub – rutvikbhatt9/SwipeableFlatList: This project demonstrates the use of SipeableFlatList component from react-native.

This project demonstrates the use of SipeableFlatList component from react-native. – GitHub – rutvikbhatt9/SwipeableFlatList: This project demonstrates the use of SipeableFlatList component from re…

github.com

If you have any queries regarding the use of SwipeableFlatList, you can contact me on Twitter or comment below.

Please leave this field empty

Don’t miss the latest posts!

Email Address *

We don’t spam! Read our privacy policy for more info.

Thank you for joining newsletter. We promise we never spam and disappoint you!!