Lynx UI logo
Lynx UI
  • English

      • <SwipeAction>

      A SwipeAction component for ReactLynx. It provides swipeable list item primitives via main-thread gestures.

      • Key Composition:

      • displayArea: Visible content section

      • actionArea: Hidden actionable area (e.g. for swipe-to-delete functionality)

      • Use Cases:

      • Implement swipe gestures (e.g. delete/archive actions)

      • Build interactive touch controls

      Requirements

      LynxSDK version >= 2.16

      @lynx-js/react version > 0.24

      // pageConfig
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

pluginReactLynx({
  enableNewGesture: true,
}),
      Info

      You can check the source code to understand how it works, and you're welcome to submit MRs to enhance its capabilities.

      lynx-ui-swipe-actionBasic/index.tsx
      Code
      Preview

      SwipeActionProps

      actionArea
      iOS
      Android
      TypeReactElement
      Action area of the SwipeAction. The content of this area will be displayed on the right side of the SwipeAction. Before swipe or showActionArea called, this area will be hidden.
      children
      iOS
      Android
      TypeReactElement
      The content of the SwipeAction. The content will be displayed on the left side of the SwipeAction.
      className
      iOS
      Android
      Harmony
      Typestring
      className
      debugLog
      iOS
      Android
      Typeboolean
      Display debug logs. Open it when you find a bug.
      displayArea
      iOS
      Android
      TypeReactElement
      Display area of the SwipeAction. The content of this area will be displayed on the left side of the SwipeAction.
      enableSwipe
      iOS
      Android
      Typeboolean·Defaulttrue
      Whether allow swipe action. When it set to false, this item can only be used to display content.
      estimatedActionAreaSize
      iOS
      Android
      Typenumber·Default0
      The size of the action area. If the swipeAction is used inside List, the reuse of the List may cause the actionArea to have wrong size. You can use this property to set the initial size of the actionArea.
      iosEnableSimultaneousTouch
      iOS
      Typeboolean·Defaulttrue
      Force touch event to send to SwipeAction.
      onAction
      iOS
      Android
      Type(id: string) => void
      Triggered when the actionArea was tapped. Can be used to delete or other actions.
      onSwipeEnd
      iOS
      Android
      Type(id: string) => void
      Triggered when the SwipeAction swipe ends.
      onSwipeStart
      iOS
      Android
      Type(id: string) => void
      Triggered when the SwipeAction is swiped.
      ref
      TypeForwardedRef
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      swipeActionId
      iOS
      Android
      Typestring
      Id of the SwipeAction. The onSwipeStart, onSwipeEnd and onAction will be called with this id.

      SwipeActionRef

      closeActionArea
      iOS
      Android
      Type(animated: boolean) => void
      Call to hide the actionArea. If animated is true, the actionArea will be hidden with animation.
      showActionArea
      iOS
      Android
      Type(animated: boolean) => void
      Call to display the actionArea. If animated is true, the actionArea will be displayed with animation.
      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.