React Native - Pause Video on Navigation - reactjs

Question

In my react-native project, I'm using react-navigation 5 for navigation and react-native-video for a audio/video player.
My requirement is that when a user navigates to another scren, if the audio/video should stop playing. However, that's not happening and the audio keeps playing.
I have created two screens in a stack navigator. The Video Player is a separate component.
Screen Code:
function MainScreen({ navigation }) {
const [audiostatus, setAudioStatus] = useState(true);
React.useEffect(() => {
const unsubscribe = navigation.addListener('blur', () => {
console.log('Leaving Home Screen');
setAudioStatus(true);
});
return unsubscribe;
}, [navigation]);
return (
<View style={{ flex: 1, justifyContent: 'center',backgroundColor: '#fff' }}>
<Player tracks={TRACKS} paused={audiostatus} />
<Button
title="Go to Screen Without Audio"
onPress={() => navigation.navigate('No Audio Screen')}
/>
<Button
title="Go to Screen With Another Audio (Love Yourself)"
onPress={() => navigation.navigate('Another Audio Screen')}
/>
</View>
);
}
Player Code
Within the Player, I recieve the paused prop to decide whether the video should be already playing or paused. Then the player has controls that control the playbck by changing the state.
export default class Player extends Component {
constructor(props) {
super(props);
this.state = {
paused: props.paused,
totalLength: 1,
currentPosition: 0,
selectedTrack: 0,
repeatOn: false,
shuffleOn: false,
};
}
setDuration(data) {
this.setState({totalLength: Math.floor(data.duration)});
}
setTime(data) {
this.setState({currentPosition: Math.floor(data.currentTime)});
}
seek(time) {
time = Math.round(time);
this.refs.audioElement && this.refs.audioElement.seek(time);
this.setState({
currentPosition: time,
paused: false,
});
}
render() {
const track = this.props.tracks[this.state.selectedTrack];
const video = this.state.isChanging ? null : (
<Video source={{uri: track.audioUrl}} // Can be a URL or a local file.
ref="audioElement"
paused={this.state.paused} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.
repeat={false} // Repeat forever.
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration.bind(this)} // Callback when video loads
onProgress={this.setTime.bind(this)} // Callback every ~250ms with currentTime
onEnd={this.onEnd}
onError={this.videoError}
style={styles.audioElement}
audioOnly={true} />
);
return (
<View style={styles.container}>
<SeekBar
onSeek={this.seek.bind(this)}
trackLength={this.state.totalLength}
onSlidingStart={() => this.setState({paused: true})}
currentPosition={this.state.currentPosition} />
<Controls
onPressPlay={() => this.setState({paused: false})}
onPressPause={() => this.setState({paused: true})}
paused={this.state.paused}/>
{video}
</View>
);
}
}
The problem is that once a user starts playing the video, and then if he navigates to another screen, the video keeps playing. I want the video to pause. In the screen, i've added useEffect() to set audiostatus to pause on screen blur, but nothing happens. The video keeps playing. Please help.

Answer 1

A simple solution with functional components and hooks is to use
useIsFocused
which returns true or false and re-renders component when changed import it using
import { useIsFocused } from '#react-navigation/native';
const screenIsFocused = useIsFocused();
if you're using "react-native-video" or any other library that takes something like
isPaused
you can use
paused={isPaused || (!screenIsFocused )}
video will only run when it is not paused and the screen is also in focus

Answer 2

Do the following way to pause the video
import React, {useState, useRef} from 'react';
function MainScreen({ navigation }) {
const [audiostatus, setAudioStatus] = useState(true);
// create ref
const playerRef = useRef();
React.useEffect(() => {
const unsubscribe = navigation.addListener('blur', () => {
console.log('Leaving Home Screen');
setAudioStatus(false);
// new code add to pause video from ref
playerRef.current.pauseVideo();
});
return unsubscribe;
}, [navigation]);
return (
<View style={{ flex: 1, justifyContent: 'center',backgroundColor: '#fff' }}>
<Player ... playerRef={playerRef} />
</View>
);
}
Convert Player class into Hooks as I did
import React, {useState, useImperativeHandle, useRef} from 'react';
function Player = (props) => {
const [paused, setPaused] = useState(props.paused);
const [totalLength, setTotalLength] = useState(1);
const [currentPosition, setCurrentPosition] = useState(0);
const [selectedTrack, setSelectedTrack] = useState(0);
const [repeatOn, setRepeatOn] = useState(false);
const [shuffleOn, setShuffleOn] = useState(false);
const [isChanging, setIsChanging] = useState(false);
const audioElement = useRef(null);
const setDuration = (data) => {
setTotalLength(Math.floor(data.duration));
}
const setTime = (data) => {
setCurrentPosition(Math.floor(data.currentTime));
}
const seek = (time) => {
time = Math.round(time);
audioElement && audioElement.current.seek(time);
setCurrentPosition(time);
setPaused(false);
}
const loadStart = () => {}
// add for accessing ref
useImperativeHandle(props.playerRef, () => ({
pauseVideo: () => setPaused(true),
}));
const track = props.tracks[selectedTrack];
const video = isChanging ? null : (
<Video source={{uri: track.audioUrl}} // Can be a URL or a local file.
ref={audioElement}
paused={paused} // Pauses playback entirely.
resizeMode="cover"
....
onLoadStart={loadStart} // new added
onLoad={setDuration} // new added
/>
);
return (
<View style={styles.container}>
<SeekBar
onSeek={seek}
trackLength={totalLength}
onSlidingStart={() => setPaused(true)}
currentPosition={currentPosition} />
<Controls
onPressPlay={() => setPaused(false) }
onPressPause={() => setPaused(true)}
paused={paused}/>
{video}
</View>
);
}

Answer 3

Your Player appears to only refer to the paused prop only once when it mounts, in the constructor. Player doesn't react or handle any changes to props.paused when it changes in the parent component and is passed after mounting. Implement componentDidUpdate to react to updates to props.paused to update the component state.
export default class Player extends Component {
constructor(props) {
super(props);
this.state = {
paused: props.paused,
totalLength: 1,
currentPosition: 0,
selectedTrack: 0,
repeatOn: false,
shuffleOn: false,
};
}
...
componentDidUpdate(prevProps, prevState) {
const { paused } = this.props;
if (!prevState.paused && paused) {
this.setState({ paused });
}
}
...
render() {
...
const video = this.state.isChanging ? null : (
<Video
...
paused={this.state.paused}
...
/>
);
return (
<View style={styles.container}>
...
{video}
</View>
);
}
}