How to pause video when moving to other tab in react native

Question

I have implemented react native video in tabs(tabs are implemented using native base) but while moving to other tab(ontabpress) video still plays in background.Any help will be appericated.Thanks

Answer 1

import {useNavigation} from '@react-navigation/native';

const [pause, setPause] = useState(false);
const navigation = useNavigation();

useEffect(() => {
    navigation.addListener('focus', (route) => { setPause(false) });
    navigation.addListener('blur', (route) => { setPause(true) });
}, []);

<Video
      source={{ uri: item.uri }}
      rate={1.0}
      volume={1.0}
      paused={pause}
      resizeMode="cover"
      shouldPlay={play}
      isLooping
      style={{
        width: '100%',
        height: '100%',
      }}
    />

Hope this will help you for sure. :)

Answer 2

Try this

 {...}

   const [pause, setPause] = useState(false)

   useEffect(() => {
     const blur = navigation.addListener('blur', () => {
     setPause(true)
     });

     const focus = navigation.addListener('focus', () => {
     setPause(false)
     });

     return blur, focus;
   }, [navigation]);

 {...}
 
   <Video
     source={{ uri: ENTER_HERE_URL }}
     paused={pause}
     style={styles.bgView} />

 {...}