`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.
npm install react-native-swipeout-componentReact 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
``bash
yarn add react-native-swipeout-component
`
or
`bash
npm i react-native-swipeout-component
`
Note: If you face dependency issues while using npm installation then run this:
`bash
npm i react-native-swipeout-component --legacy-peer-deps
`
#### Usage
`javascript
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Swipeout } from 'react-native-swipeout-component';
const MyComponent = () => {
const rightButtons = [
{
component:
buttonBackgroundColor: 'red',
onPress: () => console.log('Delete pressed'),
},
];
return (
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
>
);
};
const styles = StyleSheet.create({
listItem: {
padding: 20,
backgroundColor: 'white',
},
customButtonText: {
color: 'white',
fontWeight: 'bold',
},
});
export default MyComponent;
`
| 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. | |$3
https://github.com/user-attachments/assets/2d8db5a7-6a27-4391-9029-bb5802cabf80
$3
Here's how you can integrate
react-native-swipeout-component with a FlatList to prevent scrolling while swiping:
`javascript 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 (
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
>
{item.key}
);
};
return (
data={yourData}
renderItem={renderItem}
scrollEnabled={scrollEnabled} // Control scroll based on swipe state
keyExtractor={(item) => item.key}
/>
);
};
export default YourComponent;
`$3
-
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.$3
- 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.
$3
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
$3
`javascriptimport React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Swipeout from 'react-native-swipeout-component';
const CustomButtonContent = () => (
Custom Delete
);
const MyComponent = () => {
const rightButtons = [
{
component:
buttonBackgroundColor: 'red',
onPress: () => console.log('Custom Delete pressed'),
width: 80,
height: 60,
},
];
return (
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
>
Swipe me left to see the custom button!
);
};
const styles = StyleSheet.create({
listItem: {
padding: 20,
backgroundColor: 'white',
},
customButtonContent: {
justifyContent: 'center',
alignItems: 'center',
height: '100%',
},
customButtonText: {
color: 'white',
fontWeight: 'bold',
},
});
export default MyComponent;
``