expo-ios-like-swipe-actions - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #android #machine-learning #deep-learning #docker #macos #nodejs #java #awesome #kubernetes #vue #mcp

expo-ios-like-swipe-actions

(★ 55)

👆🏻 iOS-like smooth swipe actions for React Native.

파일 탐색기

최종 버전 다운로드 (.zip)

- extensions.json
- settings.json
- - icon.json
- - SF-Pro-Rounded-Regular.otf
  - SFPRODISPLAYBLACKITALIC.otf
  - SFPRODISPLAYBOLD.otf
  - SFPRODISPLAYHEAVYITALIC.otf
  - SFPRODISPLAYLIGHTITALIC.otf
  - SFPRODISPLAYMEDIUM.otf
  - SFPRODISPLAYREGULAR.otf
  - SFPRODISPLAYSEMIBOLDITALIC.otf
  - SFPRODISPLAYTHINITALIC.otf
  - SFPRODISPLAYULTRALIGHTITALIC.otf
- - android-icon-background.png
  - android-icon-foreground.png
  - android-icon-monochrome.png
  - expo-badge-white.png
  - expo-badge.png
  - expo-logo.png
  - favicon.png
  - icon.png
  - logo-glow.png
  - react-logo.png
  - react-logo@2x.png
  - react-logo@3x.png
  - splash-icon.png
  - tutorial-web.png
- - gradient-1.jpg
  - gradient-2.jpg
  - gradient-3.jpg
  - gradient-4.jpg
  - gradient-5.jpg
  - gradient-6.jpg
- - _layout.tsx
  - index.tsx
- - MailRow.tsx
  - SwipeActionButton.tsx
  - SwipeActionIcon.tsx
  - SwipeActions.tsx
  - SwipeActionsContainer.tsx
  - SwipeActionsLayer.tsx
  - SwipeActionsMain.tsx
  - SwipeActionsRoot.tsx
  - SwipeActionTitle.tsx
- - index.ts
- - swipe-actions-context.tsx
- - use-fonts.ts
  - use-swipe-motion.ts
- - mail.interfaces.ts
  - swipe.interfaces.ts
  - ui.interfaces.ts
- - index.ts
- - swipe-children.ts
  - swipe-constants.ts
  - swipe-math.ts
.gitignore
app.json
bun.lock
eslint.config.js
module.d.ts
package.json
README.md
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Swipe Actions

iOS-style swipe actions for React Native.

## ✨ Features

- 👆 Left & right swipe actions
- 🔁 Full-swipe commit gesture
- 📳 Haptic cues on reveal and commit
- 🧩 Composable compound component API
- ⚡ Powered by Reanimated 4 & Gesture Handler 2
- 🔷 TypeScript-ready

---

## ⚙️ Installation

```bash
git clone https://github.com/rit3zh/expo-ios-like-swipe-actions
cd expo-ios-like-swipe-actions
npm install
npx expo start
```

---

## 🎥 Preview

https://github.com/user-attachments/assets/21275405-5b0f-45bd-baa1-7b2f3ad334d3

---

## 🚀 Usage

```tsx
import { SwipeActions } from "@/components/SwipeActions";

<SwipeActions.Provider>
  <SwipeActions.Root
    actionWidth={80}
    fullSwipeEnabled
    onHapticCue={(kind) => Haptics.impactAsync()}
  >
    <SwipeActions.Main>
      <MailRow item={item} />
    </SwipeActions.Main>

<SwipeActions.Container side="right" onPress={handleDelete} destructive>
      <SwipeActions.Icon name="trash" />
      <SwipeActions.Title>Delete</SwipeActions.Title>
    </SwipeActions.Container>

<SwipeActions.Container side="right" onPress={handleArchive}>
      <SwipeActions.Icon name="archive" />
      <SwipeActions.Title>Archive</SwipeActions.Title>
    </SwipeActions.Container>

<SwipeActions.Container side="left" onPress={handleFlag}>
      <SwipeActions.Icon name="flag" />
      <SwipeActions.Title>Flag</SwipeActions.Title>
    </SwipeActions.Container>
  </SwipeActions.Root>
</SwipeActions.Provider>;
```

---

## Stack

Expo 55 · React Native 0.83 · Reanimated 4 · Gesture Handler 2 · Expo Router