[iOS Device] Music controls disabled if video is played in full screen using native iOS controls

[gkuettel]

We're using react-native-video in conjunction with this library to show lock screen controls for videos. Everything works as expected, but we're running into a problem when locking the phone after the video is in full screen mode, and the native iOS controls take over.

Steps to reproduce:

• Play a video in fullscreen with native iOS controls
• Lock the phone
• Playback controls are disabled

We've tried to call setNowPlaying when full screen is enabled, but that did not resolve the issue.

Screenshot: Lock screen controls working as expected

Screenshot: Lock screen controls are greyed out when locking the phone from full screen (native iOS controls)

---

Here's the code that we call when the component mounts:

useEffect(() => {
     Controls.handleAudioInterruptions(true);
    Controls.enableControl("closeNotification", true, { when: "always" });
    Controls.enableBackgroundMode(true);
    Controls.enableControl("play", true);
    Controls.enableControl("pause", true);
    Controls.enableControl("nextTrack", true);
    Controls.enableControl("previousTrack", true);
  }, []);

Here's the code we call when the video instance loads

useEffect(() => {
    Controls.setNowPlaying({
      title,
    });
    Controls.on(Command.play, () => {
      onPressPlay();
    });
    Controls.on(Command.pause, () => {
      onPressPause();
    });
    Controls.on(Command.nextTrack, () => {
      onAdvanceSlide(true);
    });
    Controls.on(Command.previousTrack, () => {
      onAdvanceSlide(false);
    });
  }, [title]);

---

Platform

• [x] iOS
• [ ] Android

Device

• [ ] Simulator
• [x] Real device