React Native Swipe Delete Example

React Native

Nicesnippets

9285

26-11-2020


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