Fast Swipe Row

Fast Swipe Row is a React Native component that simplifies the implementation of swipe-to-delete functionality for list items. It leverages the react-native-gesture-handler library to provide a smooth and responsive swipe experience.

Features

• Easy to Use: Quickly add swipe-to-delete functionality to your list items.
• Customizable: Easily customize the appearance and behavior of the swipe actions.
• Responsive: Ensures smooth swipe performance across all devices.

Installation

Install Fast Swipe Row via npm:

npm install fast-swipe-row

Usage

Here's a basic example of how to use Fast Swipe Row in a React Native application:

import React, { useState } from "react";
import { StyleSheet, View, TouchableOpacity, Text, FlatList } from "react-native";
import SwipeableRow from "fast-swipe-row";

const App = () => {
  const [items, setItems] = useState([
    { id: "1", name: "Item 1" },
    { id: "2", name: "Item 2" },
    { id: "3", name: "Item 3" },
  ]);

  const removeItem = (itemId) => {
    setItems(items.filter(item => item.id !== itemId));
  };

  const renderItem = ({ item }) => (
    <SwipeableRow key={item.id} onDelete={() => removeItem(item.id)}>
      <TouchableOpacity
        onPress={() => {
          console.log(`Selected item: ${item.name}`);
        }}
      >
        <View style={styles.item}>
          <Text>{item.name}</Text>
        </View>
      </TouchableOpacity>
    </SwipeableRow>
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    marginVertical: 8,
    backgroundColor: "#f9f9f9",
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 5,
  },
});

export default App;

Props

Fast Swipe Row accepts the following props:

• onDelete: A callback function that gets called when the row is deleted.

Example

Here is a more detailed example demonstrating the integration of Fast Swipe Row with a list of items:

import React, { useState } from "react";
import { StyleSheet, View, TouchableOpacity, Text, FlatList } from "react-native";
import SwipeableRow from "fast-swipe-row";

const App = () => {
  const [items, setItems] = useState([
    { id: "1", name: "Item 1" },
    { id: "2", name: "Item 2" },
    { id: "3", name: "Item 3" },
  ]);

  const removeItem = (itemId) => {
    setItems(items.filter(item => item.id !== itemId));
  };

  const renderItem = ({ item }) => (
    <SwipeableRow key={item.id} onDelete={() => removeItem(item.id)}>
      <TouchableOpacity
        onPress={() => {
          console.log(`Selected item: ${item.name}`);
        }}
      >
        <View style={styles.item}>
          <Text>{item.name}</Text>
        </View>
      </TouchableOpacity>
    </SwipeableRow>
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    marginVertical: 8,
    backgroundColor: "#f9f9f9",
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 5,
  },
});

export default App;

License

This project is licensed under the MIT License.

Contributions

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Support

For support, please reach out to [email protected].

Enhance your React Native application's user experience with Fast Swipe Row, making row deletion intuitive and efficient.