Typeerror: Undefined is not an Object (evaluating 'this.sound.playAsync')

Question

I can’t handle very well with The Expo-av (I don’t think anyone knows why I can’t find tutorials), but what I’m doing wrong?

Error

import React,{ Component } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { Audio } from 'expo-av'

import Icon from 'react-native-vector-icons/Ionicons';
import styles from './styles';

export default class ButtonsManager extends Component {
  async componentDidAmount() {
    Audio.setAudioModeAsync({
      allowsRecordingIOS: false,
      interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
      playsInSilentModeIOS: true,
      interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
      shouldDuckAndroid: true,
      staysActiveInBackground: true,
      playThroughEarpieceAndroid: true
    });

    this.sound = new Audio.Sound();

    const status = {
      shouldPlay: false
    };

    this.sound.loadAsync(require('../../../../musics/luxuria.mp3'), status, false);
  }


  playSound() {
    this.sound.playAsync();
  }

  render() { 
    return(
      <View style={styles.container}>
        <TouchableOpacity style={styles.buttonContainer} onPress={this.playSound.bind(this)}>
          <Icon style={styles.icon} size={50} name='ios-pause' />
        </TouchableOpacity>
      </View>
    );
  }
}

Answer 1

What happens is that "sound" does not exist within your "Buttonsmanager" class. What you can do is save "sound" within the state. Your code would look like this:

import React,{ Component } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { Audio } from 'expo-av'

import Icon from 'react-native-vector-icons/Ionicons';
import styles from './styles';

export default class ButtonsManager extends Component {
  state = {
    sound: null
  };
  async componentDidAmount() {
    Audio.setAudioModeAsync({
      allowsRecordingIOS: false,
      interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
      playsInSilentModeIOS: true,
      interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
      shouldDuckAndroid: true,
      staysActiveInBackground: true,
      playThroughEarpieceAndroid: true
    });

    this.loadAudio();

  }

  async loadAudio() {
    try {
        const sound = new Audio.Sound();
        const status = {
            shouldPlay: false
        };

        await sound.loadAsync(require('../../../../musics/luxuria.mp3'), status, false);
        this.setState({
            sound
        });
    } catch (e) {
      console.log(e);
    }
  }



  playSound() {
    this.state.sound.playAsync();
  }

  render() { 
    return(
      <View style={styles.container}>
        <TouchableOpacity style={styles.buttonContainer} onPress={this.playSound.bind(this)}>
          <Icon style={styles.icon} size={50} name='ios-pause' />
        </TouchableOpacity>
      </View>
    );
  }
}