Respond to the sound of a native game

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 view , I want to play a sound. I googled about this, but did not find a suitable answer.

Is it possible to somehow reproduce the sound when I click on something? How can i do this?

Answer 1

Check out React Native Sound , a cross-platform component for accessing your device’s audio controls.

You can use it like this:

 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 the audio component from expo-sdk .

See an example here .

Works with SDK 18.

Answer 3

You can play sound using the expo-av library as follows.

 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> ) } }