Quick Start

Call setupPlayer once when your app starts — in your root component or entry point.

import TrackPlayer from '@rntp/player';

TrackPlayer.setupPlayer({
  contentType: 'music',
});

By default, the system handles remote control events natively — you do not need this for basic playback. Register a session when you want playback logic that keeps running while the app is in the background, like saving progress or reacting to errors. It works the same on every platform. See Events.

import TrackPlayer, { Event } from '@rntp/player';

// index.js — before AppRegistry.registerComponent
TrackPlayer.registerPlaybackSession(() => {
  TrackPlayer.addEventListener(Event.PlaybackError, ({ code }) => {
    if (code === 'network') TrackPlayer.retry();
  });
});

Set which commands appear on the lock screen, notification, and native media session (including Android Auto). This configures native handling by default — not your JS bundle. In-car surfaces do not run your JS listeners; see Remote controls in-car.

import { PlayerCommand } from '@rntp/player';

TrackPlayer.setCommands({
  capabilities: [
    PlayerCommand.PlayPause,
    PlayerCommand.Next,
    PlayerCommand.Previous,
  ],
});

TrackPlayer.setMediaItems([
  {
    mediaId: 'track-1',
    url: 'https://example.com/audio.mp3',
    title: 'My Track',
    artist: 'Artist Name',
    artworkUrl: 'https://example.com/artwork.jpg',
  },
]);

TrackPlayer.play();

import { useIsPlaying, useProgress } from '@rntp/player';

function PlayerControls() {
  const playing = useIsPlaying();
  const { position, duration } = useProgress();

  return (
    <>
      <Slider value={position} maximumValue={duration} />
      <Button onPress={() => playing ? TrackPlayer.pause() : TrackPlayer.play()}>
        {playing ? 'Pause' : 'Play'}
      </Button>
    </>
  );
}