Merge pull request #329 from bitmovin/fix-PiP-sample-for-tvOS

Fix Picture in Picture sample screen layout on tvOS

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Android: `onEvent` callback not being called on `PlayerView`
 - iOS: `onEvent` on iOS has incomplete payload information
+- tvOS: Picture in Picture sample screen has unwanted padding
 
 ## [0.14.1] (2023-11-16)
 

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={['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,17 +137,21 @@ 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,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: 'white',
-    padding: 10,
+    padding: Platform.isTV ? 0 : 10,
   },
   player: {
     flex: 1,