React-native-track-player: How to connect service.js to Redux

Created on 7 Jul 2020  路  3Comments  路  Source: react-native-kit/react-native-track-player

import TrackPlayer from 'react-native-track-player'

module.exports = async function () {

  TrackPlayer.addEventListener('remote-play', () => {
    TrackPlayer.play()
  })

  TrackPlayer.addEventListener('remote-pause', () => {
    TrackPlayer.pause()
  });

  TrackPlayer.addEventListener('remote-next', () => {
    TrackPlayer.skipToNext()
  });

  TrackPlayer.addEventListener('remote-previous', () => {
    TrackPlayer.skipToPrevious()
  });

  TrackPlayer.addEventListener('remote-stop', () => {
    TrackPlayer.destroy()
  });

};

Hello, how can i use Redux on this page? I need access notification panel click status. I have play/pause button and controls with redux. i need access notification panel clicks too.

Most helpful comment

I imported my redux store directly on the player service and it worked fine

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

import { store } from '~/store';
import { Creators as PlayerActions } from '~/store/ducks/player';

export default async () => {
  TrackPlayer.addEventListener('remote-play', () => {
    store.dispatch(PlayerActions.play());
  });

  TrackPlayer.addEventListener('remote-pause', () => {
    store.dispatch(PlayerActions.pause());
  });

  TrackPlayer.addEventListener('remote-next', () => {
    store.dispatch(PlayerActions.next());
  });

  TrackPlayer.addEventListener('remote-previous', () => {
    store.dispatch(PlayerActions.prev());
  });

  TrackPlayer.addEventListener('remote-stop', () => {
    store.dispatch(PlayerActions.reset());
  });
};

All 3 comments

I don't think you can or even if you can, it doesn't make sense. Your app might be in background and the UI is not mounted.
The service should interact with the player directly.

I would be interested the best approach with this, if anyone else has an idea.

I imported my redux store directly on the player service and it worked fine

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

import { store } from '~/store';
import { Creators as PlayerActions } from '~/store/ducks/player';

export default async () => {
  TrackPlayer.addEventListener('remote-play', () => {
    store.dispatch(PlayerActions.play());
  });

  TrackPlayer.addEventListener('remote-pause', () => {
    store.dispatch(PlayerActions.pause());
  });

  TrackPlayer.addEventListener('remote-next', () => {
    store.dispatch(PlayerActions.next());
  });

  TrackPlayer.addEventListener('remote-previous', () => {
    store.dispatch(PlayerActions.prev());
  });

  TrackPlayer.addEventListener('remote-stop', () => {
    store.dispatch(PlayerActions.reset());
  });
};

@b3rkaydem1r close this issue

Was this page helpful?
0 / 5 - 0 ratings