Remnants audio updates & return-to-menu after play

Remnant.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import {
 	View,
-	Text, 
+	Text,
 	Image,
 	Animated,
 	Dimensions,
@@ -11,36 +11,36 @@ import {
 } from 'react-native';
 import { StackNavigator } from 'react-navigation';
 import { remnants } from './config';
-import Sound from 'react-native-sound'; 
+import Sound from 'react-native-sound';
 
 
 const height = Dimensions.get('window').height;
 const width = Dimensions.get('window').width;
 
 export default class RemnantDisplay extends Component {
 	constructor(props) {
-		super(props); 
+		super(props);
 		this.state = {};
-	
+
 	};
 
 	render() {
-		const navigation = this.props.navigation; 
+		const navigation = this.props.navigation;
 		const image = navigation.getParam('picture', "require('./assets/RemnantsAppearPlate.png')");
-		const audio = navigation.getParam('audio', 'audiotest3.mp3');
-
-		const sound = new Sound(audio); 
-		const myDuration = sound.getDuration; 
-		const duration = myDuration.bind(sound); 
+		const audio = navigation.getParam('audio', 'remnant_1.mp3');
 
+		const sound = new Sound(audio);
+		const myDuration = sound.getDuration;
+		const duration = myDuration.bind(sound);
 
 
 		return(
-			<RemnantInteraction  
+			<RemnantInteraction
 				image={image}
 				audio={audio}
 				sound={sound}
 				duration={duration}
+				navigation={navigation}
 			/>
 		)
 	}
@@ -50,39 +50,40 @@ export default class RemnantDisplay extends Component {
 
 class RemnantInteraction extends Component {
 	constructor({props}){
-		super(props); 
+		super(props);
 		this.state = {
 			pressFade: new Animated.Value(1),
 			pressHint: new Animated.Value(1)
 		};
 	}
 
-		fade = ( ) => {			
-			console.log("fade duration " + this.props.duration()); 
+		fade = ( ) => {
+			console.log("fade duration " + this.props.duration());
 
 			Animated.timing(this.state.pressFade, {
 				toValue: 0,
 				duration: this.props.duration() * 1000,
 				easing: Easing.out(Easing.cubic)
 				}).start();
-			this.props.sound.play(); 
+			this.props.sound.play((success) => {
+                this.props.navigation.navigate("RemnantChooser");
+   			});
 		}
 
 		stopFade = ( ) => {
 			Animated.timing(this.state.pressFade, {
 				toValue: 0,
 				duration: this.props.duration()  * 1000,
-			}).stop();	
-			
-			this.props.sound.pause(); 
-			
+			}).stop();
+
+			this.props.sound.pause();
+
 
 			this.props.sound.getCurrentTime((seconds) => {
 				let remaining =  this.props.duration() - seconds;
 				console.log( "elapsed " + seconds + "\nremaining " + remaining );
 			})
-		}		
-
+		}
 
 		pressHinter = () => {
 			Animated.sequence([

config.js

@@ -43,37 +43,37 @@ export const remnants = [
 { 
   id: 1, 
   picture: require('./assets/remnant1v1v1v1.png'),
-  audio: 'audiotest3.mp3', 
+  audio: 'remnant_1.mp3',
   flex: 2,
 }, 
 { 
   id: 2,
   picture: require('./assets/remnant2v1v1v1.png'),
-  audio: 'audiotest3.mp3', 
+  audio: 'remnant_2.mp3',
   flex: 1,
 }, 
 {
   id: 3,
   picture: require('./assets/remnant3v1v1v1.png'),
-  audio: 'audiotest3.mp3', 
+  audio: 'remnant_3.mp3',
   flex: 1,
 }, 
 {
   id: 4,
   picture: require('./assets/remnant4v1v1v1.png'),
-  audio: 'audiotest3.mp3', 
+  audio: 'remnant_4.mp3',
   flex: 2,
 }, 
 {
   id: 5,
   picture: require('./assets/remnant5v1v1v1.png'),
-  audio: 'audiotest3.mp3', 
+  audio: 'remnant_5.mp3',
   flex: 1,
 }, 
 {
   id: 6,
   picture: require('./assets/remnant6v1v1v1.png'),
-  audio: 'audiotest3.mp3', 
+  audio: 'remnant_6.mp3',
   flex: 2,
 },
 ];
@@ -85,13 +85,13 @@ export const remnants = [
 export const remnantsPlaceHolders = [
   {id: 0,
   image: require('./assets/RemnantsAppearPlate.png'),
-  audio: 'audiotest1.mp3',
+  audio: 'remnant_1.mp3',
 },{id: 1,
   image: require('./assets/CITYORNAMENT5.png'),
-  audio: 'audiotest2.mp3',
+  audio: 'remnant_2.mp3',
 },{id: 2,
   image: require('./assets/Aashiyaan.png'),
-  audio: 'audiotest‘3.mp3',
+  audio: 'remnant_3‘.mp3',
 },
 ]