react-native-nitro-player 0.3.0-alpha.7 → 0.3.0-alpha.9

package/README.md

@@ -171,6 +171,21 @@ Automatically polls for audio device changes every 2 seconds.
 
 - `devices: TAudioDevice[]` - Array of available audio devices
 
+### `useNowPlaying()`
+
+Returns the complete current player state (same as `TrackPlayer.getState()`). This hook provides all player information in a single object and automatically updates when the player state changes.
+
+**Returns:**
+
+- `PlayerState` object containing:
+  - `currentTrack: TrackItem | null` - The current track being played, or `null` if no track is playing
+  - `totalDuration: number` - Total duration of the current track in seconds
+  - `currentState: TrackPlayerState` - Current playback state (`'playing'`, `'paused'`, or `'stopped'`)
+  - `currentPlaylistId: string | null` - ID of the currently loaded playlist, or `null` if no playlist is loaded
+  - `currentIndex: number` - Index of the current track in the playlist (-1 if no track is playing)
+
+**Note:** This hook is equivalent to calling `TrackPlayer.getState()` but provides reactive updates. It listens to track changes and playback state changes to update automatically. Also dont rely on progress from this hook
+
 ## Audio Device APIs
 
 ### `AudioDevices` (Android only)
@@ -347,6 +362,9 @@ function PlayerComponent() {
   // Check Android Auto connection
   const { isConnected } = useAndroidAutoConnection()
 
+  // Get complete player state (alternative to individual hooks)
+  const nowPlaying = useNowPlaying()
+
   return (
     <View>
       {track && (
@@ -354,6 +372,8 @@ function PlayerComponent() {
       )}
       <Text>State: {state}</Text>
       <Text>Progress: {position} / {totalDuration}</Text>
+      {/* Or use useNowPlaying for all state at once */}
+      <Text>Now Playing State: {nowPlaying.currentState}</Text>
     </View>
   )
 }

package/lib/hooks/callbackManager.d.ts

@@ -0,0 +1,28 @@
+import type { TrackItem, TrackPlayerState, Reason } from '../types/PlayerQueue';
+type PlaybackStateCallback = (state: TrackPlayerState, reason?: Reason) => void;
+type TrackChangeCallback = (track: TrackItem, reason?: Reason) => void;
+/**
+ * Internal subscription manager that allows multiple hooks to subscribe
+ * to a single native callback. This solves the problem where registering
+ * a new callback overwrites the previous one.
+ */
+declare class CallbackSubscriptionManager {
+    private playbackStateSubscribers;
+    private trackChangeSubscribers;
+    private isPlaybackStateRegistered;
+    private isTrackChangeRegistered;
+    /**
+     * Subscribe to playback state changes
+     * @returns Unsubscribe function
+     */
+    subscribeToPlaybackState(callback: PlaybackStateCallback): () => void;
+    /**
+     * Subscribe to track changes
+     * @returns Unsubscribe function
+     */
+    subscribeToTrackChange(callback: TrackChangeCallback): () => void;
+    private ensurePlaybackStateRegistered;
+    private ensureTrackChangeRegistered;
+}
+export declare const callbackManager: CallbackSubscriptionManager;
+export {};

package/lib/hooks/callbackManager.js

@@ -0,0 +1,76 @@
+import { TrackPlayer } from '../index';
+/**
+ * Internal subscription manager that allows multiple hooks to subscribe
+ * to a single native callback. This solves the problem where registering
+ * a new callback overwrites the previous one.
+ */
+class CallbackSubscriptionManager {
+    playbackStateSubscribers = new Set();
+    trackChangeSubscribers = new Set();
+    isPlaybackStateRegistered = false;
+    isTrackChangeRegistered = false;
+    /**
+     * Subscribe to playback state changes
+     * @returns Unsubscribe function
+     */
+    subscribeToPlaybackState(callback) {
+        this.playbackStateSubscribers.add(callback);
+        this.ensurePlaybackStateRegistered();
+        return () => {
+            this.playbackStateSubscribers.delete(callback);
+        };
+    }
+    /**
+     * Subscribe to track changes
+     * @returns Unsubscribe function
+     */
+    subscribeToTrackChange(callback) {
+        this.trackChangeSubscribers.add(callback);
+        this.ensureTrackChangeRegistered();
+        return () => {
+            this.trackChangeSubscribers.delete(callback);
+        };
+    }
+    ensurePlaybackStateRegistered() {
+        if (this.isPlaybackStateRegistered)
+            return;
+        try {
+            TrackPlayer.onPlaybackStateChange((state, reason) => {
+                this.playbackStateSubscribers.forEach((subscriber) => {
+                    try {
+                        subscriber(state, reason);
+                    }
+                    catch (error) {
+                        console.error('[CallbackManager] Error in playback state subscriber:', error);
+                    }
+                });
+            });
+            this.isPlaybackStateRegistered = true;
+        }
+        catch (error) {
+            console.error('[CallbackManager] Failed to register playback state callback:', error);
+        }
+    }
+    ensureTrackChangeRegistered() {
+        if (this.isTrackChangeRegistered)
+            return;
+        try {
+            TrackPlayer.onChangeTrack((track, reason) => {
+                this.trackChangeSubscribers.forEach((subscriber) => {
+                    try {
+                        subscriber(track, reason);
+                    }
+                    catch (error) {
+                        console.error('[CallbackManager] Error in track change subscriber:', error);
+                    }
+                });
+            });
+            this.isTrackChangeRegistered = true;
+        }
+        catch (error) {
+            console.error('[CallbackManager] Failed to register track change callback:', error);
+        }
+    }
+}
+// Export singleton instance
+export const callbackManager = new CallbackSubscriptionManager();

package/lib/hooks/index.d.ts

@@ -1,6 +1,9 @@
 export { useOnChangeTrack } from './useOnChangeTrack';
+export type { TrackChangeResult } from './useOnChangeTrack';
 export { useOnPlaybackStateChange } from './useOnPlaybackStateChange';
+export type { PlaybackStateResult } from './useOnPlaybackStateChange';
 export { useOnSeek } from './useOnSeek';
 export { useOnPlaybackProgressChange } from './useOnPlaybackProgressChange';
 export { useAndroidAutoConnection } from './useAndroidAutoConnection';
 export { useAudioDevices } from './useAudioDevices';
+export { useNowPlaying } from './useNowPlaying';

package/lib/hooks/index.js

@@ -4,3 +4,4 @@ export { useOnSeek } from './useOnSeek';
 export { useOnPlaybackProgressChange } from './useOnPlaybackProgressChange';
 export { useAndroidAutoConnection } from './useAndroidAutoConnection';
 export { useAudioDevices } from './useAudioDevices';
+export { useNowPlaying } from './useNowPlaying';

package/lib/hooks/useNowPlaying.d.ts

@@ -0,0 +1,36 @@
+import type { PlayerState } from '../types/PlayerQueue';
+/**
+ * Hook to get the current player state (same as TrackPlayer.getState())
+ *
+ * This hook provides all player state information including:
+ * - Current track
+ * - Current position and duration
+ * - Playback state (playing, paused, stopped)
+ * - Current playlist ID
+ * - Current track index
+ *
+ * The hook uses native callbacks for immediate updates when state changes.
+ * Multiple components can use this hook simultaneously.
+ *
+ * @returns PlayerState object with all current player information
+ *
+ * @example
+ * ```tsx
+ * function PlayerComponent() {
+ *   const state = useNowPlaying()
+ *
+ *   return (
+ *     <View>
+ *       {state.currentTrack && (
+ *         <Text>Now Playing: {state.currentTrack.title}</Text>
+ *       )}
+ *       <Text>Position: {state.currentPosition} / {state.totalDuration}</Text>
+ *       <Text>State: {state.currentState}</Text>
+ *       <Text>Playlist: {state.currentPlaylistId || 'None'}</Text>
+ *       <Text>Index: {state.currentIndex}</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+export declare function useNowPlaying(): PlayerState;

package/lib/hooks/useNowPlaying.js

@@ -0,0 +1,87 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { TrackPlayer } from '../index';
+import { callbackManager } from './callbackManager';
+const DEFAULT_STATE = {
+    currentTrack: null,
+    currentPosition: 0,
+    totalDuration: 0,
+    currentState: 'stopped',
+    currentPlaylistId: null,
+    currentIndex: -1,
+};
+/**
+ * Hook to get the current player state (same as TrackPlayer.getState())
+ *
+ * This hook provides all player state information including:
+ * - Current track
+ * - Current position and duration
+ * - Playback state (playing, paused, stopped)
+ * - Current playlist ID
+ * - Current track index
+ *
+ * The hook uses native callbacks for immediate updates when state changes.
+ * Multiple components can use this hook simultaneously.
+ *
+ * @returns PlayerState object with all current player information
+ *
+ * @example
+ * ```tsx
+ * function PlayerComponent() {
+ *   const state = useNowPlaying()
+ *
+ *   return (
+ *     <View>
+ *       {state.currentTrack && (
+ *         <Text>Now Playing: {state.currentTrack.title}</Text>
+ *       )}
+ *       <Text>Position: {state.currentPosition} / {state.totalDuration}</Text>
+ *       <Text>State: {state.currentState}</Text>
+ *       <Text>Playlist: {state.currentPlaylistId || 'None'}</Text>
+ *       <Text>Index: {state.currentIndex}</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+export function useNowPlaying() {
+    const [state, setState] = useState(DEFAULT_STATE);
+    const isMounted = useRef(true);
+    const updateState = useCallback(() => {
+        if (!isMounted.current)
+            return;
+        try {
+            const newState = TrackPlayer.getState();
+            setState(newState);
+        }
+        catch (error) {
+            console.error('[useNowPlaying] Error updating player state:', error);
+        }
+    }, []);
+    // Initialize with current state
+    useEffect(() => {
+        isMounted.current = true;
+        updateState();
+        return () => {
+            isMounted.current = false;
+        };
+    }, [updateState]);
+    // Subscribe to track changes
+    useEffect(() => {
+        const unsubscribe = callbackManager.subscribeToTrackChange(() => {
+            updateState();
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [updateState]);
+    // Subscribe to playback state changes
+    useEffect(() => {
+        const unsubscribe = callbackManager.subscribeToPlaybackState(() => {
+            updateState();
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [updateState]);
+    return state;
+}

package/lib/hooks/useOnChangeTrack.d.ts

@@ -1,9 +1,36 @@
 import type { TrackItem, Reason } from '../types/PlayerQueue';
+export interface TrackChangeResult {
+    track: TrackItem | null;
+    reason: Reason | undefined;
+    isReady: boolean;
+}
 /**
- * Hook to get the current track and track change reason
- * @returns Object with current track and reason, or undefined if no track is playing
+ * Hook to subscribe to track changes.
+ *
+ * This hook provides real-time track change updates using native callbacks.
+ * Multiple components can use this hook simultaneously without interfering
+ * with each other.
+ *
+ * @returns Object with:
+ *   - track: Current track or null if no track is playing
+ *   - reason: Reason for the last track change
+ *   - isReady: Whether the initial state has been loaded
+ *
+ * @example
+ * ```tsx
+ * function NowPlaying() {
+ *   const { track, reason, isReady } = useOnChangeTrack()
+ *
+ *   if (!isReady) return <Text>Loading...</Text>
+ *   if (!track) return <Text>No track playing</Text>
+ *
+ *   return (
+ *     <View>
+ *       <Text>{track.title}</Text>
+ *       <Text>{track.artist}</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
  */
-export declare function useOnChangeTrack(): {
-    track: TrackItem | undefined;
-    reason: Reason | undefined;
-};
+export declare function useOnChangeTrack(): TrackChangeResult;

package/lib/hooks/useOnChangeTrack.js

@@ -1,17 +1,73 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { TrackPlayer } from '../index';
+import { callbackManager } from './callbackManager';
 /**
- * Hook to get the current track and track change reason
- * @returns Object with current track and reason, or undefined if no track is playing
+ * Hook to subscribe to track changes.
+ *
+ * This hook provides real-time track change updates using native callbacks.
+ * Multiple components can use this hook simultaneously without interfering
+ * with each other.
+ *
+ * @returns Object with:
+ *   - track: Current track or null if no track is playing
+ *   - reason: Reason for the last track change
+ *   - isReady: Whether the initial state has been loaded
+ *
+ * @example
+ * ```tsx
+ * function NowPlaying() {
+ *   const { track, reason, isReady } = useOnChangeTrack()
+ *
+ *   if (!isReady) return <Text>Loading...</Text>
+ *   if (!track) return <Text>No track playing</Text>
+ *
+ *   return (
+ *     <View>
+ *       <Text>{track.title}</Text>
+ *       <Text>{track.artist}</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
  */
 export function useOnChangeTrack() {
-    const [track, setTrack] = useState(undefined);
+    const [track, setTrack] = useState(null);
     const [reason, setReason] = useState(undefined);
+    const [isReady, setIsReady] = useState(false);
+    const isMounted = useRef(true);
+    // Initialize with current track from the player
     useEffect(() => {
-        TrackPlayer.onChangeTrack((newTrack, newReason) => {
-            setTrack(newTrack);
-            setReason(newReason);
-        });
+        isMounted.current = true;
+        try {
+            const playerState = TrackPlayer.getState();
+            if (isMounted.current) {
+                setTrack(playerState.currentTrack);
+                setIsReady(true);
+            }
+        }
+        catch (error) {
+            console.error('[useOnChangeTrack] Failed to get initial state:', error);
+            if (isMounted.current) {
+                setTrack(null);
+                setIsReady(true);
+            }
+        }
+        return () => {
+            isMounted.current = false;
+        };
     }, []);
-    return { track, reason };
+    // Subscribe to track changes
+    useEffect(() => {
+        const handleTrackChange = (newTrack, newReason) => {
+            if (isMounted.current) {
+                setTrack(newTrack);
+                setReason(newReason);
+            }
+        };
+        const unsubscribe = callbackManager.subscribeToTrackChange(handleTrackChange);
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+    return { track, reason, isReady };
 }

package/lib/hooks/useOnPlaybackStateChange.d.ts

@@ -1,9 +1,35 @@
 import type { TrackPlayerState, Reason } from '../types/PlayerQueue';
+export interface PlaybackStateResult {
+    state: TrackPlayerState;
+    reason: Reason | undefined;
+    isReady: boolean;
+}
 /**
- * Hook to get the current playback state and reason
- * @returns Object with current playback state and reason
+ * Hook to subscribe to playback state changes.
+ *
+ * This hook provides real-time playback state updates using native callbacks.
+ * Multiple components can use this hook simultaneously without interfering
+ * with each other.
+ *
+ * @returns Object with:
+ *   - state: Current playback state ('playing' | 'paused' | 'stopped')
+ *   - reason: Reason for the last state change
+ *   - isReady: Whether the initial state has been loaded
+ *
+ * @example
+ * ```tsx
+ * function PlaybackIndicator() {
+ *   const { state, reason, isReady } = useOnPlaybackStateChange()
+ *
+ *   if (!isReady) return <Text>Loading...</Text>
+ *
+ *   return (
+ *     <View>
+ *       <Text>State: {state}</Text>
+ *       {reason && <Text>Reason: {reason}</Text>}
+ *     </View>
+ *   )
+ * }
+ * ```
  */
-export declare function useOnPlaybackStateChange(): {
-    state: TrackPlayerState | undefined;
-    reason: Reason | undefined;
-};
+export declare function useOnPlaybackStateChange(): PlaybackStateResult;

package/lib/hooks/useOnPlaybackStateChange.js

@@ -1,17 +1,73 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { TrackPlayer } from '../index';
+import { callbackManager } from './callbackManager';
 /**
- * Hook to get the current playback state and reason
- * @returns Object with current playback state and reason
+ * Hook to subscribe to playback state changes.
+ *
+ * This hook provides real-time playback state updates using native callbacks.
+ * Multiple components can use this hook simultaneously without interfering
+ * with each other.
+ *
+ * @returns Object with:
+ *   - state: Current playback state ('playing' | 'paused' | 'stopped')
+ *   - reason: Reason for the last state change
+ *   - isReady: Whether the initial state has been loaded
+ *
+ * @example
+ * ```tsx
+ * function PlaybackIndicator() {
+ *   const { state, reason, isReady } = useOnPlaybackStateChange()
+ *
+ *   if (!isReady) return <Text>Loading...</Text>
+ *
+ *   return (
+ *     <View>
+ *       <Text>State: {state}</Text>
+ *       {reason && <Text>Reason: {reason}</Text>}
+ *     </View>
+ *   )
+ * }
+ * ```
  */
 export function useOnPlaybackStateChange() {
-    const [state, setState] = useState(undefined);
+    const [state, setState] = useState('stopped');
     const [reason, setReason] = useState(undefined);
+    const [isReady, setIsReady] = useState(false);
+    const isMounted = useRef(true);
+    // Initialize with current state from the player
     useEffect(() => {
-        TrackPlayer.onPlaybackStateChange((newState, newReason) => {
-            setState(newState);
-            setReason(newReason);
-        });
+        isMounted.current = true;
+        // Get initial state synchronously
+        try {
+            const playerState = TrackPlayer.getState();
+            if (isMounted.current) {
+                setState(playerState.currentState);
+                setIsReady(true);
+            }
+        }
+        catch (error) {
+            console.error('[useOnPlaybackStateChange] Failed to get initial state:', error);
+            if (isMounted.current) {
+                setState('stopped');
+                setIsReady(true);
+            }
+        }
+        return () => {
+            isMounted.current = false;
+        };
     }, []);
-    return { state, reason };
+    // Subscribe to playback state changes
+    useEffect(() => {
+        const handleStateChange = (newState, newReason) => {
+            if (isMounted.current) {
+                setState(newState);
+                setReason(newReason);
+            }
+        };
+        const unsubscribe = callbackManager.subscribeToPlaybackState(handleStateChange);
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+    return { state, reason, isReady };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-nitro-player",
-  "version": "0.3.0-alpha.7",
+  "version": "0.3.0-alpha.9",
   "description": "react-native-nitro-player",
   "main": "lib/index",
   "module": "lib/index",

package/src/hooks/callbackManager.ts

@@ -0,0 +1,96 @@
+import { TrackPlayer } from '../index'
+import type { TrackItem, TrackPlayerState, Reason } from '../types/PlayerQueue'
+
+type PlaybackStateCallback = (state: TrackPlayerState, reason?: Reason) => void
+type TrackChangeCallback = (track: TrackItem, reason?: Reason) => void
+
+/**
+ * Internal subscription manager that allows multiple hooks to subscribe
+ * to a single native callback. This solves the problem where registering
+ * a new callback overwrites the previous one.
+ */
+class CallbackSubscriptionManager {
+  private playbackStateSubscribers = new Set<PlaybackStateCallback>()
+  private trackChangeSubscribers = new Set<TrackChangeCallback>()
+  private isPlaybackStateRegistered = false
+  private isTrackChangeRegistered = false
+
+  /**
+   * Subscribe to playback state changes
+   * @returns Unsubscribe function
+   */
+  subscribeToPlaybackState(callback: PlaybackStateCallback): () => void {
+    this.playbackStateSubscribers.add(callback)
+    this.ensurePlaybackStateRegistered()
+
+    return () => {
+      this.playbackStateSubscribers.delete(callback)
+    }
+  }
+
+  /**
+   * Subscribe to track changes
+   * @returns Unsubscribe function
+   */
+  subscribeToTrackChange(callback: TrackChangeCallback): () => void {
+    this.trackChangeSubscribers.add(callback)
+    this.ensureTrackChangeRegistered()
+
+    return () => {
+      this.trackChangeSubscribers.delete(callback)
+    }
+  }
+
+  private ensurePlaybackStateRegistered(): void {
+    if (this.isPlaybackStateRegistered) return
+
+    try {
+      TrackPlayer.onPlaybackStateChange((state, reason) => {
+        this.playbackStateSubscribers.forEach((subscriber) => {
+          try {
+            subscriber(state, reason)
+          } catch (error) {
+            console.error(
+              '[CallbackManager] Error in playback state subscriber:',
+              error
+            )
+          }
+        })
+      })
+      this.isPlaybackStateRegistered = true
+    } catch (error) {
+      console.error(
+        '[CallbackManager] Failed to register playback state callback:',
+        error
+      )
+    }
+  }
+
+  private ensureTrackChangeRegistered(): void {
+    if (this.isTrackChangeRegistered) return
+
+    try {
+      TrackPlayer.onChangeTrack((track, reason) => {
+        this.trackChangeSubscribers.forEach((subscriber) => {
+          try {
+            subscriber(track, reason)
+          } catch (error) {
+            console.error(
+              '[CallbackManager] Error in track change subscriber:',
+              error
+            )
+          }
+        })
+      })
+      this.isTrackChangeRegistered = true
+    } catch (error) {
+      console.error(
+        '[CallbackManager] Failed to register track change callback:',
+        error
+      )
+    }
+  }
+}
+
+// Export singleton instance
+export const callbackManager = new CallbackSubscriptionManager()

package/src/hooks/index.ts

@@ -1,6 +1,9 @@
 export { useOnChangeTrack } from './useOnChangeTrack'
+export type { TrackChangeResult } from './useOnChangeTrack'
 export { useOnPlaybackStateChange } from './useOnPlaybackStateChange'
+export type { PlaybackStateResult } from './useOnPlaybackStateChange'
 export { useOnSeek } from './useOnSeek'
 export { useOnPlaybackProgressChange } from './useOnPlaybackProgressChange'
 export { useAndroidAutoConnection } from './useAndroidAutoConnection'
 export { useAudioDevices } from './useAudioDevices'
+export { useNowPlaying } from './useNowPlaying'

package/src/hooks/useNowPlaying.ts

@@ -0,0 +1,97 @@
+import { useEffect, useState, useRef, useCallback } from 'react'
+import { TrackPlayer } from '../index'
+import { callbackManager } from './callbackManager'
+import type { PlayerState } from '../types/PlayerQueue'
+
+const DEFAULT_STATE: PlayerState = {
+  currentTrack: null,
+  currentPosition: 0,
+  totalDuration: 0,
+  currentState: 'stopped',
+  currentPlaylistId: null,
+  currentIndex: -1,
+}
+
+/**
+ * Hook to get the current player state (same as TrackPlayer.getState())
+ *
+ * This hook provides all player state information including:
+ * - Current track
+ * - Current position and duration
+ * - Playback state (playing, paused, stopped)
+ * - Current playlist ID
+ * - Current track index
+ *
+ * The hook uses native callbacks for immediate updates when state changes.
+ * Multiple components can use this hook simultaneously.
+ *
+ * @returns PlayerState object with all current player information
+ *
+ * @example
+ * ```tsx
+ * function PlayerComponent() {
+ *   const state = useNowPlaying()
+ *
+ *   return (
+ *     <View>
+ *       {state.currentTrack && (
+ *         <Text>Now Playing: {state.currentTrack.title}</Text>
+ *       )}
+ *       <Text>Position: {state.currentPosition} / {state.totalDuration}</Text>
+ *       <Text>State: {state.currentState}</Text>
+ *       <Text>Playlist: {state.currentPlaylistId || 'None'}</Text>
+ *       <Text>Index: {state.currentIndex}</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+export function useNowPlaying(): PlayerState {
+  const [state, setState] = useState<PlayerState>(DEFAULT_STATE)
+  const isMounted = useRef(true)
+
+  const updateState = useCallback(() => {
+    if (!isMounted.current) return
+
+    try {
+      const newState = TrackPlayer.getState()
+      setState(newState)
+    } catch (error) {
+      console.error('[useNowPlaying] Error updating player state:', error)
+    }
+  }, [])
+
+  // Initialize with current state
+  useEffect(() => {
+    isMounted.current = true
+    updateState()
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [updateState])
+
+  // Subscribe to track changes
+  useEffect(() => {
+    const unsubscribe = callbackManager.subscribeToTrackChange(() => {
+      updateState()
+    })
+
+    return () => {
+      unsubscribe()
+    }
+  }, [updateState])
+
+  // Subscribe to playback state changes
+  useEffect(() => {
+    const unsubscribe = callbackManager.subscribeToPlaybackState(() => {
+      updateState()
+    })
+
+    return () => {
+      unsubscribe()
+    }
+  }, [updateState])
+
+  return state
+}

package/src/hooks/useOnChangeTrack.ts

@@ -1,24 +1,88 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { TrackPlayer } from '../index'
+import { callbackManager } from './callbackManager'
 import type { TrackItem, Reason } from '../types/PlayerQueue'
 
+export interface TrackChangeResult {
+  track: TrackItem | null
+  reason: Reason | undefined
+  isReady: boolean
+}
+
 /**
- * Hook to get the current track and track change reason
- * @returns Object with current track and reason, or undefined if no track is playing
+ * Hook to subscribe to track changes.
+ *
+ * This hook provides real-time track change updates using native callbacks.
+ * Multiple components can use this hook simultaneously without interfering
+ * with each other.
+ *
+ * @returns Object with:
+ *   - track: Current track or null if no track is playing
+ *   - reason: Reason for the last track change
+ *   - isReady: Whether the initial state has been loaded
+ *
+ * @example
+ * ```tsx
+ * function NowPlaying() {
+ *   const { track, reason, isReady } = useOnChangeTrack()
+ *
+ *   if (!isReady) return <Text>Loading...</Text>
+ *   if (!track) return <Text>No track playing</Text>
+ *
+ *   return (
+ *     <View>
+ *       <Text>{track.title}</Text>
+ *       <Text>{track.artist}</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
  */
-export function useOnChangeTrack(): {
-  track: TrackItem | undefined
-  reason: Reason | undefined
-} {
-  const [track, setTrack] = useState<TrackItem | undefined>(undefined)
+export function useOnChangeTrack(): TrackChangeResult {
+  const [track, setTrack] = useState<TrackItem | null>(null)
   const [reason, setReason] = useState<Reason | undefined>(undefined)
+  const [isReady, setIsReady] = useState(false)
+  const isMounted = useRef(true)
 
+  // Initialize with current track from the player
   useEffect(() => {
-    TrackPlayer.onChangeTrack((newTrack, newReason) => {
-      setTrack(newTrack)
-      setReason(newReason)
-    })
+    isMounted.current = true
+
+    try {
+      const playerState = TrackPlayer.getState()
+      if (isMounted.current) {
+        setTrack(playerState.currentTrack)
+        setIsReady(true)
+      }
+    } catch (error) {
+      console.error('[useOnChangeTrack] Failed to get initial state:', error)
+      if (isMounted.current) {
+        setTrack(null)
+        setIsReady(true)
+      }
+    }
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  // Subscribe to track changes
+  useEffect(() => {
+    const handleTrackChange = (newTrack: TrackItem, newReason?: Reason) => {
+      if (isMounted.current) {
+        setTrack(newTrack)
+        setReason(newReason)
+      }
+    }
+
+    const unsubscribe =
+      callbackManager.subscribeToTrackChange(handleTrackChange)
+
+    return () => {
+      unsubscribe()
+    }
   }, [])
 
-  return { track, reason }
+  return { track, reason, isReady }
 }

package/src/hooks/useOnPlaybackStateChange.ts

@@ -1,24 +1,94 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { TrackPlayer } from '../index'
+import { callbackManager } from './callbackManager'
 import type { TrackPlayerState, Reason } from '../types/PlayerQueue'
 
+export interface PlaybackStateResult {
+  state: TrackPlayerState
+  reason: Reason | undefined
+  isReady: boolean
+}
+
 /**
- * Hook to get the current playback state and reason
- * @returns Object with current playback state and reason
+ * Hook to subscribe to playback state changes.
+ *
+ * This hook provides real-time playback state updates using native callbacks.
+ * Multiple components can use this hook simultaneously without interfering
+ * with each other.
+ *
+ * @returns Object with:
+ *   - state: Current playback state ('playing' | 'paused' | 'stopped')
+ *   - reason: Reason for the last state change
+ *   - isReady: Whether the initial state has been loaded
+ *
+ * @example
+ * ```tsx
+ * function PlaybackIndicator() {
+ *   const { state, reason, isReady } = useOnPlaybackStateChange()
+ *
+ *   if (!isReady) return <Text>Loading...</Text>
+ *
+ *   return (
+ *     <View>
+ *       <Text>State: {state}</Text>
+ *       {reason && <Text>Reason: {reason}</Text>}
+ *     </View>
+ *   )
+ * }
+ * ```
  */
-export function useOnPlaybackStateChange(): {
-  state: TrackPlayerState | undefined
-  reason: Reason | undefined
-} {
-  const [state, setState] = useState<TrackPlayerState | undefined>(undefined)
+export function useOnPlaybackStateChange(): PlaybackStateResult {
+  const [state, setState] = useState<TrackPlayerState>('stopped')
   const [reason, setReason] = useState<Reason | undefined>(undefined)
+  const [isReady, setIsReady] = useState(false)
+  const isMounted = useRef(true)
 
+  // Initialize with current state from the player
   useEffect(() => {
-    TrackPlayer.onPlaybackStateChange((newState, newReason) => {
-      setState(newState)
-      setReason(newReason)
-    })
+    isMounted.current = true
+
+    // Get initial state synchronously
+    try {
+      const playerState = TrackPlayer.getState()
+      if (isMounted.current) {
+        setState(playerState.currentState)
+        setIsReady(true)
+      }
+    } catch (error) {
+      console.error(
+        '[useOnPlaybackStateChange] Failed to get initial state:',
+        error
+      )
+      if (isMounted.current) {
+        setState('stopped')
+        setIsReady(true)
+      }
+    }
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  // Subscribe to playback state changes
+  useEffect(() => {
+    const handleStateChange = (
+      newState: TrackPlayerState,
+      newReason?: Reason
+    ) => {
+      if (isMounted.current) {
+        setState(newState)
+        setReason(newReason)
+      }
+    }
+
+    const unsubscribe =
+      callbackManager.subscribeToPlaybackState(handleStateChange)
+
+    return () => {
+      unsubscribe()
+    }
   }, [])
 
-  return { state, reason }
+  return { state, reason, isReady }
 }