react native play sound on event - react-native

Question

I have a component like:
import React, { Component } from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
class MovieList extends Component {
handlePress() {
// Play some sound here
}
render() {
const { movie } = this.props
return (
<TouchableOpacity onPress={this.handlePress.bind(this)}>
<View style={styles.movie}>
<Text style={styles.name}>{movie.name}</Text>
<View style={styles.start}>
<Text style={styles.text}>Start</Text>
</View>
</View>
</TouchableOpacity>
)
}
}
Here when I touch the view I want to play some sound.
I have googled about it but not found any appropriate answer
Is there anyway I can play sound when I press to something?
How can I do this ?

Answer 1

Check out React Native Sound - a cross platform component for accessing device audio controls.
You can use it like so:
const Sound = require('react-native-sound')
let hello = new Sound('hello.mp3', Sound.MAIN_BUNDLE, (error) => {
if (error) {
console.log(error)
}
})
hello.play((success) => {
if (!success) {
console.log('Sound did not play')
}
})

Answer 2

You can try Audio component from expo-sdk.
Check an example here.
It works with sdk 18.

Answer 3

You can play the sound with the expo-av library like this.
import { Audio } from "expo-av";
class MovieList extends Component {
async handlePress() {
try {
const { sound: soundObject, status } = await
Audio.Sound.createAsync('sound.mp3', { shouldPlay: true });
await soundObject.playAsync();
} catch (error) { console.log(error); }
}
render() {
const { movie } = this.props
return (
<TouchableOpacity onPress={this.handlePress.bind(this)}>
<View style={styles.movie}>
<Text style={styles.name}>{movie.name}</Text>
<View style={styles.start}>
<Text style={styles.text}>Start</Text>
</View>
</View>
</TouchableOpacity>
)
}
}