React Native Swipe Delete Example

React Native



React Native Swipe Delete Example

Hi Guys,

In this blog, I will explain you how to use swipe delete in react native. You can easily use swipe delete in react native. First i will create import namespace SocialIcon from save react-native-swipe-list-view, after I will using swipe delete using for swipe delete tagadd in react native example.

Here, I will give you full example for simply display swipe delete using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init SwipeDelete

Step 2 - Installation of Dependency

In the step, Run the following command for installation of dependency.

To use swipe delete you need to npm install save react-native-swipe-list-view --save.

To install this open the terminal and jump into your project

cd SwipeDelete

Run the following command

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

Step 3 - App.js

In this step, You will open App.js file and put the code.

import React, { useState } from 'react';

import { StyleSheet, Text, TouchableOpacity, TouchableHighlight, View } from 'react-native';

import { SwipeListView } from 'react-native-swipe-list-view';

export default function Basic() {

const [listData, setListData] = useState(

Array(25).fill('').map((_, i) => ({ key: `${i}`, text: `Item ${++i}` }))


const closeItem = (rowMap, rowKey) => {

if (rowMap[rowKey]) {




const deleteItem = (rowMap, rowKey) => {

closeItem(rowMap, rowKey);

const newData = [...listData];

const prevIndex = listData.findIndex(item => item.key === rowKey);

newData.splice(prevIndex, 1);



const onItemOpen = rowKey => {

console.log('This row opened', rowKey);


const renderItem = data => (


onPress={() => console.log('You touched me')}





<Text style={styles.list}>This Is {data.item.text} Of Swipe List View</Text>




const renderHiddenItem = (data, rowMap) => (

<View style={styles.rowBack}>


style={[styles.actionButton, styles.closeBtn]}

onPress={() => closeItem(rowMap, data.item.key)}


<Text style={styles.btnText}>Close</Text>



style={[styles.actionButton, styles.deleteBtn]}

onPress={() => deleteItem(rowMap, data.item.key)}


<Text style={styles.btnText}>Delete</Text>




return (

<View style={styles.container}>















const styles = StyleSheet.create({

container: {

backgroundColor: 'white',

flex: 1,


list: {

color: '#FFF',


btnText: {

color: '#FFF',


rowFront: {

alignItems: 'center',

backgroundColor: 'lightcoral',

borderBottomColor: 'black',

borderBottomWidth: 0.5,

justifyContent: 'center',

height: 50,


rowBack: {

alignItems: 'center',

backgroundColor: '#fff',

flex: 1,

flexDirection: 'row',

justifyContent: 'space-between',

paddingLeft: 5,


actionButton: {

alignItems: 'center',

bottom: 0,

justifyContent: 'center',

position: 'absolute',

top: 0,

width: 75,


closeBtn: {

backgroundColor: 'blue',

right: 75,


deleteBtn: {

backgroundColor: 'red',

right: 0,



Step 4 - Run project

In the last step run your project using bellow command.

npm start


It will help you...