expo-finpanel

A Samsung One UI–inspired edge panel — swipe-in quick actions drawer with a second swappable insights page, built for fintech apps.

---

✨ Features

• 📱 Edge pill trigger — tap or swipe left on the right-edge pill to open, fades out the moment the drawer opens
• 🎠 Two-page swipeable drawer — Quick Actions and Insights live side by side in one carousel, with an animated pill-dot pagination indicator that tracks the active page
• 🪄 Staggered entrance animations — each action item springs and fades in with a per-index delay, driven by a small reusable AnimatedStaggerItem primitive
• 👆 Independent, non-conflicting gestures — pill tap/swipe-to-open, drawer swipe-to-page, and overlay tap-to-dismiss are all handled as separate gesture recognizers so none of them fight each other
• 🧩 Swappable second page — InsightPanel ships as a placeholder; swap it for spending stats, subscriptions, a savings streak, or anything else, and wrap your content in AnimatedStaggerItem to keep the same entrance motion
• 🧠 TypeScript-first — typed ActionItem list, discriminated DrawerPage union ('actions' | 'insights'), fully typed props
• ♿ Accessible by default — accessibilityRole / accessibilityLabel on every action item

---

⚙️ Installation

This isn't published as an npm package yet — copy the source directly into your project.

git clone https://github.com/ManasCodeXart/expo-finpanel

Copy src/components/ and src/constants/ from src/, plus assets/images/ (Cards.png, quickpay.png, savings.png, crypto.png, bills.png), into your project, then install the peer dependencies:

npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler

Reanimated 4.x ships its worklets runtime as the separate react-native-worklets package — it's required alongside react-native-reanimated, not optional.

Requires react-native-reanimated's Babel plugin already configured, and GestureHandlerRootView wrapping your app root — both are standard for any Expo Router / RN project already using Reanimated or Gesture Handler.

---

🚀 Usage

import { StyleSheet, View } from 'react-native';
import QuickActionsDrawer from './components/QuickActionsDrawer';

export default function Home() {
  return (
    
       console.log('Pressed:', id)}