undefined is not an object (evaluating 'sound.stopAsync') New to development if anyone could help me out that would be awesome!

[thegirlyoucallryan]

i keep getting this error about sound.stopAsync is not an object but I can use it to stop playback so I don't know what the issue is or how to fix it.

import { Text, View, StyleSheet, Pressable, Alert} from 'react-native'; import Colors from '../constants/Colors'; import {Ionicons } from '@expo/vector-icons'; import { Audio } from 'expo-av';

import React, { useState, useEffect } from 'react';

const Timer = (props) => { const [seconds, setSeconds] = useState(props.time); const [isActive, setIsActive] = useState(false); const [sound, setSound] = useState();

async function playSound() { const { sound } = await Audio.Sound.createAsync( require('../assets/mysterious_bass.wav'),

);

setSound(sound);

await sound.playAsync();

}

useEffect(() => {
return sound ? () => { sound.unloadAsync(); } : undefined;

}, [sound]);

useEffect(()=>{ if(seconds === 0){ playSound();

} 

},[seconds])

const toggle= async()=> { setIsActive(!isActive); try { await sound.stopAsync(); } catch (error) { console.error(error); }

}

const reset = async () => { setSeconds(props.time); setIsActive(false); try { await sound.stopAsync(); } catch (error) { console.error(error); } }

useEffect(() => { let interval = null;

if (isActive) {
  interval = setInterval(() => {
    setSeconds(seconds => seconds - 1);

  }, 1000);
} else if (!isActive && seconds !== 0) {
  clearInterval(interval);
} 
return () => clearInterval(interval);

}, [isActive, seconds]);

return (

{isActive ? : } 00:{seconds} Reset

); };

package.json

{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.3.0", "@fortawesome/free-regular-svg-icons": "^6.0.0-beta3", "@fortawesome/free-solid-svg-icons": "^6.0.0", "@fortawesome/react-fontawesome": "^0.1.17", "@fortawesome/react-native-fontawesome": "^0.2.7", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.2.0", "axios": "^0.26.0", "expo": "~44.0.0", "expo-app-loading": "~1.3.0", "expo-av": "~10.2.0", "expo-linear-gradient": "~11.0.3", "expo-status-bar": "~1.2.0", "firebase": "^9.6.7", "firebase-functions": "^3.18.1", "react": "17.0.1", "react-dom": "17.0.1", "react-icons": "^4.3.1", "react-native": "0.64.3", "react-native-elements": "^3.4.2", "react-native-gesture-handler": "~2.1.0", "react-native-linear-gradient": "^2.5.6", "react-native-reanimated": "~2.3.1", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "~3.10.1", "react-native-svg": "^12.1.1", "react-native-web": "0.17.1", "react-navigation": "^4.4.4", "react-navigation-header-buttons": "^6.3.1", "react-navigation-material-bottom-tabs": "^2.3.5", "react-navigation-stack": "^2.10.4", "react-redux": "^7.2.6", "redux": "^4.1.2", "redux-thunk": "^2.4.1" }, "devDependencies": { "@babel/core": "^7.12.9", "typescript": "^4.5.5" }, "private": true }

[wodin]

Hi @thegirlyoucallryan

Please edit your comment to add three backticks on a line by themselves before a block of code and another three backticks on a line after a block of code. Otherwise the formatting of the code gets messed up and it's hard to see where the problem is. Like this:

```
code here
more code
```

Also probably better to ask this sort of stuff on forums.expo.dev.