This is a known problem - if an iPhone is in silent mode, the video won't playback with sound. There are various solutions including this one but the solutions are always provided in functional components and I've been unsuccessful in translating them to work in my class components. I understand the basic idea is to set the sound:
await Audio.setAudioModeAsync({ playsInSilentModeIOS: true });
But I don't know how to associate that with the video playback. The solutions make use of ref's so I tried something like:
async TriggerAudio() {
try {
await Audio.setAudioModeAsync({ playsInSilentModeIOS: true });
} catch (error) {
console.log("error for trigger audio " + error);
}
this.videoRef.current.playAsync();
}
And called that in a function that returns the Video tag - I declared the videoRef variable in the constructor, but I don't think I understand how to use ref's in a class component because there's no playAsync function associated with the ref. I also put the setAudioModeAsync in componentDidMount - even asked for permissions, but the video still plays with no sound when the phone is silenced.
How do I solve this for a class component?
UPDATE
If I create a ref in the Constructor:
this.videoRef = React.createRef();
And set the ref parameter of Video to that value:
<Video source={{
uri: url
}}
ref={this.videoRef}
useNativeControls
resizeMode="contain"
style={styles.videoComment}
/>
And create a button with onPress set to the above TriggerAudio function, it works great - the challenge I have is that the ref variables have to be unique for each video (I believe) but I don't know what videos will be loaded until I make API calls in the componentDidMount function, so how do I create ref's for each video so that each video's audio will start correctly?
