React Native Swipe Delete Example

When “React Native Swipe Delete Example” moves through design, development and browser testing, the linked project resource can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the React Native project before adopting it in production.

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...