react-native-swipeout-component

React Native Swipeout Component

React Native Swipeout is a customizable swipeable row component for React Native, allowing you to create swipe actions like deleting, archiving, or other actions you might want to trigger with a swipe.

Installation

yarn add react-native-swipeout-component

or

npm i react-native-swipeout-component

Note: If you face dependency issues while using npm installation then run this:

npm i react-native-swipeout-component --legacy-peer-deps

Usage

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

import { Swipeout } from 'react-native-swipeout-component';

const MyComponent = () => {

  const rightButtons = [

    {

      component: <Text style={styles.customButtonText}>Delete</Text>,

      buttonBackgroundColor: 'red',

      onPress: () => console.log('Delete pressed'),

    },

  ];

  return (

    <Swipeout
      //MAKE SURE TO GIVE IT A HEIGHT
      style={{height:100}}
      right={rightButtons}

      autoClose={true}

      rightBackgroundColor="lightgray"

      buttonWidth={80} // Required when using autoOpenRight or autoOpenLeft

      autoOpenRight={true} // Automatically opens the right swipe action

    >

      <View style={styles.listItem}>

        <Text>Swipe me left to delete!</Text>

      </View>

    </Swipeout>

  );

};

const styles = StyleSheet.create({

  listItem: {

    padding: 20,

    backgroundColor: 'white',

  },

  customButtonText: {

    color: 'white',

    fontWeight: 'bold',

  },

});

export default MyComponent;

Props

Prop	Type	Default	Description
autoClose	boolean	false	Automatically closes the swipe action after a button is pressed.
buttonBackgroundColor	string		Background color for the individual swipe buttons.
leftBackgroundColor	string		Background color when swiping to the left.  Should be used when you have one button
rightBackgroundColor	string		Background color when swiping to the right. Should be used when you have one button
close	boolean		Programmatically close the swipeout.
left	array	[]	Array of buttons to show on the left swipe action. Each button can have properties like text, onPress, type, component, and buttonBackgroundColor.
right	array	[]	Array of buttons to show on the right swipe action.
onOpen	function		Callback function called when the swipe action is opened.
onClose	function		Callback function called when the swipe action is closed.
scroll	function		Callback function to handle scroll events.
style	object		Custom styles for the swipeout container.
sensitivity	number	50	Sensitivity of the swipe gesture.
buttonWidth	number		Width of the swipe buttons. Must be provided if autoOpenRight or autoOpenLeft is used.
disabled	boolean	false	Disable the swipe actions.
autoOpenRight	boolean	false	Automatically opens the right swipe action when the component is mounted. Do not use with autoOpenLeft.
autoOpenLeft	boolean	false	Automatically opens the left swipe action when the component is mounted. Do not use with autoOpenRight.
timeout	number		Time in milliseconds to keep the swipe action open when autoOpenRightor autoOpenLeft is used.
children	ReactNode		The content to render inside the swipeout container.
dragToCTA	boolean	false	Enable drag to call-to-action functionality.
onCTA	function		Callback function to handle the call-to-action event when dragToCTA is enabled.

Drag to CTA

https://github.com/user-attachments/assets/2d8db5a7-6a27-4391-9029-bb5802cabf80

Integration with FlatList

Here's how you can integrate react-native-swipeout-component with a FlatList to prevent scrolling while swiping:

   import React, { useState } from 'react';

   import { FlatList, Text, View } from 'react-native';

   import Swipeout from 'react-native-swipeout';

   const YourComponent = () => {

     const [scrollEnabled, setScrollEnabled] = useState(true);

     const yourData = [

       { key: 'Item 1' },

       { key: 'Item 2' },

       { key: 'Item 3' },

       // Add more items as needed

     ];

     const renderItem = ({ item }) => {

       const swipeoutBtns = [

         {

           text: 'Delete',

           onPress: () => console.log('Delete pressed'),

         },

         // Add more buttons as needed

       ];

       return (

         <Swipeout

           right={swipeoutBtns}

           autoClose={true}

           backgroundColor="transparent"

           onOpen={() => setScrollEnabled(false)}   // Disable scrolling when swipeout is open

           onClose={() => setScrollEnabled(true)}   // Re-enable scrolling when swipeout is closed

         >

           <View style={{ padding: 20, backgroundColor: 'white' }}>

             <Text>{item.key}</Text>

           </View>

         </Swipeout>

       );

     };

     return (

       <FlatList

         data={yourData}

         renderItem={renderItem}

         scrollEnabled={scrollEnabled}   // Control scroll based on swipe state

         keyExtractor={(item) => item.key}

       />

     );

   };

   export default YourComponent;

Explanation:

• scrollEnabled State: We use a scrollEnabled state variable to toggle the scrolling of the FlatList.

• Swipeout Component: This component wraps around the list item and provides swipeable buttons.

• onOpen and onClose Callbacks: These callbacks are triggered when the swipeout is opened or closed, respectively. They are used to disable the FlatList's scrolling when a swipe action is in progress and re-enable it afterward.

Notes:

• Performance: Disabling and enabling scrolling dynamically is usually efficient, but be cautious if you have a very large list or complex items, as it might cause slight jankiness.

Important Rules

1. Auto Open Restrictions: You should not use autoOpenRight and autoOpenLeft together. Only one of these properties should be set to true to avoid conflicting behaviors.

2. Button Width Requirement: When using autoOpenRight or autoOpenLeft, you must pass a buttonWidth value. This ensures that the component can correctly calculate the swipe action's dimensions and behavior.

3. Component not displaying?: Make sure to give it a height if you can't see the component

Example with Custom Component Button and Background Colors

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

import Swipeout from 'react-native-swipeout-component';

const CustomButtonContent = () => (

  <View style={styles.customButtonContent}>

    <Text style={styles.customButtonText}>Custom Delete</Text>

  </View>

);

const MyComponent = () => {

  const rightButtons = [

    {

      component: <CustomButtonContent />, // Passing the custom component

      buttonBackgroundColor: 'red',

      onPress: () => console.log('Custom Delete pressed'),

      width: 80,

      height: 60,

    },

  ];

  return (

    <Swipeout

      right={rightButtons}

      autoClose={true}

      rightBackgroundColor="lightgray" // Set background color when swiping to the right

      buttonWidth={80} // Required when using autoOpenRight or autoOpenLeft

      autoOpenRight={true} // Automatically opens the right swipe action

    >

      <View style={styles.listItem}>

        <Text>Swipe me left to see the custom button!</Text>

      </View>

    </Swipeout>

  );

};

const styles = StyleSheet.create({

  listItem: {

    padding: 20,

    backgroundColor: 'white',

  },

  customButtonContent: {

    justifyContent: 'center',

    alignItems: 'center',

    height: '100%',

  },

  customButtonText: {

    color: 'white',

    fontWeight: 'bold',

  },

});

export default MyComponent;