Stopping the audio from videos playing in the background (react-native-video / react-native-swipe-render)

84 Views Asked by At

I have a simple react native app that aims to display a series of videos, similar to say TikTok.

My issue is that when you swipe through the videos, you can still hear the audio from other videos in the background.

How do i stop this happening? I only want to hear the video that is currently playing.

I am using react-native-video and react-native-swipe-render to display them.

import React, {useEffect, useState} from 'react';
import {
  Dimensions,
  StyleSheet,
  View,
} from 'react-native';
import Video, {VideoRef} from 'react-native-video';
import SwipeRender from 'react-native-swipe-render';

const Fullscreenvideo = () => {
  const [index, setIndex] = useState(0);

  const shuffledArray = [--array of videos--];

  return (
    <>
      <View style={{flex: 1}}>
        <SwipeRender
          index={0}
          loop={false}
          autoplay={false}
          loadMinimal={true}
          loadMinimalSize={2}
          horizontal={false}
          data={shuffledArray}
          renderItem={({item, index}) => (
            <>
              <View
                key={'SwipeRender-slide#' + index}
                style={{flex: 1, backgroundColor: '#0'}}>
                <Video
                  source={item.uri}
                  resizeMode="cover"
                  style={styles.videostyle}
                  disableFocus={false}
                />
              </View>
            </>
          )}
        />
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  videostyle: {
    zIndex: 0,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

export default Fullscreenvideo;
0

There are 0 best solutions below