More Premium Hugo Themes Premium React Themes

React Native Swipeable

A powerful React Native swipe component.

React Native Swipeable

A powerful React Native swipe component.

Author Avatar Theme by jshanson7
Github Stars Github Stars: 1244
Last Commit Last Commit: Dec 2, 2020 -
First Commit Created: Feb 24, 2024 -
React Native Swipeable screenshot

Overview

The React Native Swipeable is a powerful swipe component compatible with both iOS and Android platforms. It provides a user-friendly way to incorporate swipe actions within your React Native applications.

Features

  • Swipeable Content: Customize swipeable content for interactive user experiences.
  • Left and Right Content: Include left and right content visible during swipe actions.
  • Action Activation Distance: Set minimum swipe distance to activate specific actions.
  • Buttons Integration: Utilize an array of buttons with innermost button prioritization.

Installation

To install the React Native Swipeable component, follow these steps:

npm install react-native-swipeable

After installation, ensure your ListView/TableView items are wrapped with the Swipeable component. Here’s a basic example using the component and its props:

<Swipeable
  leftContent={<LeftContentComponent />}
  rightContent={<RightContentComponent />}
  leftButtons={[<ButtonComponent />]}
  onLeftActionRelease={() => { /* Handle left action release */ */}}
  rightButtons={[<ButtonComponent />]}
  onRightActionRelease={() => { /* Handle right action release */ */}}
  leftActionActivationDistance={125}
  rightActionActivationDistance={125}
  leftButtonWidth={75}
  rightButtonWidth={75}
/>

Summary

The React Native Swipeable component offers a simple yet effective way to integrate swipe actions into your applications. With customizable content, button support, and various activation options, this component enhances user interactions within React Native projects.