react-native-swipeable-actions 0.1.0

package/ios/react-native-swipeable-actions.podspec

@@ -0,0 +1,22 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'react-native-swipeable-actions'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['repository']['url']
+  s.platforms      = { :ios => '13.4' }
+  s.swift_version  = '5.4'
+  s.source         = { :git => package['repository']['url'], :tag => "v#{s.version}" }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  s.source_files = '*.{h,m,mm,swift}'
+  s.exclude_files = 'Package.swift'
+end

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "react-native-swipeable-actions",
+  "version": "0.1.0",
+  "description": "High-performance native swipeable row component for React Native using Expo Modules",
+  "main": "src/index.ts",
+  "types": "build/index.d.ts",
+  "files": [
+    "build",
+    "src",
+    "!src/__tests__",
+    "!src/__mocks__",
+    "ios",
+    "!ios/Tests",
+    "!ios/.build",
+    "android/src/main",
+    "android/build.gradle",
+    "expo-module.config.json"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf build",
+    "prepare": "npm run clean && npm run build",
+    "test": "jest",
+    "test:ios": "cd ios && swift test",
+    "test:android": "cd example/android && ./gradlew :react-native-swipeable-actions:test --quiet",
+    "test:all": "npm test && npm run test:ios && npm run test:android",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write src",
+    "format:check": "prettier --check src",
+    "typecheck": "tsc --noEmit",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "e2e": "cd e2e && npm run test",
+    "e2e:android": "cd e2e && npm run test:android",
+    "e2e:perf": "cd e2e && npm run test:perf"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "swipeable",
+    "gesture",
+    "native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chocky335/react-native-swipeable-actions"
+  },
+  "homepage": "https://github.com/chocky335/react-native-swipeable-actions#readme",
+  "bugs": {
+    "url": "https://github.com/chocky335/react-native-swipeable-actions/issues"
+  },
+  "author": "chocky335",
+  "license": "MIT",
+  "peerDependencies": {
+    "expo": ">=50.0.0",
+    "expo-modules-core": ">=1.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0"
+  },
+  "devDependencies": {
+    "@testing-library/react-native": "^12.4.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "19.1.1",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "expo-modules-core": "^3.0.26",
+    "jest": "^29.7.0",
+    "prettier": "^3.2.0",
+    "prettier-config-holepunch": "^2.0.0",
+    "react": "19.1.1",
+    "react-native": "0.82.1",
+    "react-test-renderer": "19.1.1",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.9.3"
+  }
+}

package/src/Swipeable.tsx

