Wondering what’s next for npm?Check out our public roadmap! »

    react-native-jiggle-delete-view
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    react-native-jiggle-delete-view

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

    Demo

    react-native-jiggle-delete-view

    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

    Install

    npm i react-native-jiggle-delete-view

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    30.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar