react-native-jiggle-delete-view v1.0.1

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

Contributing

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

License

MIT