@@ -0,0 +1,195 @@
+import { forwardRef, useImperativeHandle, useRef, useCallback, useState } from 'react'
+import { StyleSheet, View, Platform } from 'react-native'
+
+import { SwipeableView } from './SwipeableView'
+import { SwipeableActions } from './SwipeableActions'
+import {
+  SwipeableProps,
+  SwipeableMethods,
+  SwipeProgressEvent,
+  SwipeStateEvent,
+  NativeSwipeableRef
+} from './Swipeable.types'
+import { SWIPE_DEFAULTS } from './constants'
+import { openByKey, closeByKey, closeAll } from './nativeModuleUtils'
+
+function normalizeRecyclingKey(key: string | number | undefined): string | undefined {
+  if (key == null) return undefined
+  if (typeof key === 'string') return key
+  if (typeof key === 'number' && Number.isFinite(key)) return String(key)
+
+  if (__DEV__) {
+    console.warn(`[Swipeable] Invalid recyclingKey: ${key}. Expected string or finite number.`)
+  }
+  return undefined
+}
+
+const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(function Swipeable(
+  {
+    children,
+    actions,
+    actionsWidth,
+    actionsPosition = SWIPE_DEFAULTS.ACTIONS_POSITION,
+    friction = SWIPE_DEFAULTS.FRICTION,
+    threshold = SWIPE_DEFAULTS.THRESHOLD,
+    dragOffsetFromEdge = SWIPE_DEFAULTS.DRAG_OFFSET_FROM_EDGE,
+    style,
+    testID,
+    onSwipeStart,
+    onSwipeStateChange,
+    onSwipeEnd,
+    onProgress,
+    autoClose = false,
+    autoCloseTimeout = 0,
+    recyclingKey
+  },
+  ref
+) {
+  const nativeRef = useRef<NativeSwipeableRef>(null)
+  const [hasActionsRendered, setHasActionsRendered] = useState(false)
+  const swipeStartedRef = useRef(false)
+
+  // Normalize and sync recyclingKey to ref for use in useImperativeHandle
+  // (set during render to ensure it's always current before callbacks fire)
+  const normalizedKey = normalizeRecyclingKey(recyclingKey)
+  const recyclingKeyRef = useRef<string | undefined>(undefined)
+  recyclingKeyRef.current = normalizedKey
+
+  // Development-time validation
+  if (__DEV__) {
+    if (autoClose && recyclingKey == null) {
+      console.warn(
+        '[Swipeable] autoClose is enabled but recyclingKey is not set. ' +
+          'This may cause issues in virtualized lists. Consider adding a recyclingKey prop.'
+      )
+    }
+  }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      close: (animated?: boolean) => {
+        const key = recyclingKeyRef.current
+        if (key) {
+          closeByKey(key, animated)
+        } else if (__DEV__) {
+          console.warn('[Swipeable] close() called without recyclingKey - method has no effect')
+        }
+      },
+      open: () => {
+        const key = recyclingKeyRef.current
+        if (key) {
+          openByKey(key)
+        } else if (__DEV__) {
+          console.warn('[Swipeable] open() called without recyclingKey - method has no effect')
+        }
+      }
+    }),
+    []
+  )
+
+  const handleSwipeStart = useCallback(() => {
+    if (!hasActionsRendered) {
+      setHasActionsRendered(true)
+    }
+
+    if (!swipeStartedRef.current) {
+      swipeStartedRef.current = true
+      onSwipeStart?.()
+    }
+  }, [hasActionsRendered, onSwipeStart])
+
+  const handleSwipeProgress = useCallback(
+    (event: SwipeProgressEvent) => {
+      const newProgress = event.nativeEvent.progress
+      const clamped = Math.max(0, Math.min(1, newProgress))
+      onProgress?.(clamped)
+    },
+    [onProgress]
+  )
+
+  const handleSwipeStateChange = useCallback(
+    (event: SwipeStateEvent) => {
+      onSwipeStateChange?.(event.nativeEvent.state)
+    },
+    [onSwipeStateChange]
+  )
+
+  const handleSwipeEnd = useCallback(
+    (event: SwipeStateEvent) => {
+      swipeStartedRef.current = false
+      onSwipeEnd?.(event.nativeEvent.state)
+    },
+    [onSwipeEnd]
+  )
+
+  return (
+    <SwipeableView
+      ref={nativeRef}
+      style={[styles.container, style]}
+      actionsWidth={actionsWidth}
+      actionsPosition={actionsPosition}
+      friction={friction}
+      threshold={threshold}
+      dragOffsetFromEdge={dragOffsetFromEdge}
+      autoClose={autoClose}
+      autoCloseTimeout={autoCloseTimeout}
+      {...(normalizedKey ? { recyclingKey: normalizedKey } : {})}
+      {...(testID ? { testID } : {})}
+      onSwipeStart={handleSwipeStart}
+      onSwipeProgress={handleSwipeProgress}
+      onSwipeStateChange={handleSwipeStateChange}
+      onSwipeEnd={handleSwipeEnd}
+    >
+      {hasActionsRendered && (
+        <SwipeableActions actionsPosition={actionsPosition}>{actions}</SwipeableActions>
+      )}
+
+      <View style={styles.content}>{children}</View>
+    </SwipeableView>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    // iOS: overflow hidden works with native clipsToBounds
+    // Android: overflow visible required, native handles clipping
+    overflow: Platform.OS === 'ios' ? 'hidden' : 'visible'
+  },
+  content: {
+    width: '100%'
+  }
+})
+
+Swipeable.displayName = 'Swipeable'
+
+// Static methods for controlling Swipeables by recyclingKey
+type SwipeableWithStatic = typeof Swipeable & {
+  open: (recyclingKey: string) => void
+  close: (recyclingKey: string, animated?: boolean) => void
+  closeAll: (animated?: boolean) => void
+}
+
+const SwipeableExport = Swipeable as SwipeableWithStatic
+
+SwipeableExport.open = (recyclingKey: string) => {
+  if (__DEV__ && (!recyclingKey || typeof recyclingKey !== 'string')) {
+    console.warn('[Swipeable.open] recyclingKey must be a non-empty string')
+    return
+  }
+  openByKey(recyclingKey)
+}
+
+SwipeableExport.close = (recyclingKey: string, animated?: boolean) => {
+  if (__DEV__ && (!recyclingKey || typeof recyclingKey !== 'string')) {
+    console.warn('[Swipeable.close] recyclingKey must be a non-empty string')
+    return
+  }
+  closeByKey(recyclingKey, animated)
+}
+
+SwipeableExport.closeAll = (animated?: boolean) => {
+  closeAll(animated)
+}
+
+export default SwipeableExport

