Draggable, Liquid Glass-style Video Player Component for React Native

Description:

Draggable Video Controls is a React Native UI component library that creates interactive video player interfaces.

Features

• 🎯 Draggable Play Button: You can drag the play button across the screen with physics-based gesture recognition.
• ⏭️ Dynamic Skip Controls: Previous and next skip buttons detach and become visible during drag interactions.
• 🌀 Spring Animations: All movements use smooth spring physics for natural motion.
• 📱 Glass Effect UI: Implements iOS-inspired Liquid Glass effects using expo-glass-effect.
• 🎬 Fullscreen Video: Supports background video playback through expo-video integration.
• ⚡ UI Thread Performance: All animations run on the native UI thread for consistent 60fps performance.
• 🤖 Cross-Platform: Functions identically on both iOS and Android operating systems.

See It In Action

How to Use It

1. Clone the component from Github.

git clone https://github.com/mahdidavoodi7/draggable-video-control.git

2. Navigate into the project directory and install the required packages.

cd expo-draggable-video-player
npm install

3. Start the development server to view the component on a simulator or physical device.

For iOS simulation:

npx expo run:ios

For Android emulation:

npx expo run:android

Related Resources

• React Native Reanimated – Animation library for React Native
• Expo Video – Video playback component for Expo
• React Native Gesture Handler – Native gesture system for React Native
• Expo Glass Effect – Glass morphism effects for Expo applications