This module includes information on how to animate views in React Native .
The package is compatible with both Android and iOS .
Using npm:
$ npm install react-native-swipeable-container
Using Yarn:
$ yarn add react-native-swipeable-container
This library needs these dependencies to be installed in your project before you can use it:
Using npm:
$ npm install react-native-reanimated react-native-gesture-handler
Using Yarn:
$ yarn add react-native-reanimated react-native-gesture-handler
Basic usage examples of the library
import { SwipeableView } from 'react-native-swipeable-container';<SwipeableView
onDelete={() => Alert.alert('from delete button')}
onEdit={() => Alert.alert('from edit button')}
deleteButton={DeleteButton}
editButton={EditButton}
>
{Content}
</SwipeableView> const Content = (
<View style={{
flex: 1,
backgroundColor: 'pink',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Customize your design</Text>
</View>
)
const DeleteButton = (
<View style={{
flex: 1,
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{color:'white'}}>D</Text>
</View>
)
const EditButton = (
<View style={{
backgroundColor: 'green',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
overflow:'hidden'
}}>
<Text style={{color:'white'}}>E</Text>
</View>
)
const deleteAction = () => {
Alert.alert('from pressing delete button')
}
const editAction = () => {
Alert.alert('from pressing edit button')
}
<SwipeableView
deleteButton={DeleteButton}
editButton={EditButton}
onDelete={deleteAction}
onEdit={editAction}
>
{Content}
</SwipeableView>| Prop | Description |
|---|---|
children |
The content to be rendered inside the SwipeableView. |
deleteButton |
The content of the delete button. |
editButton |
The content of the edit button. |
height |
Optional. Height of the container. |
width |
Optional. Width of the container. |
swipeable |
Boolean indicating if the container should be swipeable. |
swipeableHint |
Boolean indicating if container swipe on the first render . |
swipeToDelete |
Optional. Determines whether swiping should trigger the delete action. Default is false . |
deleteThreshold |
Optional. The threshold for triggering delete action when swiping . Default is 210. |
autoOpened |
Boolean indicating if modal should be opened automatically. |
bg |
The color of the hidden view. |
borderRadius |
Optional. The border radius of the SwipeableView container. Default is 0. |
marginTop |
Optional. The margin from the top. |
marginBottom |
Optional. The margin from the top. . |
marginstart |
Optional. The margin from the start (left in LTR, right in RTL). |
marginEnd |
Optional. The margin from the end (right in LTR, left in RTL). |
onDelete |
callback when user presses delete button . |
onEdit |
callback when user presses edit button . |
If you like this package, consider becoming a sponsor 🩷