package/src/Swipeable.types.ts

@@ -0,0 +1,70 @@
+import { ReactNode, Ref } from 'react'
+import { ViewProps, StyleProp, ViewStyle } from 'react-native'
+
+export interface SwipeProgressEvent {
+  nativeEvent: {
+    progress: number
+    translationX: number
+  }
+}
+
+export interface SwipeStateEvent {
+  nativeEvent: {
+    state: 'open' | 'closed'
+  }
+}
+
+export interface NativeSwipeableRef {
+  close: (animated?: boolean) => Promise<void>
+  open: () => Promise<void>
+}
+
+export interface SwipeableViewProps extends ViewProps {
+  actionsWidth: number
+  actionsPosition?: 'left' | 'right'
+  friction?: number
+  threshold?: number
+  dragOffsetFromEdge?: number
+  recyclingKey?: string
+  onSwipeProgress?: (event: SwipeProgressEvent) => void
+  onSwipeStart?: () => void
+  onSwipeStateChange?: (event: SwipeStateEvent) => void
+  onSwipeEnd?: (event: SwipeStateEvent) => void
+  autoClose?: boolean
+  autoCloseTimeout?: number
+  children?: ReactNode
+  style?: StyleProp<ViewStyle>
+  nativeRef?: Ref<NativeSwipeableRef>
+  testID?: string
+}
+
+export interface SwipeableProps {
+  children: ReactNode
+  actions: ReactNode
+  actionsWidth: number
+  actionsPosition?: 'left' | 'right'
+  friction?: number
+  threshold?: number
+  dragOffsetFromEdge?: number
+  style?: StyleProp<ViewStyle>
+  testID?: string
+  ref?: Ref<SwipeableMethods>
+  onSwipeStart?: () => void
+  onSwipeStateChange?: (state: 'open' | 'closed') => void
+  onSwipeEnd?: (state: 'open' | 'closed') => void
+  onProgress?: (progress: number) => void
+  autoClose?: boolean
+  autoCloseTimeout?: number
+  recyclingKey?: string | number
+}
+
+export interface SwipeableMethods {
+  close: (animated?: boolean) => void
+  open: () => void
+}
+
+export interface SwipeableStatic {
+  open: (recyclingKey: string) => void
+  close: (recyclingKey: string, animated?: boolean) => void
+  closeAll: (animated?: boolean) => void
+}

package/src/SwipeableActions.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+/**
+ * Props for SwipeableActions component
+ */
+export interface SwipeableActionsProps {
+  /** Action components to render */
+  children: ReactNode
+  /** Position of actions: 'left' or 'right' */
+  actionsPosition: 'left' | 'right'
+}
+
+/**
+ * SwipeableActions - Internal layout component for swipeable actions
+ *
+ * Handles entrance animation when children mount.
+ */
+export function SwipeableActions({ children, actionsPosition }: SwipeableActionsProps) {
+  return (
+    <View
+      style={actionsPosition === 'left' ? styles.actionsLeading : styles.actionsTrailing}
+      pointerEvents={children ? 'auto' : 'none'}
+    >
+      {children}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  actionsTrailing: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'row',
+    justifyContent: 'flex-end'
+  },
+  actionsLeading: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'row',
+    justifyContent: 'flex-start'
+  }
+})

package/src/SwipeableView.tsx

@@ -0,0 +1,20 @@
+import { forwardRef, createElement, ComponentProps } from 'react'
+import { requireNativeViewManager, requireNativeModule } from 'expo-modules-core'
+import { SwipeableViewProps, NativeSwipeableRef } from './Swipeable.types'
+
+const NativeView = requireNativeViewManager<SwipeableViewProps>('Swipeable')
+
+// Module-level functions interface
+interface SwipeableNativeModule {
+  openByKey: (key: string) => void
+  closeByKey: (key: string, animated?: boolean) => void
+  closeAll: (animated?: boolean) => void
+}
+
+export const SwipeableModule = requireNativeModule<SwipeableNativeModule>('Swipeable')
+
+export const SwipeableView = forwardRef<NativeSwipeableRef, SwipeableViewProps>(
+  function SwipeableView(props, ref) {
+    return createElement(NativeView, { ...props, ref } as ComponentProps<typeof NativeView>)
+  }
+)

package/src/constants.ts

@@ -0,0 +1,11 @@
+export const SWIPE_PROGRESS = {
+  OPEN_THRESHOLD: 0.99,
+  CLOSED_THRESHOLD: 0.01
+} as const
+
+export const SWIPE_DEFAULTS = {
+  FRICTION: 1,
+  THRESHOLD: 0.4,
+  DRAG_OFFSET_FROM_EDGE: 0,
+  ACTIONS_POSITION: 'right'
+} as const

