Pass a function inside another function React Native

Question

I ve got the following component which renders an audio player. The meditationList function gives me the location of the file that I want to play dynamically, and audio function is the functionality of player.

What I want to do is to pass the meditation list return on track player url

Thank you

export default class Player extends React.Component<Props> {
  meditationList = () => {
    const adress = this.props.route.params;

    return JSON.stringify(adress.meditation.meditationPlayerAdress);
  };
  audio = () => {
    TrackPlayer.setupPlayer().then(async () => {
      // Adds a track to the queue

      await TrackPlayer.add({
        id: 'trackId',
        url: this.require(meditationList()),
        title: 'Track Title',
        artist: 'Track Artist',
      });

      let trackId = await TrackPlayer.getCurrentTrack();

      // Starts playing it
      TrackPlayer.play();
    });
  };

  pause = () => {
    TrackPlayer.pause();
  };

  stop = () => {
    TrackPlayer.stop();
  };




  render() {
    return (
     ....)}}}

Error image

Answer 1

Hi Please change your code as below

1. Remove the duplicate function
2. Change url: require('../../../assets/track.mp3') to url: this.require(meditationList()),

---

export default class Player extends React.Component<Props> {
  meditationList = () => {
    const adress = this.props.route.params;
    return JSON.stringify(adress.meditation.meditationPlayerAdress);
  };

  audio = () => {
    TrackPlayer.setupPlayer().then(async () => {
      // Adds a track to the queue

      await TrackPlayer.add({
        id: 'trackId',
        url: require(this.meditationList()),
        title: 'Track Title',
        artist: 'Track Artist',
      });

      let trackId = await TrackPlayer.getCurrentTrack();

      // Starts playing it
      TrackPlayer.play();
    });
  };

 pause = () => {
    TrackPlayer.pause();
  };

  stop = () => {
    TrackPlayer.stop();
  };

  render() {
    return (
     ....)}}}