...

screens/quiz.js

@@ -27,31 +27,31 @@ import Sound from 'react-native-sound';
 const path = RNFS.DocumentDirectoryPath + '/settings.txt';
 const path1 = RNFS.DocumentDirectoryPath + '/counter.txt';
 const NOTESWHITE = [
-  {name: 'C1', url: require('../sound/c1.mp3')},
-  {name: 'D1', url: require('../sound/d1.mp3')},
-  {name: 'E1', url: require('../sound/e1.mp3')},
-  {name: 'F1', url: require('../sound/f1.mp3')},
-  {name: 'G1', url: require('../sound/g1.mp3')},
-  {name: 'A1', url: require('../sound/a1.mp3')},
-  {name: 'B1', url: require('../sound/b1.mp3')},
-  {name: 'C2', url: require('../sound/c2.mp3')},
-  {name: 'D2', url: require('../sound/d2.mp3')},
-  {name: 'E2', url: require('../sound/e2.mp3')},
-  {name: 'F2', url: require('../sound/f2.mp3')},
-  {name: 'G2', url: require('../sound/g2.mp3')},
-  {name: 'A2', url: require('../sound/a2.mp3')},
-  {name: 'B2', url: require('../sound/b2.mp3')},
+  {name: 'C1', url: require('../sound/c.mp3')},
+  {name: 'D1', url: require('../sound/d.mp3')},
+  {name: 'E1', url: require('../sound/e.mp3')},
+  {name: 'F1', url: require('../sound/f.mp3')},
+  {name: 'G1', url: require('../sound/g.mp3')},
+  {name: 'A1', url: require('../sound/a.mp3')},
+  {name: 'B1', url: require('../sound/b.mp3')},
+  {name: 'C2', url: require('../sound/cc.mp3')},
+  {name: 'D2', url: require('../sound/dd.mp3')},
+  {name: 'E2', url: require('../sound/ee.mp3')},
+  {name: 'F2', url: require('../sound/ff.mp3')},
+  {name: 'G2', url: require('../sound/gg.mp3')},
+  {name: 'A2', url: require('../sound/aa.mp3')},
+  {name: 'B2', url: require('../sound/bb.mp3')},
 ];
-const NOTESCC = [{name: 'C#1', url: require('../sound/c_1.mp3')}];
-const NOTESDD = [{name: 'D#1', url: require('../sound/d_1.mp3')}];
-const NOTESFF = [{name: 'F#1', url: require('../sound/f_1.mp3')}];
-const NOTESGG = [{name: 'G#1', url: require('../sound/g_1.mp3')}];
-const NOTESAA = [{name: 'A#1', url: require('../sound/a_1.mp3')}];
-const NOTESCC1 = [{name: 'C#2', url: require('../sound/c_2.mp3')}];
-const NOTESDD1 = [{name: 'D#2', url: require('../sound/d_2.mp3')}];
-const NOTESFF1 = [{name: 'F#2', url: require('../sound/f_2.mp3')}];
-const NOTESGG1 = [{name: 'G#2', url: require('../sound/g_2.mp3')}];
-const NOTESAA1 = [{name: 'A#2', url: require('../sound/a_2.mp3')}];
+const NOTESCC = [{name: 'C#1', url: require('../sound/c_c.mp3')}];
+const NOTESDD = [{name: 'D#1', url: require('../sound/d_d.mp3')}];
+const NOTESFF = [{name: 'F#1', url: require('../sound/f_f.mp3')}];
+const NOTESGG = [{name: 'G#1', url: require('../sound/g_g.mp3')}];
+const NOTESAA = [{name: 'A#1', url: require('../sound/a_a.mp3')}];
+const NOTESCC1 = [{name: 'C#2', url: require('../sound/c_cc.mp3')}];
+const NOTESDD1 = [{name: 'D#2', url: require('../sound/d_dd.mp3')}];
+const NOTESFF1 = [{name: 'F#2', url: require('../sound/f_ff.mp3')}];
+const NOTESGG1 = [{name: 'G#2', url: require('../sound/g_gg.mp3')}];
+const NOTESAA1 = [{name: 'A#2', url: require('../sound/a_aa.mp3')}];
 const keywordsList = [];
 
 var maxCount = 5;
