React-native-track-player: Can't use player after TrackPlayer.stop()

[mnlbox]

Hi,
When I click on Stop button on my app Play button and TrackPlayer.play() not working. I also try add music again with click on Add to Play but still it's not working. Please help me to fix this.
I need a simple player with this button:

• [ ] Add music to list
• [ ] PLAY
• [x] PAUSE
• [ ] STOP
• [x] SeekTo

This is my codes

I have this page:

import React from 'react';
import {StatusBar, Text, View} from 'react-native';
import styles from '../../styles/styles';
import TrackPlayer, {
    CAPABILITY_PAUSE, CAPABILITY_PLAY, CAPABILITY_SEEK_TO,
    CAPABILITY_STOP
} from 'react-native-track-player';
import PlayerProgressBar from '../../components/playerProgressBar';
import {Button} from "native-base";

export default class ContactUs extends React.Component {
    async componentDidMount() {
        await TrackPlayer.setupPlayer({});
        TrackPlayer.updateOptions({
            capabilities: [CAPABILITY_PLAY, CAPABILITY_PAUSE, CAPABILITY_STOP, CAPABILITY_SEEK_TO],
            compactCapabilities: [CAPABILITY_PLAY, CAPABILITY_PAUSE, CAPABILITY_STOP, CAPABILITY_SEEK_TO],
            stopWithApp: true
        });
        await TrackPlayer.add({
            id: '1',
            url: 'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3', // just for test!
            title: 'Despacito',
            artist: 'Luis Fonsi Feat. Daddy Yankee',
            artwork: 'https://images-eu.ssl-images-amazon.com/images/I/61JH2ggghmL._AC_US160_.jpg'
        });
        // TrackPlayer.play();
    }

    async add() {
        await TrackPlayer.setupPlayer({});
        TrackPlayer.updateOptions({
            capabilities: [CAPABILITY_PLAY, CAPABILITY_PAUSE, CAPABILITY_STOP, CAPABILITY_SEEK_TO],
            compactCapabilities: [CAPABILITY_PLAY, CAPABILITY_PAUSE, CAPABILITY_STOP, CAPABILITY_SEEK_TO],
            stopWithApp: true
        });

        await TrackPlayer.add({
            id: '2',
            url: 'http://tegos.kz/new/mp3_full/Imagine_Dragons_and_Khalid_-_Thunder_Young_Dumb_and_Broke.mp3', // just for test!
            title: 'Despaasdasdcito',
            artist: 'Luis Fonsi Feat. Dadasdasddy Yankee',
            artwork: 'https://images-eu.ssl-images-amazon.com/images/I/61JH2ggghmL._AC_US160_.jpg'
        });
    }
    render() {
        return <View style={{ padding: 10 }}>
            <Button info onPress={() => { TrackPlayer.play() }}>
                <Text>Play</Text>
            </Button>
            <Button warning onPress={() => TrackPlayer.pause()}>
                <Text>Pause</Text>
            </Button>
            <Button success onPress={() => this.add()}>
                <Text>Add to Play</Text>
            </Button>
            <Button danger onPress={() => TrackPlayer.stop()}>
                <Text>Stop</Text>
            </Button>
            <PlayerProgressBar />
        </View>;
    }
}

And this is my player-handler.js:

import TrackPlayer from "react-native-track-player";

module.exports = async (data) => {
    if(data.type === 'playback-state') {
        // Update the UI with the new state
    } else if(data.type === 'remote-play') {
        TrackPlayer.play();
    } else if(data.type === 'remote-pause') {
        TrackPlayer.pause();
    } else if(data.type === 'remote-stop') {
        TrackPlayer.stop();
    } else if(data.type === 'remote-seek') {
        console.warn(data.position);
        TrackPlayer.seekTo(data.position);
    }
};

And this is my playerProgressBar.js:

import React, { Component } from 'react';
import TrackPlayer from "react-native-track-player";
import {Text, View} from "react-native";
import {observer} from "mobx-react/native";
import orientationStore from "../stores/orientationStore";
import {Slider} from "react-native-elements";

@observer
export default class PlayerProgressBar extends TrackPlayer.ProgressComponent {
    render() {
        return (
            <View>
                <Text>{this.state.position} / {this.state.duration}</Text>
                <Slider
                    value={this.state.position}
                    minimumValue={0}
                    maximumValue={this.state.duration}
                    step={1}
                    style={{width: orientationStore.WIDTH - 20}}
                    onValueChange={(value) => TrackPlayer.seekTo(value)} />
            </View>
        );
    }
}

@Guichaguri @dcvz

[Guichaguri]

Android, iOS or Windows?

[mnlbox]

Android 6 on a nexus5 emulator.

[hqdai]

I got same issue, after stop, update track in queue then TrackPlayer.play() will not work. (Android). iOS is ok

[mnlbox]

@hqdai This is an old issue and still exist. You can take a look at https://github.com/react-native-community/react-native-video and use that since this issue not fix. It's also support sound stream playing, ...

[hqdai]

Thanks alot @mnlbox m

[jdonzallaz]

I'm having the same issue. Is there any progress on this one?
I tested with Samsung GS7 and Nexus 5 real devices. After stop(), the state is on STATE_NONE, with the tracks still in the queue.

[Guichaguri]

@jdonzallaz

• pause() transitions to STATE_PAUSED and keep the current position as is
• stop() transitions to STATE_NONE and resets the current position
• reset() actually resets the queue and transitions to STATE_NONE. It should be equivalent as destroying the player and creating a new one.

What you need is the reset() function. This should be the expected behavior in the dev branch.

[jdonzallaz]

Actually the "tracks still in the queue" is my expected behavior.
Problem is, I expected that when using play() after a stop(), the lastest track would start again (from the beginning).
Now, using play() do nothing after a stop().

[Guichaguri]

Are you using the dev branch?

[jdonzallaz]

Yes, I npm install directly from github:
"react-native-track-player": "git+https://[email protected]/react-native-kit/react-native-track-player.git#dev"

[shiroze]

still face problem like this, play after stop didn't play the track / music

[GH974]

hi, i have this issue in ios after stop, can't play. I a have got this message.
Given track ID was not found in queue.

[nishanBende]

@GH974 I am also getting the same error message.
@Guichaguri I put a console.log on await TrackPlayer.getQueue() of before and after calling stop() and noticed that queue gets empty after calling the stop method.
Stop is resetting the queue.
Is this an expected behaviour?

[nishanBende]

@Guichaguri This is the comment I found inside QueuedAudioPlayer.swift file.
It indeed clears the queue!

 /**
     Stops the player and clears the queue.
     */
    public override func stop() {
        super.stop()
    }