The saved Uri from React Native Expo AV does not work? - react-native

Question

I have created an array of dictionaries that hold the data of audios. The user must record those audios and then they can listen it. the problem is that those audios are represented with a flatlist and when I pass between them, it cannot find the uri. For example:
const [data, setData] = useState(
{uri: null, duration: 0},
{uri: null, duration: 0},
{uri: null, duration: 0}
)
const [index, setIndex] = useState()
const [step, setStep] = useState(0)
const [recording, setRecoding] = useState()
const [sound, setSound] = useState()
const [curDuration, setCurduration] = useState(0)
const [isBuffering, setIsBuferring] = useState(false)
const leftArrow = async () => {
if (index >= 1) {
flatlist.current.scrollToIndex({ animated: true, index: index - 1 })
if (newAudio[index - 1].grabacion != null) {
await sound.unloadAsync()
loadAudio(index - 1)
}
setIndex(index - 1)
};
}
const rightArrow = async () => {
if (index < newAudio.length - 1) {
flatlist.current.scrollToIndex({ animated: true, index: index + 1 })
if (newAudio[index + 1].grabacion != null) {
await sound.unloadAsync()
loadAudio(index + 1)
}
setIndex(index + 1)
}
}
const loadAudio = async (idx) => {
const playbackInstance = new Audio.Sound()
const source = { uri: newAudio[idx].grabacion }
const status = { shouldPlay: isPlaying }
playbackInstance.setOnPlaybackStatusUpdate((status) => { setIsBuffering(status.isBuffering) })
await playbackInstance.loadAsync(source, status, false)
setSound(playbackInstance)
}
const startRecording = async () => {
try {
setStep(1)
console.log('Requesting permissions..');
await Audio.requestPermissionsAsync();
await Audio.setAudioModeAsync({
allowsRecordingIOS: false,
playsInSilentModeIOS: true,
playThroughEarpieceAndroid: false,
staysActiveInBackground: true,
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DUCK_OTHERS,
shouldDuckAndroid: true,
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
});
console.log('Starting recording..');
const recording = new Audio.Recording();
await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
await recording.startAsync();
setRecording(recording);
console.log('Recording started');
} catch (err) {
console.error('Failed to start recording', err);
}
}
const stopRecording = async () => {
console.log('Stopping recording..');
setRecording(undefined);
await recording.stopAndUnloadAsync();
const uri = recording.getURI();
// set the sound
console.log('Loading Sound');
const { sound } = await Audio.Sound.createAsync({ uri: uri });
setSound(sound);
//check the status
let status = await sound.getStatusAsync()
//save uri and duration
updateValues( status.durationMillis, status.uri);
}
const updateValues = (dur, uri) => {
data[index] = {
duration: dur,
grabacion: uri
}
setNewAudio(newAudio)
}
return (
<View>
<Flatlist
data={data}
horizontal={true}
initialScrollIndex={index}
pagingEnabled={true}
scrollEnabled={false}
initialScrollIndex={index}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => index.toString()}
renderItem={(itemData) => {
<View>
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
<TouchableOpacity onPress={leftArrow}>
<AntDesign name='arrowleft' />
</TouchableOpacity>
<TouchableOpacity onPress={rightArrow}>
<AntDesign name='arrowright' />
</TouchableOpacity>
</View>
{step == 0 ?
<TouchableOpacity onPress={startRecording()}>
<Fontisto name='mic' />
</TouchableOpacity >
: step == 1 ?
<TouchableOpacity onPress={stopRecording()}>
<MaterialIcons name='stop' />
</TouchableOpacity >
: <TouchableOpacity onPress={HanddlePlayStop()} >
{isPlaying ?
<Fontisto name='pause' />
:
<Fontisto name='play' />
}
</TouchableOpacity >
}
<Slider
disabled={isPlaying ? true : false}
value={curDuration}
minimumValue={0}
maximumValue={itemData.item.duration}
onSlidingComplete={async (value) => {
await sound.setPositionAsync(value)
}}
/>
</View>
}
/>
</View>
)
The problem that I get is that when I press arrowRight() or arrowLeft() and if the index that we are going to there is already a recording, it does not identify the uri. Can somebody help me with this

Answer 1

I was able to solve it by saving the uri on a UseState and in the updateValues function, I'd change the value grabacion with the useState varable of the uri instead of status.uri. For some reason status.uri was not saving the uri correctly