rnblocks

Music Player

A music player with volume adjustment and sharing options

Click Launch Snack to preview on iOS, Android, or Web. To run it on your own device, scan the QR code under the My Device tab — you'll need the free Expo Go app installed on your phone.

Loading preview…

Customize this template

Overview

A full-featured music player with album artwork, playback controls, volume adjustment, and gesture-driven interactions. The screen manages track selection, play/pause state, progress scrubbing, and shuffle/repeat modes. It includes haptic feedback on interactions and animates UI elements using react-native-reanimated for 60fps consistency.

You get a self-contained component that handles local playback state. The data model uses a Track interface with metadata (title, artist, duration, imageUrl, accentColor), and the player maintains timeline position independently of actual audio. Hook this into your audio library by wiring the play/pause handlers to your player API.

Use cases

Music streaming apps — the standard player screen for services like Spotify or Apple Music. Drop it into your tab navigator or modal flow.

Podcast players — adapt the track data shape to podcast episodes. The progress scrubbing and time formatting work identically.

DJ or mixing apps — the volume slider and gesture handling pattern transfers directly to deck control interfaces.

Workout or meditation apps — use the play controls and progress bar as the core UX for guided sessions or ambient soundscapes.