Apple Music Sheet UI Demo with Expo

This project demonstrates an implementation of the Apple Music player UI in React Native using Expo, with a focus on replicating the smooth sheet transitions and scaling animations.

Features

🎵 Full-screen music player modal with gesture controls
🔄 Smooth scaling animations of the root content
👆 Interactive pan gesture handling
📱 iOS-style sheet presentation
🎨 Dynamic border radius animations
🌟 Visual audio visualizer
💫 Haptic feedback on modal interactions
🖼️ Blur effects and backdrop filters
📱 Sticky mini-player navigation
📋 Apple Music style track listing
⚡ Gesture handling with drag thresholds
🔄 Horizontal swipe to dismiss

Tech Stack

Expo - React Native development platform
Expo Router - File-based routing
React Native Reanimated - Smooth animations
React Native Gesture Handler - Native-driven gesture handling

Getting Started

Install dependencies:
```
npm install
```
Start the development server:
```
npx expo start
```
Open in iOS Simulator or Android Emulator:
- Press i for iOS
- Press a for Android

Implementation Details

The project showcases several key features of modern React Native development:

Shared element transitions between mini and full player
Gesture-based interactions with multi-axis support
Context-based animation state management
Worklet-based animations for optimal performance

Known Issues

Horizontal drag gesture conflicts with content scrolling when the modal is partially scrolled, causing flickering. This needs to be addressed by properly managing gesture priorities and scroll state.

Project Structure

project-root/
├── app/
│   ├── (tabs)/
│   │   ├── search/            # Search and library screens
│   │   │   ├── _layout.tsx
│   │   │   ├── library.tsx
│   │   │   ├── new.tsx
│   │   │   └── radio.tsx
│   │   ├── music/             # Music player routes
│   │   │   ├── [id].tsx
│   │   │   └── _layout.tsx
│   │   └── _layout.tsx        # Tab navigation layout
├── components/
│   ├── navigation/
│   │   └── TabBarIcon.tsx     # Tab bar icons
│   ├── Overlay/               # Sheet UI components
│   │   ├── OverlayContext.tsx
│   │   ├── OverlayProvider.tsx
│   │   └── ThemedView.tsx
│   └── ThemedText.tsx
├── contexts/
│   ├── AudioContext.tsx       # Audio playback state
│   └── RootScaleContext.tsx   # Scale animation state
├── constants/
│   └── Colors.ts             # Theme colors
└── hooks/                    # Custom React hooks
    ├── useColorScheme.ts
    ├── useThemeColor.ts
    └── useColorScheme.web.ts

Contributing

Feel free to contribute to this project by:

Forking the repository
Creating a feature branch
Submitting a pull request

License

This project is open source and available under the MIT License.

tntsoft/apple-music-sheet-ui