react-native-jiggle-delete-view

Long press on a view to enter jiggle and delete mode, similar to deleting iOS apps

Demo

Installation

npm install react-native-jiggle-delete-view

or

yarn add react-native-jiggle-delete-view

Usage

First import with

import JiggleDeleteView from "react-native-jiggle-delete-view";

Then, wrap the views that you want to enable jiggle delete with JiggleDeleteView, and provide the props showDeleteJiggle and onDelete.

<JiggleDeleteView
	showDeleteJiggle={showDeleteJiggle}
	onDelete={() => {
		// Delete item
	}}
>
	<MyCustomView>
		// ...
	</MyCustomView>
</JiggleDeleteView>

A common usage is to wrap JiggleDeleteView with a TouchableOpacity that sets showDeleteJiggle to true on long press. Check the example app for usage inside a FlatList.

import JiggleDeleteView from "react-native-jiggle-delete-view";

// ...
const [showDeleteJiggle, setShowDeleteJiggle] = React.useState(false);

// ...
<TouchableOpacity
	onLongPress={() => {
		setDeleting(!showDeleteJiggle);
	}}
>
	<JiggleDeleteView
		showDeleteJiggle={showDeleteJiggle}
		onDelete={() => {
			deleteItem(index);
		}}
	>
		<View style={[styles.cell, { backgroundColor: item.color }]}>
			<Text style={styles.text}>{item.name}</Text>
		</View>
	</JiggleDeleteView>
</TouchableOpacity>

Properties

Prop	Description	Default	Required
children	Any nested views. This is required.	None	Required
showDeleteJiggle	A boolean that determines if the view is being deleted. When sets to true, JiggleDeleteView will start jiggling, and a delete button will show.	false	Optional
onDelete	A function that gets triggered when the delete button is pressed.	None	Required
showDeletingAnimation	A boolean that determines whether to show zoom out animation when delete button is pressed.	false	Optional

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT