React-native-swipeable-container NPM

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 .