Failed to load the audioPlayer made up of nativeBase after updating to SDK 51

[Kenny0105]

Hi all, I am trying to write a chat app which is like whatsapp and can play audio message with a audio player in the chatScreen. I managed to build a audio player in the chatScreen using nativeBase with the following code:

---

import React, { useState, useRef } from "react";
import {
HStack,
Icon,
Slider,
Spinner,
VStack,
Text,
Button,
NativeBaseProvider,
} from "native-base";
import { MaterialIcons } from "@expo/vector-icons";
import { Audio } from "expo-av";

function msToTime(millisec) {
var seconds = (millisec / 1000).toFixed(0);
var minutes = Math.floor(seconds / 60);
var hours = "";
if (minutes > 59) {
hours = Math.floor(minutes / 60);
hours = hours >= 10 ? hours : "0" + hours;
minutes = minutes - hours * 60;
minutes = minutes >= 10 ? minutes : "0" + minutes;
}

seconds = Math.floor(seconds % 60);
seconds = seconds >= 10 ? seconds : "0" + seconds;
if (hours != "") {
return hours + ":" + minutes + ":" + seconds;
}
return minutes + ":" + seconds;
}

export const AudioPlayerViewTest = (props) => {
const {
duration,
audioUrl,
} = props;

const [isPlaying, setIsPlaying] = useState(false);
const [active, setActive] = useState(false);
const [loaded, setLoaded] = useState(false);
const [loading, setLoading] = useState(false);
const sound = useRef(new Audio.Sound());
const [currentDuration, setCurrentDuration] = useState(0);
const [totalDuration, setTotalDuration] = useState(0);

React.useEffect(() => {
loadAudio();
}, []);

async function loadAudio() {
setLoaded(false);
setLoading(true);
const checkLoading = await sound.current.getStatusAsync();
if (checkLoading.isLoaded === false) {
try {
const result = await sound.current.loadAsync({ uri: audioUrl });
if (result.isLoaded === false) {
setLoading(false);
console.log("Error in Loading Audio");
} else {
setLoading(false);
setLoaded(true);
}
} catch (error) {
console.log(error);
setLoading(false);
}
} else {
setLoading(false);
}
}

async function playAudio() {
try {
loadAudio();
const result = await sound.current.getStatusAsync();
console.log(result);

  if (result.isLoaded) {
    console.log("Play Audio");
    await sound.current.playAsync();
    setIsPlaying(true);
    setActive(true);
  }

  sound.current.setOnPlaybackStatusUpdate((playbackStatus) => {
    if (playbackStatus.isPlaying) {
      setCurrentDuration(playbackStatus.positionMillis);
      setTotalDuration(playbackStatus.durationMillis);
    }
    if (playbackStatus.didJustFinish) {
      setIsPlaying(false);
      setActive(false);
      setCurrentDuration(0);
      sound.current.unloadAsync();
      loadAudio();
      // console.log(sound.current);
    }
  });
} catch (error) {
  console.log("Cannot Play Audio");
}

}

async function pauseAudio() {
try {
const result = await sound.current.getStatusAsync();
if (result.isLoaded) {
if (result.isPlaying === true) {
console.log("Pause Audio");
sound.current.pauseAsync();
setIsPlaying(false);
setActive(false);
}
}
} catch (error) {
console.log("Cannot Pause Audio");
}
}

return (

<HStack
w="100%"
p={1}
justifyContent={"space-between"}
alignItems={"center"}
space={0}
bg={active ? "blue.50" : "grey.50"}
borderRadius={5}
>
<Button
borderWidth={0}
variant="outline"
colorScheme="blue"
onPress={!isPlaying ? playAudio : pauseAudio}
>
<Icon
as={MaterialIcons}
name={!isPlaying ? "play-arrow" : "pause"}
color={!isPlaying ? "grey.300" : "blue.400"}
style={{ transform: [{ rotateY: "0deg" }] }}
/>

    <Slider
      w="50%"
      size="sm"
      colorScheme={"blue"}
      defaultValue={0}
      value={currentDuration}
      minValue={0}
      maxValue={totalDuration == 0 ? 100 : totalDuration}
      accessibilityLabel="Audio Player"
      step={1}
      isReadOnly={true}
    >
      <Slider.Track bg={"grey"} size={2}>
        <Slider.FilledTrack bg={"blue.400"} size={2} />
      </Slider.Track>
      <Slider.Thumb bg={"blue.400"} ml={-2} />
    </Slider>
    <Text
      fontFamily={"body"}
      color={active ? "blue.600" : "grey.400"}
      mr={2}
    >
      {msToTime(currentDuration)} / {msToTime(totalDuration)}
    </Text>
  </HStack>
</NativeBaseProvider>

);
};

