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;