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

Support this package!

If you like this package, consider becoming a sponsor 🩷