react-native-swipeable-container

Description

This module includes information on how to animate views in React Native .

The package is compatible with both Android and iOS .

Getting Started

Install the package:

Using npm:

$ npm install react-native-swipeable-container

Using Yarn:

$ yarn add react-native-swipeable-container

Dependencies:

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

Usage 🚀

Basic usage examples of the library

Importing the SwipeableView component

import { SwipeableView } from 'react-native-swipeable-container';

Use the SwipeableView component in your app:

<SwipeableView
    onDelete={() => Alert.alert('from delete button')}
    onEdit={() => Alert.alert('from edit button')}
    deleteButton={DeleteButton}
    editButton={EditButton}
>
  {Content}
</SwipeableView>

Some Code Examples

 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>

Props

| 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 . |

Support this package!

If you like this package, consider becoming a sponsor 🩷