Unable to skip to the next track - React-Native-Track-Player

Question

I am currently creating a podcast player feature for one of the apps I am developing. However I've hit a wall with this error which is to update the currentIndex of the array to the next one. This is the array i've created to test out the podcast plater

const [ episodes, setEpisodes ] = useState([
    {   
        id: 1,
        date: 'Today',
        title: 'Episode 10: Postcast 1',
        description: 'This is the podcast description',
        duration: '25 mins',
        image: require('../../../assets/images/podcast_image.jpg'),
        audio_url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
    },
    {
        id: 2,
        date: '10/11/2020',
        title: 'Episode 11: Postcast 2',
        description: 'This is the podcast description',
        duration: '25 mins',
        image: require('../../../assets/images/podcast_image.jpg'),
        audio_url: 'https://audio-previews.elements.envatousercontent.com/files/103682271/preview.mp3',
    },
    {
        id: 3,
        date: '10/11/2020',
        title: 'Episode 12: Postcast 3',
        description: 'This is the podcast description',
        duration: '25 mins',
        image: require('../../../assets/images/podcast_image.jpg'),
        audio_url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-16.mp3',
    }
]);

I have then passed the currentIndex to the next screen so it renders the correct podcast along with the episodes and podcast object.

  <TouchableOpacity onPress={() => navigation.navigate("PodcastPlayer", {
      currentIndex: index,
      podcast: podcast,
      episodes: episodes,
  })}>     

  var { currentIndex } = route.params;

This is how I've used it for the TrackPlayer

const trackPlayerInit = async () => {
    await TrackPlayer.setupPlayer();
    TrackPlayer.updateOptions({
        stopWithApp: true,
        notificationCapabilities: [
            TrackPlayer.CAPABILITY_PLAY,
            TrackPlayer.CAPABILITY_PAUSE,
            TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
            TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
            TrackPlayer.CAPABILITY_STOP
        ],
        capabilities: [
            TrackPlayer.CAPABILITY_PLAY,
            TrackPlayer.CAPABILITY_PAUSE,
            TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
            TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
            TrackPlayer.CAPABILITY_STOP
        ],
        compactCapabilities: [
            TrackPlayer.CAPABILITY_PLAY,
            TrackPlayer.CAPABILITY_PAUSE
        ]
    });
    // After the track player has been set up, we can add to our playlist
    await TrackPlayer.add({
        id: episodes[currentIndex].id,
        url: episodes[currentIndex].audio_url,
        type: 'default',
        title: episodes[currentIndex].title,
        album: 'My Album',
        artist: 'Track Artist',
        artwork: 'https://picsum.photos/100'
    });
    return true;
};

When I go to skip the track it does log the next track in the console, but it does not update on the actual screen so I am not sure, i have tried to put the currentIndex inside of an new state and update it through that so the screen would re-render once the next button has been clicked. But I've had no luck.

This is the function that is called when I click on the next track icon

  <TouchableOpacity style={styles.control} onPress={() => handleNextTrack()}>
       <Ionicons name='ios-skip-forward' size={30} color={Colours.type.dark_blue} />
  </TouchableOpacity>

  handleNextTrack = async() => {

    currentIndex + 1;

    console.log(currentIndex);

    // setNextEpisode(currentIndex);
    
    // get the id of the current track
    let trackId = await TrackPlayer.getCurrentTrack();      
    
    TrackPlayer.skip(trackId);    

    console.log(trackId);
}

Any help would be much appreciated!

Answer 1

Try this in your handleNextTrack function:

currentIndex = currentIndex + 1; // instead of just currentIndex + 1;