Use useIsFocused

1 files changed, 11 insertions, 9 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 5b71c64b..f4970f1e 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,4 +1,8 @@
-import {useFocusEffect, useNavigation} from '@react-navigation/native';
+import {
+  useFocusEffect,
+  useIsFocused,
+  useNavigation,
+} from '@react-navigation/native';
 import React, {
   useCallback,
   useContext,
@@ -100,15 +104,9 @@ const MomentPost: React.FC<MomentPostProps> = ({
   );
   const mediaHeight = SCREEN_WIDTH / aspectRatio;
   const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false);
+  const screenIsFocused = useIsFocused();
   const videoProgress = useSharedValue(0);
 
-  // pause video when out of focus
-  useFocusEffect(
-    useCallback(() => {
-      return () => setIsVideoPaused(true);
-    }, []),
-  );
-
   // update play/pause icon based on video pause state
   useEffect(() => {
     setFadeValue(new Animated.Value(isVideoPaused ? 1 : 0));
@@ -248,7 +246,11 @@ const MomentPost: React.FC<MomentPostProps> = ({
           const {width, height} = response.naturalSize;
           setAspectRatio(width / height);
         }}
-        paused={moment.moment_id !== currentVisibleMomentId || isVideoPaused}
+        paused={
+          moment.moment_id !== currentVisibleMomentId ||
+          isVideoPaused ||
+          !screenIsFocused
+        }
         onProgress={({currentTime, seekableDuration}) => {
           const localProgress = currentTime / seekableDuration;
           if (!isNaN(localProgress)) {