React-native-track-player: How to use with react component

[moduval]

Hi,

Before checking this component, I used react-native-video to play my stream file.

My component looks like this:

import React from 'react';
import PropTypes from 'prop-types';
import Video from 'react-native-video';

function AudioPlayer(props) {

  if (props.paused) {
    return null;
  }

  const { source, paused, onLoad, onError } = props;

  return (
    <Video
      source={{ uri: source }}
      volume={1.0}
      muted={false}
      onLoad={onLoad}
      paused={paused}
      onError={onError}
      playInBackground
      playWhenInactive
    />
  );
}

AudioPlayer.propTypes = {
  source: PropTypes.string.isRequired,
  paused: PropTypes.bool.isRequired,
  onLoad: PropTypes.func.isRequired,
  onError: PropTypes.func.isRequired
};

export default AudioPlayer;

Since react-native-video is not working great on android while playing in background, i was looking for this component but I do now understand how I am supposed to use redux to dispatch action to the player.

In my app, my ui component dispatch redux actions like Play, Pause, etc. I have a component over my audioplayer bind to redux that pass props to my AudioPlayer to update it depending on user action.

My question: How can I accomplish similar lifecycle using this component ? All the events are in the headless task and I do not understant how am i supposed to update the props of my components using this.

I want to keep a similar API for my component as I am going to use react-native-track-player only on android.

Thank you.

[Guichaguri]

As you have mentioned, react-native-video works as a UI component. But due to the fact that we need audio to work in background (with lockscreen controls), react-native-track-player works as an API.

You can update your redux store with new information from the headless task.
You can also trigger player commands (e.g. play/pause/stop) from redux actions

[moduval]

How to access store in the headless task ?

[jasongrishkoff]

You should just be able to import it? I use Mobx, so I just import store from '../store/PlayerStore'

[Guichaguri]

You also can just pass it to the function like so:

// index
const store = ...
....registerHeadlessTask('TrackPlayer', () => require('event-handler.js').bind(null, store));

// event-handler.js
module.exports = async (store, data) {
    if(data.type == '...') {
        store.dispatch(...);
    }
};

[moduval]

Thanks for the help, it works

[rahulbhankar786]

Thanks for help @Guichaguri
Its working

[jeosebastian555]

Thanks for the help. It works