Update Media.tsx

example/src/Media.tsx

@@ -3,6 +3,8 @@ import { StyleSheet, View, Text, Image, Pressable } from 'react-native';
 import { Navigation, NavigationFunctionComponent } from 'react-native-navigation';
 import Video from 'react-native-video';
 import { CONTENT_SPACING } from './Constants';
+import { useIsForeground } from './hooks/useIsForeground';
+import { useIsScreenFocused } from './hooks/useIsScreenFocused';
 
 interface MediaProps {
   path: string,
@@ -10,6 +12,10 @@ interface MediaProps {
 }
 
 export const Media: NavigationFunctionComponent<MediaProps> = ({ componentId, type, path }) => {
+  const isForeground = useIsForeground();
+  const isScreenFocused = useIsScreenFocused(componentId);
+  const isVideoPaused = !isForeground || !isScreenFocused;
+
   const onClosePressed = useCallback(() => {
     Navigation.dismissModal(componentId);
   }, [componentId]);
@@ -18,8 +24,27 @@ export const Media: NavigationFunctionComponent<MediaProps> = ({ componentId, ty
 
   return (
     <View style={styles.container}>
-      {type === "photo" && (<Image source={source} style={StyleSheet.absoluteFill} />)}
-      {type === "video" && (<Video source={source} style={StyleSheet.absoluteFill} />)}
+      {type === "photo" && (
+        <Image
+          source={source}
+          style={StyleSheet.absoluteFill}
+          resizeMode="cover" />
+      )}
+      {type === "video" && (
+        <Video source={source}
+          style={StyleSheet.absoluteFill}
+          paused={isVideoPaused}
+          resizeMode="cover"
+          posterResizeMode="cover"
+          allowsExternalPlayback={false}
+          automaticallyWaitsToMinimizeStalling={false}
+          disableFocus={true}
+          repeat={true}
+          useTextureView={false}
+          controls={false}
+          playWhenInactive={true}
+          ignoreSilentSwitch="ignore" />
+      )}
 
       <Pressable style={styles.closeButton} onPress={onClosePressed}><Text>Close.</Text></Pressable>
     </View>