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]) {
      rowMap[rowKey].closeRow();
    }
  };

  const deleteItem = (rowMap, rowKey) => {
    closeItem(rowMap, rowKey);
    const newData = [...listData];
    const prevIndex = listData.findIndex(item => item.key === rowKey);
    newData.splice(prevIndex, 1);
    setListData(newData);
  };

  const onItemOpen = rowKey => {
    console.log('This row opened', rowKey);
  };

  const renderItem = data => (
    <TouchableHighlight
      onPress={() => console.log('You touched me')}
      style={styles.rowFront}
      underlayColor={'#fff'}
    >
      <View>
        <Text style={styles.list}>This Is {data.item.text} Of Swipe List View</Text>
      </View>
    </TouchableHighlight>
  );

  const renderHiddenItem = (data, rowMap) => (
    <View style={styles.rowBack}>
      <TouchableOpacity
        style={[styles.actionButton, styles.closeBtn]}
        onPress={() => closeItem(rowMap, data.item.key)}
      >
        <Text style={styles.btnText}>Close</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={[styles.actionButton, styles.deleteBtn]}
        onPress={() => deleteItem(rowMap, data.item.key)}
      >
        <Text style={styles.btnText}>Delete</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <View style={styles.container}>
      <SwipeListView
        data={listData}
        renderItem={renderItem}
        renderHiddenItem={renderHiddenItem}
        leftOpenValue={75}
        rightOpenValue={-150}
        previewRowKey={'0'}
        previewOpenValue={-40}
        previewOpenDelay={3000}
        onRowDidOpen={onItemOpen}
      />
    </View>
  );
}

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

Output

It will help you...