Announcing react-native-track-player 2.0

We’ve recently released react-native-track-player v2.0.0! A long time in the making, this release ships some big (and breaking) changes to how users interact with the library. One of these big changes is around how the queue is managed, setting the foundation for being able to build some of the most highly requested features: shuffle playback, performant queue re-arrangement and many other things!

GitHub - DoubleSymmetry/react-native-track-player: A fully fledged audio module created for music…

Full Typescript Support!

The library is now fully built with TypesScript! We expect all projects to benefit from this change if you’re using a modern JS IDE and will help everyone better use our API’s and documentation.

Import Updates

As part of the migration to TypeScript we’ve reorganized the imports to be clear and separated by concern. The main module can still be imported as before via import TrackPlayer from 'react-native-track-player' but Events, State, etc can be imported via import { Event } from 'react-native-track-player .

Hooks for Events, State and Progress Changes

We’ve shipped three hooks to help you build your ReactNative applications! We encourage everyone to use these hooks instead of relying on the TrackPlayer.addEventListener() methods.

useProgress(updateInterval?: number)

Polls for track progress for the given interval (in miliseconds). Use this for keeping track of playback progress and displaying it to your user.
Note: we have removed ProgressComponent

usePlaybackState()

Keeps track of the current playback state the player is in. Use this for detecting when the track is buffering, playing, is paused, etc.

useTrackPlayerEvents(events: Event[], handler: Handler)

Subscribes to the given events and calls your handler when those events are fired. Useful for updating your UI based on events or triggering functionality based on remote events. Excerpt from our example project:

Figure 1: Example of useTrackPayerEvents hook

Changes to Queue Management

The biggest change to the library happened about how we internally keep track of the queue, how users can modify it (add/remove items) and how keep track of the queue state.

Up to v2 all methods related to queue or item tracking relied on each queue item having a unique ID used to keep track of it. In v2 all methods work or return indexes — essentially the index of that item in the queue.

While this presents a breaking change in the library, it was a necessary change. Not only to fix one big source of bugs in the library but also to allow us to build performant API’s around queue management in the future.

Figure 2: Methods updated to operate on index

Short Migration Guide

1. Update to latest version via: yarn add react-native-track-player
2. Update any imports to new structure: i.e. STATE_PLAYING to State.Playing
3. Update any RNTP methods to pass in or expect a track index (Figure 2)
4. Replace any uses of ProgressComponent with useProgress hook
5. Profit! 💰

Photo by Namroud Gorguis on Unsplash