Delete an Element on Swipe in React Native
Swipe gestures have become prevalent for interacting with mobile apps, providing a convenient way to delete items from a list. In this article, we’ll explore how to add a “Swipe to Delete” feature in a React Native app using the react-native-swipe-list-view library.
Pre-requisites
- Introduction to React Native
- React Native Components
- React Hooks
- Expo CLI
- Node.js and npm
Steps to Create a React Native Application
Step 1: Create a react native application by using this command
npx create-expo-app <<Project-Name>>
Step 2: After creating your project folder, i.e. swipedeleteApp, use the following command to navigate to it:
cd <<Project-Name>>
Project Structure:
Step 3: Install the Library
In project directory, open a terminal and install the react-native-swipe-list-view library:
npm install react-native-swipe-list-view
Approach
In this approach, we are using “react-native-swipe-list-view” library to enable swipe-to-delete functionality. It showcases a visually appealing user interface consisting of a list of items, where each item allows interaction through swipe actions revealing “Close” and “Delete” buttons. The UI is refined with a header displaying “w3wiki” in green and a subheading “Swipe to delete” in dark gray. Furthermore, each list item styled with an white background color with rounded corners and subtle shadow effects for added depth.
Example: In this example, we will adding swipe to delete features in native application
- App.js
Javascript
import React, { Component } from 'react' ; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native' ; import { SwipeListView } from 'react-native-swipe-list-view' ; class App extends Component { constructor() { super (); // Initialize the state with a list of items this .state = { itemList: [ { key: '1' , description: 'Item 1' }, { key: '2' , description: 'Item 2' }, { key: '3' , description: 'Item 3' }, { key: '4' , description: 'Item 4' }, { key: '5' , description: 'Item 5' }, ], }; } // Function to close a swiped row closeRow = (rowMap, rowKey) => { if (rowMap[rowKey]) { rowMap[rowKey].closeRow(); } }; // Function to delete an item from the list deleteItem = (rowMap, rowKey) => { this .closeRow(rowMap, rowKey); const newData = [... this .state.itemList]; const prevIndex = this .state.itemList .findIndex(item => item.key === rowKey); newData.splice(prevIndex, 1); this .setState({ itemList: newData }); }; // Function to handle row open event onRowOpen = rowKey => { console.log( 'Opened row with key:' , rowKey); }; // Function to render each list item renderItem = rowData => ( <TouchableOpacity onPress={() => console.log( 'Item touched' )} style={styles.itemContainer} > <Text style={styles.itemText}> {rowData.item.description} </Text> </TouchableOpacity> ); // Function to render hidden swipe actions renderHiddenItem = (rowData, rowMap) => ( <View style={styles.hiddenContainer}> <TouchableOpacity style={[styles.hiddenButton, styles.closeButton]} onPress={() => this .closeRow(rowMap, rowData.item.key)} > <Text style={styles.buttonText}>Close</Text> </TouchableOpacity> <TouchableOpacity style={[styles.hiddenButton, styles.deleteButton]} onPress={() => this .deleteItem(rowMap, rowData.item.key)} > <Text style={styles.buttonText}>Delete</Text> </TouchableOpacity> </View> ); render() { return ( <View style={styles.container}> { /* Header */ } <Text style={styles.heading}>w3wiki</Text> <Text style={styles.subheading}>Swipe to delete </Text> { /* SwipeListView */ } <SwipeListView data={ this .state.itemList} renderItem={ this .renderItem} renderHiddenItem={ this .renderHiddenItem} leftOpenValue={75} rightOpenValue={-150} previewRowKey={ '0' } previewOpenValue={-40} previewOpenDelay={3000} onRowDidOpen={ this .onRowOpen} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#eee' , // Light Gray paddingVertical: 20, paddingHorizontal: 15, }, heading: { fontSize: 30, fontWeight: 'bold' , marginBottom: 20, color: 'green' , margin: 20, textAlign: 'center' , }, subheading: { fontSize: 24, fontWeight: 'bold' , marginBottom: 20, color: '#333' , // Dark Gray margin: 10, textAlign: 'center' , }, itemContainer: { alignItems: 'center' , justifyContent: 'center' , backgroundColor: '#FFF' , // White borderBottomColor: '#E0E0E0' , // Lighter Gray borderBottomWidth: 1, height: 80, borderRadius: 8, shadowColor: '#000' , shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 3, elevation: 3, marginBottom: 10, }, itemText: { color: '#333' , // Dark Gray fontSize: 16, fontWeight: 'bold' , }, hiddenContainer: { flexDirection: 'row' , justifyContent: 'flex-end' , alignItems: 'center' , backgroundColor: '#FFF' , height: 80, borderRadius: 20, }, hiddenButton: { justifyContent: 'center' , alignItems: 'center' , width: 75, height: 80, }, closeButton: { backgroundColor: 'green' , // Blue borderRadius: 20, }, deleteButton: { backgroundColor: '#E74C3C' , // Red borderRadius: 20, }, buttonText: { color: '#FFF' , fontSize: 16, fontWeight: 'bold' , }, }); export default App; |
Steps to Run
To run react native application use the following command:
npx expo start
- To run on Android:
npx react-native run-android
- To run on Ios:
npx react-native run-ios
Output: