react-native-swipeout-component
Version:
`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.
358 lines (189 loc) • 8.71 kB
Markdown
### 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
```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: <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:
```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 (
<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
```javascript
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;
```