Im new to react-native and Im building an app to play sounds on button press and I couldnt achieve this, is it because of errors in my code ? Also pls suggest the solution for playing the sounds and suggest the corrections
Here's my code:
import React, { Component } from 'react';
import { StatusBar, Dimensions, Image, TouchableWithoutFeedback, Animated } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Sound from 'react-native-sound';
const a = require('./Images/landing-bnt1-on.png');
const b = require('./Images/landing-bnt1.png');
const c = require('./Images/landing-bnt2-on.png');
const d = require('./Images/landing-bnt2.png');
const btnSound = new Sound('./Sounds/btn_sound.mp3');
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
class MainScreen extends Component {
state = {
computerPressed: false,
teamPressed: false
}
componentWillMount() {
this.slide1 = new Animated.Value(0);
this.slide2 = new Animated.Value(0);
this.bnt1();
this.bnt2();
}
bnt1() {
Animated.timing(
this.slide1, {
delay: 100,
toValue: w / 1.161,
duration: 300,
}
).start();
}
bnt2() {
Animated.timing(
this.slide2, {
delay: 300,
toValue: w / 1.161,
duration: 300,
}
).start();
}
render() {
return (
<Image
source={require('./Images/bg_img.png')}
style={styles.backgroundStyle} >
<StatusBar hidden />
<Image
source={require('./Images/History.png')}
style={styles.historybuttonStyle} />
<Image
source={require('./Images/logo_ws.png')}
style={styles.logoStyle} />
<TouchableWithoutFeedback
onPress={() => {
btnSound.play();
Actions.screen2({ challenge: 'Computer' });
}
}
onPressIn={() => {
this.setState({ computerPressed: true });
}
}
onPressOut={() => {
this.setState({ computerPressed: false });
}
} >
<Animated.Image
source={this.state.computerPressed ? a : b}
style={[styles.landingbnt1Style, { transform: [{ translateX: this.slide1 }] }]} />
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
Actions.screen2({ challenge: 'Team' });
}
}
onPressIn={() => {
this.setState({ teamPressed: true });
}
}
onPressOut={() => {
this.setState({ teamPressed: false });
}
} >
<Animated.Image
source={this.state.teamPressed ? c : d}
style={[styles.landingbnt2Style, { transform: [{ translateX: this.slide2 }] }]} />
</TouchableWithoutFeedback>
</Image>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
width: w,
height: h,
flexWrap: 'wrap',
position: 'relative'
},
logoStyle: {
width: w,
height: h,
resizeMode: 'contain',
position: 'absolute',
bottom: h / 15
},
historybuttonStyle: {
width: w / 7.5,
height: h / 14,
right: (w / 20),
top: (h / 40),
position: 'absolute'
},
landingbnt1Style: {
width: w / 1.44,
height: h / 13.14,
top: h / 1.41,
left: -(w / 1.44)
},
landingbnt2Style: {
width: w / 1.44,
height: h / 13.14,
top: h / 1.35,
left: -(w / 1.44)
}
};
export default MainScreen;
It may not be the correct way of using react-native-sound it is because i couldnt find an example it would be better I someone also share their codes using react-native-sound
You can't load the sound from any directories. You have to Save your sound clip files under the directory android/app/src/main/res/raw for android and for ios Open Xcode and add your sound files to the project (Right-click the project and select Add Files to [PROJECTNAME])
You can find the detail docs for this at the link below :-
and for theworking example for this you can check code in the link below :-
I hope this is what you are looking for :)