How to enable background playing and PiP?

[fredrikburmester]

Hi, I have an Expo 51 project and can't seem to get neither background playing or pip to work. Could anyone give me some pointers on how to make this work?

This is my current component setup:

<Video
                  ref={videoRef}
                  allowsExternalPlayback
                  style={{ width: "100%", height: "100%" }}
                  playWhenInactive={true}
                  playInBackground={true}
                  showNotificationControls={true}
                  ignoreSilentSwitch="ignore"
                  controls={false}
                  poster={
                    backdropUrl && item?.Type === "Audio"
                      ? backdropUrl
                      : undefined
                  }
                  paused={paused}
                  onProgress={(e) => onProgress(e)}
                  subtitleStyle={{
                    fontSize: 16,
                  }}
                  source={{
                    uri: cp.playbackUrl,
                    isNetwork: true,
                    startPosition,
                  }}
                  onBuffer={(e) =>
                    e.isBuffering ? console.log("Buffering...") : null
                  }
                  onPlaybackStateChanged={(e) => {
                    if (e.isPlaying) {
                      setPaused(false);
                    } else if (e.isSeeking) {
                      return;
                    } else {
                      setPaused(true);
                    }
                  }}
                  onError={(e) => {
                    console.log(e);
                    writeToLog(
                      "ERROR",
                      "Video playback error: " + JSON.stringify(e),
                    );
                  }}
                  renderLoader={
                    item?.Type !== "Audio" && (
                      <View className="flex flex-col items-center justify-center h-full">
                        <ActivityIndicator size={"small"} color={"white"} />
                      </View>
                    )
                  }
                />

[gkueny]

@fredrikburmester You can check :

• http://thewidlarzgroup.github.io/react-native-video/component/props#pictureinpicture
• http://thewidlarzgroup.github.io/react-native-video/component/events#onpictureinpicturestatuschanged
• http://thewidlarzgroup.github.io/react-native-video/component/events#onrestoreuserinterfaceforpictureinpicturestop
• http://thewidlarzgroup.github.io/react-native-video/component/methods#restoreuserinterfaceforpictureinpicturestopcompleted

[fredrikburmester]

For anyone wondering i had to set these settings in my app.json

"ios": {
      "infoPlist": {
        "UIBackgroundModes": ["audio"]
      },
    },

And set pictureInPicture={true} in the video component.