Hooks

RNTP ships four React hooks. All hooks subscribe to player events and re-render automatically.

usePlaybackState

Returns the current PlaybackState.

import { usePlaybackState, PlaybackState } from '@rntp/player';

function PlayerStatus() {
  const state = usePlaybackState();

  if (state === PlaybackState.Loading) return <ActivityIndicator />;
  if (state === PlaybackState.Error) return <Text>Playback error</Text>;

  return <Text>{state}</Text>;
}

useIsPlaying

Returns { playing: boolean }. Updates via IsPlayingChanged events.

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

function PlayPauseButton() {
  const { playing } = useIsPlaying();

  return (
    <Pressable onPress={() => playing ? TrackPlayer.pause() : TrackPlayer.play()}>
      <Icon name={playing ? 'pause' : 'play'} />
    </Pressable>
  );
}

useProgress

Returns { position, duration, buffered, cached } in seconds. Polls at a configurable interval.

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

function ProgressBar() {
  const { position, duration } = useProgress(); // default 1s interval

  return (
    <Slider
      value={position}
      maximumValue={duration}
      onSlidingComplete={(value) => TrackPlayer.seekTo(value)}
    />
  );
}

Custom update interval

const { position, duration } = useProgress(500); // update every 500ms

useActiveMediaItem

Returns the currently active MediaItem or null. Updates on track transitions and metadata changes.

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

function NowPlaying() {
  const track = useActiveMediaItem();

  if (!track) return null;

  return (
    <View>
      <Image source={{ uri: track.artworkUrl }} />
      <Text>{track.title}</Text>
      <Text>{track.artist}</Text>
    </View>
  );
}