react-native-track-player icon indicating copy to clipboard operation
react-native-track-player copied to clipboard

feat(android): add configurable notification click behavior

Open zeevenn opened this issue 6 months ago • 4 comments

Notification Click Behavior Feature

This feature adds configurable notification click behavior to react-native-track-player for Android.

Problem

Previously, when users clicked on the notification from react-native-track-player, the app would always launch with a hardcoded URI (trackplayer://notification.click) that allows the app to identify that it was opened from a notification click. This behavior was inflexible and didn't provide options for different use cases.

https://github.com/doublesymmetry/react-native-track-player/issues/2433

And in expo case, expo-router will handle the deep link and navigate to an unmatched route. User must add a notification.click.tsx to redirect certain page. But sometimes user just want to open app when click notification other than navigate to certain page.

Solution

Added a new notificationClickBehavior configuration option under android options that allows developers to:

  1. Disable URI data: Launch app without any URI information
  2. Use custom URI: Replace the default URI with a custom one
  3. Use custom action: Replace the default action with a custom one
  4. Complete customization: Combine custom URI and action

zeevenn avatar Jul 06 '25 04:07 zeevenn

@jspizziri Can you take a look, thanks. I think this is very helpful.

zeevenn avatar Jul 07 '25 13:07 zeevenn

From this Expo page, they described how to handle incoming native links.

So, I implemented the code below in app/+native-intent.tsx file and it worked.

import { appScheme } from "@/features-users/auth/utils";

/**
 * Handles deep link redirection for your app, including third-party schemes like TrackPlayer notifications.
 * 
 * @param path - The incoming URL or path to process
 * @param initial - Whether this is the initial URL (cold start) or a hot-start URL
 * @returns A string representing the path to redirect to within your app
 */
export function redirectSystemPath( { path, initial }: { path: string; initial: boolean } ): string {
  try {
    console.log( "redirectSystemPath called with:", { path, initial } );

    // Construct a URL object. The base is your app scheme in case the path is relative.
    const url = new URL( path, `${appScheme}://` );

    // Handle TrackPlayer notification click
    // trackplayer://notification.click → url.host === "notification.click"
    if ( url.host === "notification.click" ) {
      console.log( "Redirecting to /player from TrackPlayer notification" );
      return "/player";
    }

    // No special rule matched → return the original path for normal routing
    console.log( "No redirection rule matched, returning original path:", path );
    return path;
  } catch ( err ) {
    // If parsing fails, log the error and redirect safely to home
    console.warn( "Error parsing URL in redirectSystemPath:", { path, initial, error: err } );
    return "/";
  }
}

Perhaps, someone can add this to the examples in TrackPlayer page.

farooqdotdev avatar Sep 09 '25 21:09 farooqdotdev

It seems will redirect to a certain route. I will try it later.

zeevenn avatar Sep 10 '25 07:09 zeevenn

I tried it again, and +native-intent.tsx only redirects the route, but I just want to call the app. I will resolve these conflicts later so that I can merge this feature.

zeevenn avatar Sep 12 '25 06:09 zeevenn