Passing function in React-Native audio player

Question

I am trying to play sounds dynamically based on a function called meditationList. The return of the function gives me the right path which it works in the player.

However, if I call the function on the URL is not working giving me the following error: Rejection, Can't find variable meditationList. I also tried with JSON.stringify to return adress.meditation.meditationPlayerAdress but no luck

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

    return adress.meditation.meditationPlayerAdress; //console.log returns ../../assets/track1.mp3
  };

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

      await TrackPlayer.add({
        id: 'trackId',
        url: require('../../assets/track1.mp3'), // this.require(meditationList())- warning that variable meditationList cannot be found
        title: 'Track Title',
        artist: 'Track Artist',
      });

      let trackId = await TrackPlayer.getCurrentTrack();

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

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

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

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{alignItems: 'center'}}>
          <View style={{alignItems: 'center', marginTop: 24}}>
            <Text style={[styles.textLight, {fontSize: 12}]} />

            <Text
              style={[
                styles.text,
                {fontSize: 15, fontWeight: '500', marginTop: 8},
              ]}>
              {this.meditationList()}
            </Text>
          </View>

          <View style={styles.coverContainer}>
            <Image
              source={require('../../../assets/coverArt.jpg')}
              style={styles.cover}
            />
          </View>

          <View style={{alignItems: 'center', marginTop: 32}}>
            <Text style={[styles.textDark, {fontSize: 20, fontWeight: '500'}]}>
              Exhale
            </Text>
            <Text style={[styles.text, {fontSize: 16, marginTop: 8}]}>sal</Text>
          </View>
        </View>

        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 16,
          }}>
          <TouchableOpacity onPress={this.stop}>
            <FontAwesomeIcon icon={faStop} size={32} color="#93A8B3" />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.playButtonContainer}
            onPress={this.audio}>
            <FontAwesomeIcon
              name="play"
              icon={faPlay}
              size={32}
              color="#3D425C"
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={this.pause}>
            <FontAwesomeIcon icon={faPause} size={32} color="#93A8B3" />
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

Answer 1

meditationList cannot be found solution :

As you are using class based component, anything defined within that, you can access that via this.ANYTHING_DEFINED, but not directly, so here we need this.meditationList()

You can use meditationList() within function based component without error.

---

require(var) will not take dynamic varibale

You cannot use variables in require. All requires must be statically analyzable. That means you always have to write require('/path/to/file'). SOURCE

---

But, you can do something like this, SOURCE

const IMAGES = {
  image1: require('../image1'), // statically analyzed
  image2: require('../image2'), // statically analyzed
}

getImage(num: number) { // dynamically invoked
  return IMAGES['image' + num];
}