🎨 React Native Scaling Drawer

A beautiful, performant drawer navigation with scaling animations and shadow effects for Expo Router and React Native

✨ Features

• 🎯 Modern Design - Beautiful scaling animations with shadow effects
• ⚡ High Performance - 60fps animations using native driver
• 🎮 Gesture Support - Smooth touch interactions with scroll-first priority
• 📱 Universal Compatibility - Works with Expo Router, React Navigation, Expo CLI, and React Native CLI
• 🧩 Zero-Config Setup - Default UI included, customize as needed
• 🎨 Pre-built Components - Header, Menu, Footer, and more
• 📦 TypeScript - Full type safety with comprehensive definitions
• 🔧 Easy Integration - Three integration patterns from simple to advanced
• ♿ Accessible - Screen reader support and keyboard navigation
• 🌈 Themeable - Comprehensive styling and theming system

🚀 Quick Start

Installation

# npm
npm install @apachi14444/react-native-scaling-drawer

# yarn
yarn add @apachi14444/react-native-scaling-drawer

# pnpm
pnpm add @apachi14444/react-native-scaling-drawer

Dependencies

This package requires:

• react-native-reanimated (>= 3.0.0) - Optional, for advanced animations
• react-native-gesture-handler (>= 2.0.0) - Optional, for gesture support

Quick Start - Three Ways to Use

Option 1: Zero-Config (Easiest)

import UniversalDrawer from '@apachi14444/react-native-scaling-drawer';

export default function App() {
  return (
    <UniversalDrawer>
      <YourAppContent />
    </UniversalDrawer>
  );
}

Option 2: Menu-Based Setup

import { UniversalDrawer } from '@apachi14444/react-native-scaling-drawer';
import { useRouter } from 'expo-router';

export default function App() {
  const router = useRouter();

  return (
    <UniversalDrawer
      menuItems={[
        { label: 'Home', href: '/', icon: '🏠' },
        { label: 'Profile', href: '/profile', icon: '👤' },
        { label: 'Settings', href: '/settings', icon: '⚙️' },
      ]}
      onNavigate={(href) => router.push(href)}
      drawerBackgroundColor="#673AB7"
    >
      <YourAppContent />
    </UniversalDrawer>
  );
}

Option 3: Full Custom Control

import { UniversalDrawer, DrawerHeader, DrawerMenu, DrawerMenuItem } from '@apachi14444/react-native-scaling-drawer';

function CustomDrawer() {
  const { close } = useDrawer();

  return (
    <>
      <DrawerHeader title="My App" subtitle="Welcome back" />
      <DrawerMenu>
        <DrawerMenuItem title="Home" icon="🏠" onPress={() => { /* navigate */ close(); }} />
        <DrawerMenuItem title="Profile" icon="👤" onPress={() => { /* navigate */ close(); }} />
      </DrawerMenu>
    </>
  );
}

export default function App() {
  return (
    <UniversalDrawer drawerContent={<CustomDrawer />}>
      <YourAppContent />
    </UniversalDrawer>
  );
}

📱 Example App

Check out the full example app in the example directory:

# Clone the repository
git clone https://github.com/apachi1444/react-native-scalable-drawer.git

# Install dependencies
cd react-native-scalable-drawer
npm install

# Install example dependencies
cd example
npm install

# Run the example app
npm start

📚 API Documentation

🌟 Universal Drawer (Recommended)

• UniversalDrawer - All-in-one drawer component with multiple integration patterns
• Works with Expo Router, React Navigation, Expo CLI, and React Native CLI

🧩 Pre-built Components

• DrawerHeader - Header with title, subtitle, and avatar
• DrawerMenu - Scrollable menu container
• DrawerMenuItem - Individual menu item with icon
• DrawerFooter - Footer section for app info
• DrawerDivider - Visual separator between sections
• DefaultDrawerUI - Automatic fallback UI

🎯 Core Components

• ScalingDrawer - Low-level drawer component for advanced use
• DrawerProvider - Context provider for drawer state
• useDrawer - Hook to control drawer from anywhere
• useScalingDrawer - Hook for custom drawer implementations

🔌 Framework Adapters

• ExpoRouterDrawer - Expo Router specific integration (legacy)
• DrawerMenuButton - Pre-styled menu button

📖 Compatibility

| Framework | Support | Notes | |-----------|---------|-------| | Expo Router | ✅ Full | File-based routing with useRouter() | | React Navigation | ✅ Full | Works with Stack, Tabs, etc. | | Expo CLI | ✅ Full | Managed workflow | | Expo Dev Build | ✅ Full | Custom native code | | React Native CLI | ✅ Full | Bare workflow | | Web | ✅ Full | React Native Web compatible |

Check the src/ directory for full implementation details.

🎯 Key Features

🎨 Beautiful Animations

• Smooth scaling transitions
• Elegant shadow effects
• Customizable animation curves
• 60fps performance

🎮 Gesture Support

• Swipe to open/close
• Configurable gesture areas
• Scroll-friendly (optional)
• Native feel on all platforms

🧩 Modern Integration

• Expo Router ready
• TypeScript support
• Context-based state management
• Flexible architecture

⚙️ Highly Customizable

• Animation duration and easing
• Scale factor and slide distance
• Colors and styling
• Gesture behavior

🏗️ Repository Structure

Simple and clean structure:

react-native-scalable-drawer/
├── src/                    # 📦 Library source code
├── lib/                    # 📦 Compiled library
├── example/                # 📱 Example Expo app
├── package.json            # 📦 Package configuration
└── README.md               # 📖 Documentation

🛠️ Development

Package Development

# Build the package
npm run build

# Watch for changes
npm run build:watch

# Run tests
npm test

# Type checking
npm run typecheck

Example App Development

# Start the example app
cd example && npm start

# Run on specific platforms
cd example && npm run ios
cd example && npm run android

📋 Requirements

• React Native 0.68+ (tested up to 0.79.5)
• Expo SDK 47+ (tested up to SDK 53)
• React Native Reanimated 3.0+ (optional, for advanced animations)
• React Native Gesture Handler 2.0+ (optional, for gesture support)

Note: The package works without Reanimated and Gesture Handler, but you'll get the best experience with them installed.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Credits

Created with ❤️ by apachi1444

Inspired by modern mobile design patterns and built for the React Native community.

🌟 Show Your Support

If this project helped you, please give it a ⭐️ on GitHub!

📦 Source • 📱 Example • 🐛 Issues