react-native-swipeout-component v1.2.8
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 autoOpenRight or 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 ascrollEnabled
state variable to toggle the scrolling of theFlatList
.Swipeout
Component: This component wraps around the list item and provides swipeable buttons.onOpen
andonClose
Callbacks: These callbacks are triggered when the swipeout is opened or closed, respectively. They are used to disable theFlatList
'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;
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago