The notification for audio playback remains on display even after playback has been completed

I am currently using [email protected] as my audio player. After closing the application, I noticed that while the audio stopped playing, the playback notification remained visible.

Below is the code snippet from my index.js file which sets up the track player:

const trackSetup = async () => await TrackPlayer.setupPlayer({
waitForBuffer: false}).then( async () => {
await TrackPlayer.updateOptions({
  // stoppingAppPausesPlayback: true,
  android: {
    appKilledPlaybackBehavior:
      AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
  },
  notificationCapabilities: [
    Capability.Play,
    Capability.Pause,
    Capability.JumpBackward,
    Capability.JumpForward,
    Capability.SeekTo,
  ],
  capabilities: [
    Capability.Play,
    Capability.Pause,
    Capability.JumpBackward,
    Capability.JumpForward,
    Capability.SeekTo,
  ],
  compactCapabilities: [Capability.Play, Capability.Pause],
});
console.log(AppState.currentState, 'Track Player Setup...');});

I would greatly appreciate any help or guidance in resolving this issue. Thank you in advance for your assistance.

javascriptandroidreact-nativenotificationsreact-native-track-player

Answer №1

AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification

This solution worked perfectly for me with the latest update (v4.0.1).

Maybe consider updating your package?

Also, make sure to add the following code snippet in the useEffect of your App.js:

useEffect(() => {
    return () => {
        TrackPlayer.reset();
    };
}, []);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

php split not functioning in javascript template

I have come across some previous discussions on the same topic. Below are the links to those posts: Javascript Template Engine Use with jQuery What is x-tmpl? I am attempting to integrate a php explode function into a javascript template. The plugin I ...

phpjavascriptjqueryjsontemplate-engine

How to dynamically insert a hyperlink inside a <td> element within a table using JavaScript

What is the best way to create a hyperlink in a <td> within a dynamic table? I want the first <td> to be a link that combines a URL with the cell value. This is how the dynamic table is created: for (var i = 0; i < riskData.length; i++) { ...

javascriptjquery

Setting up Django model form using jQuery and JavaScript

In my project, I am working with three different models: class Instances(models.Model): name_of_instances = models.CharField(max_length=255) url_of_instances=models.URLField(max_length=255,default='') def __str__(sel ...

javascriptjquerydjango

The design preview in Android Studio fails to showcase Material Design elements

I've created a basic CardView using androidx.cardview.widget.CardView https://i.sstatic.net/mmSlr.png Now, I'm attempting to switch to CardView based on com.google.android.material.card.MaterialCardView, but the preview mode doesn't show a ...

androidxmlandroid-studiomaterial-uiandroid-cardview

Numeric keyboard input would connect here for a seamless data entry experience

I successfully implemented my custom pin-code view using StarsPasswordView. class StarsPasswordView : LinearLayout { constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) { init(context, attrs) ...

androidkeyboard

What steps can I take to successfully integrate Boost into my React Native development environment on iOS?

In my current endeavor to launch a project using React Native version 0.73, I encountered an obstacle while executing pod install in the iOS directory, specifically related to the installation of Boost version 1.83.0. (node:66063) [DEP0040] DeprecationWarn ...

node.jsreact-nativenpmboostcocoapods

What is the process of converting Luxon DateTime format into a string or numerical representation?

After setting up a Luxon clock for my project, I am facing an issue while using a component to define the month number of the current date. import { DateTime } from 'luxon'; import React, { useEffect, useState } from 'react'; interface ...

javascriptreactjstypescriptnext.jsluxon

What is the importance of installing gulp with --save-dev instead of just --save?

According to the information provided on the official documentation site, https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md $ npm install --save-dev gulp In my experience, all npm modules are usually installed using $ npm install --sav ...

javascriptnode.jsnpmgulp

What steps are involved in importing remark-gfm into next.config.js?

I am interested in incorporating MDX into next.js with the remark-gfm plugin. After discovering the Next.js Docs on MDX, I decided to follow their guidelines and added an import statement. // next.config.js import remarkGfm from 'remark-gfm;' co ...

javascriptnext.jsmdxjsremarkjs

To effectively delete the <li> element using JavaScript, make sure to eliminate the associated array object as well

I am in the process of designing a compact landing page that will randomly select a city from user input to determine the next trip destination. When the user types in the city name into the input field, everything functions correctly - a new list element ...

javascriptarraysfunctionloops

Changing content of inline editable data table in Vuetify through a method

I am facing a challenge while attempting to update the value in my inline edit data table from a method. The issue lies in the fact that the item I pass is not getting updated. In my cancel method, I pass props.item to be updated. While props.item.iron pr ...

javascriptvue.jsvuetify.js

How to transfer data from an HTML form to PHP using AJAX

I've encountered an issue while working on a simple application that consists of one HTML file communicating with a PHP page using AJAX. Take a look at my index.html below: <!DOCTYPE html> <html><head> <meta charset="utf-8"> & ...

javascriptphpajaxjsoncordova

The concept of undefined functions and the use of dependency injection may not always align

Recently starting with AngularJs, I am honing my skills by developing a single page Todo Application. However, I have encountered an issue while trying to load a localStorage factory that I intend to use for this project. Currently, I am stuck on the error ...

javascriptangularjsundefined-function

Creating a sliding menu using React and Headless UI (with Tailwind CSS)

Currently, I'm in the process of developing a slide-over navigation bar or slide menu that features panels opening on top of each other (I'm still searching for the most accurate way to describe it). The main concept revolves around having a sli ...

javascriptreactjsnext.jstailwind-cssheadless-ui

Decoding a straight JSON array without any indexes

I'm at a loss trying to decode the contents of this JSON object. [ { "result": true, "response": "Successfully retrieved list of users within 10km radius" }, { "username": "elize", "photo": "http://www.embe ...

javaandroidjson

Transfer vertices into a texture and send it to the shader for processing

Finally found some time to experiment with shaders, but I hit a roadblock. My goal is to pass vertices to a shader and perform general-purpose computing on them. It seems like the gpgpu functionality is working fine because I can see a few pixels being sh ...

javascriptthree.jstexturesshader

The Bootstrap Datepicker is always set to display a date that is one day earlier than the selected date

I have encountered an issue with the Bootstrap date-picker where the selected date appears to be one day less when passed to the backend. For example, the date I select in the UI is 04-Apr-1997, but the date shown in the console is 1997-04-03T18:30:00.000Z ...

javascripthtmlangularbootstrap-4datepicker

Is it possible that jest is unable to catch the exception?

I have a simple function that looks like this: function foo({ platform }) { if (platform === 'all') { throw new Error('Platform value can only be android or ios'); } return `${platform}`; } After writing unit tests, the re ...

javascripttypescriptjestjs

How is it possible for React to function within the views directory?

In the directory structure of my project, I have a React application housed within the views folder. The root folder contains the model, controller, and views directories. Within the views folder, there is a React app. I am unsure of how to start both si ...

javascriptnode.jsreactjsmongodbexpress

Retrieve information from the selected row within a table by pressing the Enter key

I have a search box that dynamically populates a table. I am using arrow keys to navigate through the rows in the table. When I press the enter key, I want to retrieve the data from the selected row. For example, in the code snippet below, I am trying to ...

javascripthtmljquerycss