Keep background audio from other apps alive, react-native-video IOS

Question

long time listener first time caller.

I am so far unsuccessful in getting background music from something like Spotify to stay alive in my react-native app as soon as I navigate to a screen that is using react-native-video. On Android no changes had to be made for that to work. I am using react-native (non-expo) and am currently in testing on testflight.

If this is a duplicate let me know, but I am only finding many articles on how to make your app play in the background (my issue is the opposite), and I may not just know the term IOS uses for this type of control. Important to note that one instance of this component DOES include audio, but the majority of videos presented have no audio.

I've tried:

1. updating AppDelgate.m with the instructions from react-native-video docs:

AppDelegate.m

    #import <AVFoundation/AVFoundation.h>  // import
    
     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
      ...
      [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
      ...
    }

• this had seemingly no effect

2. Using ignoreSilentSwitch="ignore" and obey

• Obey successfully allows background audio to continue, but mutes the videos that do have audio.
• Looking at the source, ignoreSilentSwitch=obey does the same thing as what I added to the AppDelegate.m file and is also negated if you use the isPaused prop.
• Tried many of the other props involving audio hoping to get lucky.

3. Added Background Modes = "Audio, Airplay, and Picture in Picture" Capability on my app target in xcode.

4. Cried a little bit and questioned my life choices.

I implemented react-native-video using react-native-video-controls, but as I understand it's the same module with added features. Here is the implemenation:

<VideoContainer>
    <VideoPlayer
      source={currentVideo}
      navigator={null}
      ref={videoRef}
      resizeMode={'cover'}
      controlTimeout={1500}
      paused={isPaused}
      repeat={true}
      muted={true}
      tapAnywhereToPause={true}
      disableBack={true}
      disableTimer={true}
      disableVolume={true}
      disableFullscreen={true}
      showOnStart={true}
      hideShutterView={true}
    />
 </VideoContainer>

Any help, suggestion, feedback or rebuttal is greatly appreciated!

Answer 1

Culprit found.

So I am using react-native-audio for certain timed sounds that overlay muted and non-muted videos.

When you call the react-native-sound Sound.setCategory() method, the optional 2nd argument is a 'mix-with-other's bool. Setting that to true and following the react-native-video suggested AVAudioSession config in the AppDelegate.m was all I needed.

IOS categories (other than the suggested Playback in react-native-sound): ios sound categories

Similar issue that helped me find mine

Helpful IOS docs on audio:

this one

and this one

Answer 2

I think there is a prop

mixWithOthers

try setting it to 'mix'

Answer 3

adding these 3 props works:

<Video
    ...
    ignoreSilentSwitch="obey"
    muted={true}
    disableFocus
/>

Answer 4

For iOS:

• Enable Background Audio in your Xcode project

Is using react-native-video you should also add:

• Set the ignoreSilentSwitch prop to "ignore"

Answer 5

I'm seeing that you are missing the prop to enable backgroundAudio. Quoting the docs:

playInBackground Determine whether the media should continue playing while the app is in the background. This allows customers to continue listening to the audio.

false (default) - Don't continue playing the media

true - Continue playing the media To use this feature on iOS, you must:

Enable Background Audio in your Xcode project Set the ignoreSilentSwitch prop to "ignore" Platforms: Android ExoPlayer, Android MediaPlayer, iOS