package/src/index.ts

@@ -0,0 +1,22 @@
+export { default as Swipeable } from './Swipeable'
+export { SwipeableView } from './SwipeableView'
+
+export type {
+  SwipeableProps,
+  SwipeableMethods,
+  SwipeableStatic,
+  SwipeableViewProps,
+  SwipeProgressEvent,
+  SwipeStateEvent,
+  NativeSwipeableRef
+} from './Swipeable.types'
+
+export { SWIPE_PROGRESS, SWIPE_DEFAULTS } from './constants'
+
+export { isSwipeFullyOpen, isSwipeFullyClosed, calculateSwipeStateChange } from './swipeStateUtils'
+
+export type { SwipeState, SwipeStateChange } from './swipeStateUtils'
+
+// Error handling utilities
+export { setGlobalErrorHandler } from './nativeModuleUtils'
+export type { SwipeableErrorHandler, NativeModuleError } from './nativeModuleUtils'

package/src/nativeModuleUtils.ts

@@ -0,0 +1,57 @@
+import { SwipeableModule } from './SwipeableView'
+
+export interface NativeModuleError {
+  code: string
+  message: string
+  nativeStackTrace?: string
+}
+
+export type SwipeableErrorHandler = (
+  error: NativeModuleError,
+  operation: string,
+  key?: string
+) => void
+
+let globalErrorHandler: SwipeableErrorHandler | undefined
+
+export function setGlobalErrorHandler(handler: SwipeableErrorHandler | undefined): void {
+  globalErrorHandler = handler
+}
+
+function handleNativeError(error: unknown, operation: string, key?: string): void {
+  const nativeError: NativeModuleError = {
+    code: 'SWIPEABLE_NATIVE_ERROR',
+    message: error instanceof Error ? error.message : String(error),
+    ...(error instanceof Error && error.stack ? { nativeStackTrace: error.stack } : {})
+  }
+
+  if (globalErrorHandler) {
+    globalErrorHandler(nativeError, operation, key)
+  } else if (__DEV__) {
+    console.error(`[Swipeable] ${operation} failed:`, nativeError.message)
+  }
+}
+
+export function openByKey(key: string): void {
+  try {
+    SwipeableModule.openByKey(key)
+  } catch (error) {
+    handleNativeError(error, 'openByKey', key)
+  }
+}
+
+export function closeByKey(key: string, animated?: boolean): void {
+  try {
+    SwipeableModule.closeByKey(key, animated)
+  } catch (error) {
+    handleNativeError(error, 'closeByKey', key)
+  }
+}
+
+export function closeAll(animated?: boolean): void {
+  try {
+    SwipeableModule.closeAll(animated)
+  } catch (error) {
+    handleNativeError(error, 'closeAll')
+  }
+}

package/src/swipeStateUtils.ts

@@ -0,0 +1,55 @@
+import { SWIPE_PROGRESS } from './constants'
+
+export interface SwipeState {
+  wasOpen: boolean
+  swipeStarted: boolean
+}
+
+export interface SwipeStateChange {
+  nextState: SwipeState
+  shouldEmitEnd: boolean
+  /** Whether the open state changed (for onOpenChange callback) */
+  openStateChanged?: boolean
+  /** The new open state (true = opened, false = closed) */
+  newOpenState?: boolean
+}
+
+export function isSwipeFullyOpen(progress: number): boolean {
+  return progress >= SWIPE_PROGRESS.OPEN_THRESHOLD
+}
+
+export function isSwipeFullyClosed(progress: number): boolean {
+  return progress <= SWIPE_PROGRESS.CLOSED_THRESHOLD
+}
+
+export function calculateSwipeStateChange(
+  progress: number,
+  currentState: SwipeState
+): SwipeStateChange {
+  const isOpen = isSwipeFullyOpen(progress)
+  const isClosed = isSwipeFullyClosed(progress)
+
+  if (!currentState.swipeStarted) {
+    return { nextState: currentState, shouldEmitEnd: false }
+  }
+
+  if (isOpen && !currentState.wasOpen) {
+    return {
+      nextState: { wasOpen: true, swipeStarted: false },
+      shouldEmitEnd: true,
+      openStateChanged: true,
+      newOpenState: true
+    }
+  }
+
+  if (isClosed && currentState.wasOpen) {
+    return {
+      nextState: { wasOpen: false, swipeStarted: false },
+      shouldEmitEnd: true,
+      openStateChanged: true,
+      newOpenState: false
+    }
+  }
+
+  return { nextState: currentState, shouldEmitEnd: false }
+}