What is swipable flat list in react native:

Swiping in flatlist is a important aspect of react native flatlist, so here we are going to discuss the topic “How to implement swipable flat list in react native“, so let’s start the to integrate.

I’m a big fan of React Native, because it is very easy to implement complicated concepts and designs, in below example i am going to explain you in detail how to create a very simple swipeable list.

Output Example –

Swipable flat list integration steps in react native –

We are using npm plugin for implementing swipable flat list.

Step 1:

firstly we need to install this plugin.

npm install –save react-native-swipe-list-view

Step 2:

Now we ready to link this plugin in our project, so let’s link it(if your react native version is less than 0.60).

react-native link react-native-swipe-list-view

Step 3:

Now open that file where you want to implement swap-able flat list, open home.js and paste the below code there.

import { SwipeListView } from 'react-native-swipe-list-view';
 
render() {
return (
<View style={{ flex: 9 }}>
<View style={{ flex: 7 }}>
 
<SwipeListView
useFlatList={true}
data={question_list}
keyExtractor={(item, index) => index}
renderItem={({ item, index }) => (
<View>
<View style={{ height: 60, flexDirection: "row", alignItems: "center", backgroundColor: "#fff" }}>
<Text style={{ marginLeft: 5, fontSize: 14, fontFamily: "AvenirLTStd-Medium" }}>{index + 1}</Text>
<Text style={{ marginLeft: 10, marginRight: 5, fontSize: 14, fontFamily: "AvenirLTStd-Book" }}>{item.quetion}</Text>
</View>
<View
style={{
borderBottomColor: '#37c4be',
borderBottomWidth: 2,
}}
/>
</View>
)}
renderHiddenItem={({ item, index }) => (
<TouchableOpacity onPress={_ => this.deleteQuestion(item.quetionId,index)}>
<View style={{
height: 60, borderBottomColor: '#37c4be',
borderBottomWidth: 2, flexDirection: "row", alignItems: "center", backgroundColor: "red"
}}>
<Text style={{ color: 'white', marginLeft: 280, fontSize: 14,
fontFamily: "AvenirLTStd-Book" }}>Delete</Text>
</View></TouchableOpacity>
)}
leftOpenValue={75}
rightOpenValue={-150}
onRowOpen={(rowKey, rowMap) => {
setTimeout(() => {
// console.log('rowMap[rowKey]')
// rowMap[rowKey].closeRow()
}, 2000)
}}
// previewRowKey={question_list[0].quetionId}
/>
);
}

Note: if we want to activate only one side of swiping then use.

disableRightSwip = {true}
disableLeftSwipe={true}

So we completed the react native swipable functionality in this tutorial which is “How to implement swipable flat list in react native“.

You can find my post on medium as well click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.

Neha Dwivedi

Hi, I am a professional Ionic and React Native Pixel Perfect App Designer and Developer, with expertise in Client Communication, Bug Fixing, Third Party Lib, Version Control Tools, Requirement Understanding, and managing teams, I have 6+ years of experience in the same domain as well as in Codeigniter, JS, IoT, and more than 10 other languages. For the last 6+ years, not a single day went without design/development.

Please follow me on Medium: https://nehadwivedi1004.medium.com/