---

The audio player worked well when I was using SDK49. However, after updating to SDK51, the audio player did not work anymore. Whenever I entered the chatScreen with audio message, the following error appeared in the console:

---

ERROR TypeError: Cannot read property 'Track' of undefined

This error is located at:

in AudioPlayerViewTest (created by Bubble)

in RCTView (created by View)

in View (created by Bubble)

in TouchableWithoutFeedback (created by Bubble)

in RCTView (created by View)

in View (created by Bubble)

in Bubble (created by ItemWithSeparator)

in ItemWithSeparator (created by CellRenderer)

in RCTView (created by View)

in View (created by CellRenderer)

in VirtualizedListCellContextProvider (created by CellRenderer)

in CellRenderer (created by VirtualizedList)

in RCTScrollContentView (created by ScrollView)

in RCTScrollView (created by ScrollView)

in ScrollView (created by ScrollView)

in ScrollView (created by VirtualizedList)

in VirtualizedListContextProvider (created by VirtualizedList)

in VirtualizedList (created by VirtualizedSectionList)

in VirtualizedSectionList (created by SectionList)

in SectionList (created by ChatScreen)

in RCTView (created by View)

in View (created by ChatScreen)

in RCTView (created by View)

in View (created by PageContainer)

in PageContainer (created by ChatScreen)

in RCTView (created by View)

in View (created by ImageBackground)

in ImageBackground (created by ChatScreen)

in RNCSafeAreaView

in Unknown (created by ChatScreen)

in ChatScreen (created by SceneView)

in StaticContainer

in EnsureSingleNavigator (created by SceneView)

in SceneView (created by SceneView)

in RCTView (created by View)

in View (created by DebugContainer)

in DebugContainer (created by MaybeNestedStack)

in MaybeNestedStack (created by SceneView)

in RCTView (created by View)

in View (created by SceneView)

in RNSScreen (created by Animated(Anonymous))

in Animated(Anonymous) (created by InnerScreen)

in Suspender (created by Freeze)

in Suspense (created by Freeze)

in Freeze (created by DelayedFreeze)

in DelayedFreeze (created by InnerScreen)

in InnerScreen (created by Screen)

in Screen (created by SceneView)

in SceneView (created by NativeStackViewInner)

in Suspender (created by Freeze)

in Suspense (created by Freeze)

in Freeze (created by DelayedFreeze)

in DelayedFreeze (created by ScreenStack)

in RNSScreenStack (created by ScreenStack)

in ScreenStack (created by NativeStackViewInner)

in NativeStackViewInner (created by NativeStackView)

in RCTView (created by View)

in View (created by SafeAreaProviderCompat)

in SafeAreaProviderCompat (created by NativeStackView)

in NativeStackView (created by NativeStackNavigator)

in PreventRemoveProvider (created by NavigationContent)

in NavigationContent

in Unknown (created by NativeStackNavigator)

in NativeStackNavigator (created by StackNavigator)

in StackNavigator (created by MainNavigator)

in RCTView (created by View)

in View (created by KeyboardAvoidingView)

in KeyboardAvoidingView (created by MainNavigator)

in MainNavigator (created by AppNavigator)

in EnsureSingleNavigator

in BaseNavigationContainer

in ThemeProvider

in NavigationContainerInner (created by AppNavigator)

in AppNavigator (created by App)

in RCTView (created by View)

in View (created by MenuProvider)

in RCTView (created by View)

in View (created by MenuProvider)

in MenuProvider (created by App)

in RNCSafeAreaProvider (created by SafeAreaProvider)

in SafeAreaProvider (created by App)

in RCTView (created by View)

in View (created by GestureHandlerRootView)

in GestureHandlerRootView (created by App)

in Provider (created by App)

in App (created by withDevTools(App))

in withDevTools(App)

in RCTView (created by View)

in View (created by AppContainer)

in RCTView (created by View)

in View (created by AppContainer)

in AppContainer

in main(RootComponent), js engine: hermes

---

Sorry for the clumsy code and the unclear presentation above as I am quite new to programming.

Grateful for the advice from the community on my case. Thanks in advance!