Audio not being paused on Android build

  1. SDK Version: 40
  2. Platforms(Android):
  3. expo-av

I’ve ran into an issue where the audio I’m playing can’t be paused again after it starts playing.

During development all works fine, it’s only after the build process when this happens. Haven’t tried building iOS to verify that it’s only Android giving this issue, but building for web doesn’t produce this bug.

Below the the component in question:

const PlayStream = () => {
  let playIcon = "play";
  const [sound, setSound] = React.useState();
  const [isPlaying, setIsPlaying] = React.useState();
  const [playerIcon, setPlayerIcon] = React.useState("play");

  async function playStream() {
    // console.log("Loading Stream");
    const { sound } = await Audio.Sound.createAsync(
      { uri: "https://radio.burgstudio.co.za/radio/8000/radio.mp3" },
      { shouldPlay: true }
    );
    setSound(sound);
    setIsPlaying("playing");
    // console.log("Playing Stream");
    await sound.playAsync();
  }

  async function pauseStream() {
    // console.log("Pausing Stream");
    sound.unloadAsync();
    setIsPlaying("paused");
  }

  function playOrPause() {
    if (isPlaying == "playing") {
      pauseStream();
      setPlayerIcon("play");
    } else {
      playStream();
      setPlayerIcon("pause");
    }
  }

  React.useEffect(() => {
    return sound
      ? () => {
          // console.log("Unloading Sound");
          sound.unloadAsync();
        }
      : undefined;
  }, [sound]);

  return (
    <FontAwesome
      size={60}
      name={playerIcon}
      color={COLORS.burgRed}
      onPress={playOrPause}
      style={STYLES.playPause}
    />
  );
};