@@ -63,6 +63,7 @@ var stime = 0;
 class Quiz extends React.Component {
     constructor(props) {
     super(props);
+    Sound.setCategory('Playback'); // true = mixWithOthers
     this.state = {
       logbook: [],
       index:0,

screens/settings.js

@@ -26,8 +26,37 @@ const config = {
   deviceWidth: Dimensions.get('window').width,
   deviceHeight: Dimensions.get('window').height,
 };
-const note = [];
 var counter = 0;
+/* eslint-disable prettier/prettier */
+const notes = [
+   'C Major',
+   'D Major','E Major',
+   'F Sharp Major',
+   'F Major',
+   'E Flat Major',
+   'D Flat Major',
+   'G Major',
+   'A Major',
+   'B Major',
+   'C Sharp Major',
+   'B Flat Major',
+   'A Flat Major',
+   'G Flat Major',
+   'Bass Clef C Major',
+   'Bass Clef D Major',
+   'Bass Clef E Major',
+   'Bass Clef F Sharp Major',
+   'Bass Clef F Major',
+   'Bass Clef E Flat Major',
+   'Bass Clef D Flat Major',
+   'Bass Clef G Major',
+   'Bass Clef A Major',
+   'Bass Clef B Major',
+   'Bass Clef C Sharp Major',
+   'Bass Clef B Flat Major',
+   'Bass Clef A Flat Major',
+   'Bass Clef G Flat Major',
+];
 
 export default class Settings extends React.Component {
     constructor(props) {
@@ -37,23 +66,24 @@ export default class Settings extends React.Component {
     };
   }
   toggleKeyword = (keyword) => {
-    let list = note;
+  // console.log(notes.indexOf(keyword));
+    let list = notes;
     let index = -1;
-    if ((index = note.indexOf(keyword)) !== -1) {
+    if ((index = notes.indexOf(keyword)) !== -1) {
       list.splice(index, 1);
     } else {
          list.push(keyword);
     }
-    this.setState({note: list});
-    this.saveData(note);
+    this.setState({notes: list});
+    this.saveData(notes);
     this.displayData();
-    console.log(counter);
+   // console.log(notes);
   };
 
     saveData = async () => {
-      RNFS.writeFile(path,JSON.stringify(note),'utf8',)
+      RNFS.writeFile(path,JSON.stringify(notes),'utf8',)
         .then((success) => {
-        console.log(JSON.stringify(note));
+        console.log(JSON.stringify(notes));
         })
         .catch((err) => {
           console.log(err.message);
@@ -73,7 +103,7 @@ export default class Settings extends React.Component {
       saveData1 = async () => {
       RNFS.writeFile(path1,JSON.stringify(counter),'utf8',)
         .then((success) => {
-        //console.log(JSON.stringify(note));
+        //console.log(JSON.stringify(counter));
         })
         .catch((err) => {
           console.log(err.message);
@@ -91,10 +121,10 @@ export default class Settings extends React.Component {
   };
 
   componentDidMount() {
-    note.splice(0, note.length);
-    console.log(note);
+   // notes.splice(0, notes.length);
+   // console.log(notes);
     Orientation.lockToPortrait();
-    console.log(note.length);
+   // console.log(notes.length);
     counter = 0;
     RNFS.unlink(path).then(res => {
     console.log('delete');
@@ -125,9 +155,6 @@ export default class Settings extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-        <ImageBackground
-          source={require('../img/background.jpg')}
-          style={{width: config.deviceWidth, height: config.deviceHeight}}>
           <SafeAreaView>
           <View style={{alignItems:'center',marginTop: '15%',  marginLeft: config.deviceWidth * 0.08,
                   marginRight: config.deviceWidth * 0.1, flexDirection: 'row',
@@ -150,7 +177,7 @@ export default class Settings extends React.Component {
             rightButtonBackgroundColor="black"
             leftButtonBackgroundColor="black"/>
             </View>
-            <ScrollView style={{marginTop: '5%', marginBottom : '20%'}}>
+            <ScrollView style={{marginTop: '5%'}}>
               <View
                 style={{
                   flexDirection: 'row',
@@ -163,7 +190,7 @@ export default class Settings extends React.Component {
                   <View key={id}>
                     <TouchableOpacity
                       style={
-                        note.find((element) => element === item.name)
+                        notes.find((element) => element === item.name)
                           ? styles.selectedKeywordStyle
                           : styles.buttonStyle
                       }
@@ -185,7 +212,6 @@ export default class Settings extends React.Component {
               </View>
             </ScrollView>
           </SafeAreaView>
-        </ImageBackground>
       </View>
     );
   }
@@ -205,7 +231,8 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'black',
     borderRadius: 10,
-    backgroundColor: 'white',
+    backgroundColor: 'rgba(0,0,0,0)',
+    //opacity: 0.5,
     padding: 10,
     marginRight: config.deviceWidth * 0.03,
     marginBottom: config.deviceHeight * 0.03,
@@ -216,7 +243,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderWidth: 1,
     borderColor: 'black',
-     backgroundColor: 'lightpink',
+     backgroundColor: 'white',
+   // backgroundColor: 'rgba(0,0,0,0)',
+  // opacity: 0.5,
     borderRadius: 10,
     marginRight: config.deviceWidth * 0.03,
     marginBottom: config.deviceHeight * 0.03,

style/style.js

@@ -318,7 +318,7 @@ export default StyleSheet.create({
   },
   selectedKeywordStyleSettings: {
     flex: 1,
-    backgroundColor: 'lightpink',
+    backgroundColor: 'rgba(0,0,0,0)',
     width: config.deviceHeight * 0.4,
     alignItems: 'center',
     borderWidth: 1,