Animate Views In React Native – Swipeable Container

Description:

The swipeable-container provides an easy way to animate views in React Native. Supports both iOS and Android.

The component allows for swipe actions, with customization options for appearance and behavior. Requires react-native-reanimated and react-native-gesture-handler.

How to use it:

1. Install the Swipeable Container and necessary dependencies.

# Yarn
$ yarn add react-native-swipeable-container react-native-reanimated react-native-gesture-handler
# NPM
$ npm install react-native-swipeable-container react-native-reanimated react-native-gesture-handler

2. Import the SwipeableView component in your app.

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

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

4. Available component props.

children: ReactNode;
deleteButton?: ReactNode;
editButton?: ReactNode;
height?: number | string;
swipeable?: boolean,
swipeableHint?: boolean,
autoOpened?: boolean,
bg?: string,
width?:number | string,
borderRadius?:number,
marginTop?:number,
marginBottom?:number,
marginStart?:number,
marginEnd?:number,
onDelete: () => void,
onEdit: () => void,

Preview:

React Native Swipeable Container

Add Comment