fix(tvospictureinpicture): fix picture in picture sample screen on tvOS

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Fixed
 
 - Android: `PlayerView` destroys attached `Player` instance on destroy. `Player` lifecycle must be handled on the creation side
+- tvOS: Picture in Picture sample screen has unwanted padding
 
 ## [0.14.0] (2023-11-14)
 

example/src/screens/BasicPictureInPicture.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Platform, StyleSheet } from 'react-native';
+import { Button, Platform, StyleSheet, View, ViewProps } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
 import {
   Event,
@@ -116,9 +116,9 @@ export default function BasicPictureInPicture({
     []
   );
 
+  const ContainerView = Platform.isTV ? View : SafeAreaContainer;
   return (
-    <SafeAreaView
-      edges={Platform.isTV ? [] : ['bottom', 'left', 'right']}
+    <ContainerView
       style={
         // On Android, we need to remove the padding from the container when in PiP mode.
         Platform.OS === 'android' && isInPictureInPicture
@@ -137,10 +137,14 @@ export default function BasicPictureInPicture({
         onPictureInPictureExit={onPictureInPictureExitEvent}
         onPictureInPictureExited={onEvent}
       />
-    </SafeAreaView>
+    </ContainerView>
   );
 }
 
+function SafeAreaContainer(props: ViewProps): JSX.Element {
+  return <SafeAreaView edges={['bottom', 'left', 'right']} {...props} />;
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,