MCPcopy
hub / github.com/doublesymmetry/react-native-track-player

github.com/doublesymmetry/react-native-track-player @v5.6.0 sqlite

repository ↗ · DeepWiki ↗ · release v5.6.0 ↗
42 symbols 117 edges 33 files 0 documented · 0%
README

react-native-track-player

The premium audio player for React Native.

Built on the New Architecture with synchronous native calls — background playback, Android Auto, audio caching, preloading, and more.

[!IMPORTANT] Starting with V5, react-native-track-player is commercially licensed. Personal and educational use remains free; commercial use requires a paid license — see rntp.dev/pricing. V4 and earlier remain available under Apache-2.0 on the v4 branch.

npm version npm downloads License


Features

  • Simple TypeScript API — Clean, minimal API fully typed for React Native developers
  • New Architecture Native — Built on JSI with TurboModule support, no bridge overhead, no jitter
  • Background Playback — Audio continues when the app is backgrounded or screen is off
  • Android Auto — Full support for native car dashboard integration
  • Preloading — Background buffering of upcoming tracks for gapless-like playback
  • Audio Caching — Built-in caching to reduce bandwidth and enable offline playback
  • Remote Controls — Lock screen, notification controls, and headset support out of the box
  • React HooksusePlaybackState, useIsPlaying, useProgress, useActiveMediaItem, and more

Requirements

  • React Native 0.74 or later
  • New Architecture enabled (Fabric + TurboModules)

Installation

npm install @rntp/player

Then for iOS:

cd ios && pod install

Android links automatically.

Quick Start

import TrackPlayer from '@rntp/player';

// 1. Set up the player (call once at app startup, in the foreground on Android)
await TrackPlayer.setupPlayer({
  contentType: 'music',
  handleAudioBecomingNoisy: true,
  android: { wakeMode: 'network' },
});

// 2. Add tracks and play
await TrackPlayer.setMediaItems([
  {
    url: 'https://example.com/track.mp3',
    title: 'Track Title',
    artist: 'Artist Name',
    artwork: 'https://example.com/artwork.jpg',
  },
]);

TrackPlayer.play();
// 3. Use hooks in your UI
import { useIsPlaying, useProgress, useActiveMediaItem } from '@rntp/player';

function PlayerUI() {
  const { playing } = useIsPlaying();
  const { position, duration } = useProgress();
  const track = useActiveMediaItem();

  return (/* your player UI */);
}

Documentation

Full documentation, API reference, and guides are available at rntp.dev.

V5

V5 is a complete rewrite and is not backwards-compatible with V4.

Key improvements in V5: - Built on JSI — getProgress(), getQueue(), isPlaying() return synchronously - Full TurboModule and Fabric support - Rewritten Android and iOS native layers

License

Free for non-commercial use. Commercial use requires a license.

See license.txt for details or visit rntp.dev/pricing to purchase a commercial license.

For questions: team@doublesymmetry.com

Extension points exported contracts — how you extend this code

MiniPlayerProps (Interface)
(no doc)
example/src/components/MiniPlayer.tsx
LogEntry (Interface)
(no doc)
example/src/stores/eventLog.ts
EventLogState (Interface)
(no doc)
example/src/stores/eventLog.ts
DownloadedTrackState (Interface)
(no doc)
example/src/stores/downloadedTrack.ts
PlaybackSourceState (Interface)
(no doc)
example/src/stores/playbackSource.ts

Core symbols most depended-on inside this repo

cn
called by 9
example/src/lib/cn.ts
attr
called by 5
example/src/data/strongSongsFeed.ts
first
called by 4
example/src/data/strongSongsFeed.ts
pad
called by 3
example/src/lib/formatTime.ts
buildAlbum
called by 3
example/src/data/music.ts
format
called by 2
example/src/lib/formatTime.ts
formatTime
called by 2
example/src/lib/formatTime.ts
formatDuration
called by 2
example/src/lib/formatTime.ts

Shape

Function 34
Interface 8

Languages

TypeScript100%

Modules by API surface

example/src/App.tsx7 symbols
example/src/screens/SettingsScreen.tsx5 symbols
example/src/lib/formatTime.ts4 symbols
example/src/data/strongSongsFeed.ts4 symbols
example/src/screens/PlayerScreen.tsx3 symbols
example/src/stores/eventLog.ts2 symbols
example/src/data/music.ts2 symbols
example/src/contexts/StrongSongsFeedContext.tsx2 symbols
example/src/components/MiniPlayer.tsx2 symbols
example/src/stores/playbackSource.ts1 symbols
example/src/stores/downloadedTrack.ts1 symbols
example/src/services/TaskService.ts1 symbols

Dependencies from manifests, versioned

@babel/core7.25.2 · 1×
@babel/preset-env7.25.3 · 1×
@babel/runtime7.25.0 · 1×
@react-native-community/cli20.0.0 · 1×
@react-native-community/cli-platform-android20.0.0 · 1×
@react-native-community/cli-platform-ios20.0.0 · 1×
@react-native/babel-preset0.83.9 · 1×
@react-native/eslint-config0.83.9 · 1×
@react-native/metro-config0.83.9 · 1×
@react-native/typescript-config0.83.9 · 1×
@react-navigation/bottom-tabs6.6.1 · 1×
@react-navigation/native6.1.18 · 1×

For agents

$ claude mcp add react-native-track-player \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact