.......

screens/dataOctave.js

+/* eslint-disable prettier/prettier */
+const octavelist = [
+
+{nameoctave : 'Octave 1', listoctave:[
+  {name: 'C1', url: require('../media/sound/white/w_c.mp3')},
+  {name: 'D1', url: require('../media/sound/white/w_d.mp3')},
+  {name: 'E1', url: require('../media/sound/white/w_e.mp3')},
+  {name: 'F1', url: require('../media/sound/white/w_f.mp3')},
+  {name: 'G1', url: require('../media/sound/white/w_g.mp3')},
+  {name: 'A1', url: require('../media/sound/white/w_a.mp3')},
+  {name: 'B1', url: require('../media/sound/white/w_b.mp3')},
+
+  {name: 'C#1', url: require('../media/sound/black/b_c.mp3')},
+  {name: 'D#1', url: require('../media/sound/black/b_d.mp3')},
+  {name: 'F#1', url: require('../media/sound/black/b_f.mp3')},
+  {name: 'G#1', url: require('../media/sound/black/b_g.mp3')},
+  {name: 'A#1', url: require('../media/sound/black/b_a.mp3')},
+]},
+
+{nameoctave : 'Octave 2', listoctave:[
+  {name: 'C2', url: require('../media/sound/white/w_cc.mp3')},
+  {name: 'D2', url: require('../media/sound/white/w_dd.mp3')},
+  {name: 'E2', url: require('../media/sound/white/w_ee.mp3')},
+  {name: 'F2', url: require('../media/sound/white/w_ff.mp3')},
+  {name: 'G2', url: require('../media/sound/white/w_gg.mp3')},
+  {name: 'A2', url: require('../media/sound/white/w_aa.mp3')},
+  {name: 'B2', url: require('../media/sound/white/w_bb.mp3')},
+
+  {name: 'C#2', url: require('../media/sound/black/b_cc.mp3')},
+  {name: 'D#2', url: require('../media/sound/black/b_dd.mp3')},
+  {name: 'F#2', url: require('../media/sound/black/b_ff.mp3')},
+  {name: 'G#2', url: require('../media/sound/black/b_gg.mp3')},
+  {name: 'A#2', url: require('../media/sound/black/b_aa.mp3')},
+]},
+
+{nameoctave : 'Octave 3', listoctave:[
+  {name: 'C3', url: require('../media/sound/white/w_ccc.mp3')},
+  {name: 'D3', url: require('../media/sound/white/w_ddd.mp3')},
+  {name: 'E3', url: require('../media/sound/white/w_eee.mp3')},
+  {name: 'F3', url: require('../media/sound/white/w_fff.mp3')},
+  {name: 'G3', url: require('../media/sound/white/w_ggg.mp3')},
+  {name: 'A3', url: require('../media/sound/white/w_aaa.mp3')},
+  {name: 'B3', url: require('../media/sound/white/w_bbb.mp3')},
+
+  {name: 'C#3', url: require('../media/sound/black/b_ccc.mp3')},
+  {name: 'D#3', url: require('../media/sound/black/b_ddd.mp3')},
+  {name: 'F#3', url: require('../media/sound/black/b_fff.mp3')},
+  {name: 'G#3', url: require('../media/sound/black/b_ggg.mp3')},
+  {name: 'A#3', url: require('../media/sound/black/b_aaa.mp3')},
+]},
+
+{nameoctave : 'Octave 4', listoctave:[
+  {name: 'C4', url: require('../media/sound/white/w_cccc.mp3')},
+  {name: 'D4', url: require('../media/sound/white/w_dddd.mp3')},
+  {name: 'E4', url: require('../media/sound/white/w_eeee.mp3')},
+  {name: 'F4', url: require('../media/sound/white/w_ffff.mp3')},
+  {name: 'G4', url: require('../media/sound/white/w_gggg.mp3')},
+  {name: 'A4', url: require('../media/sound/white/w_aaaa.mp3')},
+  {name: 'B4', url: require('../media/sound/white/w_bbbb.mp3')},
+
+  {name: 'C#4', url: require('../media/sound/black/b_cccc.mp3')},
+  {name: 'D#4', url: require('../media/sound/black/b_dddd.mp3')},
+  {name: 'F#4', url: require('../media/sound/black/b_ffff.mp3')},
+  {name: 'G#4', url: require('../media/sound/black/b_gggg.mp3')},
+  {name: 'A#4', url: require('../media/sound/black/b_aaaa.mp3')},
+]},
+
+{nameoctave : 'Octave 5', listoctave:[
+  {name: 'C5', url: require('../media/sound/white/w_ccccc.mp3')},
+  {name: 'D5', url: require('../media/sound/white/w_ddddd.mp3')},
+  {name: 'E5', url: require('../media/sound/white/w_eeeee.mp3')},
+  {name: 'F5', url: require('../media/sound/white/w_fffff.mp3')},
+  {name: 'G5', url: require('../media/sound/white/w_ggggg.mp3')},
+  {name: 'A5', url: require('../media/sound/white/w_aaaaa.mp3')},
+  {name: 'B5', url: require('../media/sound/white/w_bbbbb.mp3')},
+
+  {name: 'C#5', url: require('../media/sound/black/b_ccccc.mp3')},
+  {name: 'D#5', url: require('../media/sound/black/b_ddddd.mp3')},
+  {name: 'F#5', url: require('../media/sound/black/b_fffff.mp3')},
+  {name: 'G#5', url: require('../media/sound/black/b_ggggg.mp3')},
+  {name: 'A#5', url: require('../media/sound/black/b_aaaaa.mp3')},
+]},
+
+{nameoctave : 'Octave 6', listoctave:[
+  {name: 'C6', url: require('../media/sound/white/w_cccccc.mp3')},
+  {name: 'D6', url: require('../media/sound/white/w_dddddd.mp3')},
+  {name: 'E6', url: require('../media/sound/white/w_eeeeee.mp3')},
+  {name: 'F6', url: require('../media/sound/white/w_ffffff.mp3')},
+  {name: 'G6', url: require('../media/sound/white/w_gggggg.mp3')},
+  {name: 'A6', url: require('../media/sound/white/w_aaaaaa.mp3')},
+  {name: 'B6', url: require('../media/sound/white/w_bbbbbb.mp3')},
+
+  {name: 'C#6', url: require('../media/sound/black/b_cccccc.mp3')},
+  {name: 'D#6', url: require('../media/sound/black/b_dddddd.mp3')},
+  {name: 'F#6', url: require('../media/sound/black/b_ffffff.mp3')},
+  {name: 'G#6', url: require('../media/sound/black/b_gggggg.mp3')},
+  {name: 'A#6', url: require('../media/sound/black/b_aaaaaa.mp3')},
+]},
+
+{nameoctave : 'Octave 7', listoctave:[
+  {name: 'C7', url: require('../media/sound/white/w_ccccccc.mp3')},
+  {name: 'D7', url: require('../media/sound/white/w_ddddddd.mp3')},
+  {name: 'E7', url: require('../media/sound/white/w_eeeeeee.mp3')},
+  {name: 'F7', url: require('../media/sound/white/w_fffffff.mp3')},
+  {name: 'G7', url: require('../media/sound/white/w_ggggggg.mp3')},
+  {name: 'A7', url: require('../media/sound/white/w_aaaaaaa.mp3')},
+  {name: 'B7', url: require('../media/sound/white/w_bbbbbbb.mp3')},
+
+  {name: 'C#7', url: require('../media/sound/black/b_ccccccc.mp3')},
+  {name: 'D#7', url: require('../media/sound/black/b_ddddddd.mp3')},
+  {name: 'F#7', url: require('../media/sound/black/b_fffffff.mp3')},
+  {name: 'G#7', url: require('../media/sound/black/b_ggggggg.mp3')},
+  {name: 'A#7', url: require('../media/sound/black/b_aaaaaaa.mp3')},
+  ]},
+
+ ];
+
+export default octavelist;

screens/listening.js

@@ -22,6 +22,7 @@ import {Stopwatch} from 'react-native-stopwatch-timer';
 import Orientation from 'react-native-orientation';
 import * as RNFS from 'react-native-fs';
 import Listennotes from './dataListen';
+import octavelist from './dataOctave';
 //import OtherClass from './saveRecords';
 import Sound from 'react-native-sound';
 import moment from 'moment';
@@ -63,10 +64,10 @@ const wroSound = require('../media/sound/wrong.mp3');
 const keySound = Listennotes;
 
 var soundN = '';
-//var indexS = 0;
+var indexS = 0;
 var stime = 0;
-//var records = [];
-
+var imageN = '';
+var indexN = 0;
 
 class Listen extends React.Component {
     constructor(props) {
@@ -88,14 +89,16 @@ class Listen extends React.Component {
       showMusic : false,
       maxCount : 5,
       records: [],
+      choose :  octavelist,
+      soundName : '',
     };
   }
 
     toggleKeyword = (keyword) => {
-    console.log(keyword);
+    console.log('Press: ' + keyword);
     //indexS = Listennotes.findIndex(item=> item.name === keyword);
-    console.log(Listennotes[soundN].name);
-      if (keyword === Listennotes[soundN].name) {
+    console.log(Listennotes[indexS].name);
+      if (keyword === Listennotes[indexS].name) {
          this.correctAlert();
       if ( (this.state.count + 1) > this.state.maxCount) {
         this.setState({correct : this.state.correct + 1});
@@ -105,7 +108,7 @@ class Listen extends React.Component {
       }
       else {
         this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
-        this.randomSound();
+            this.displayData1();
     }
     } else {
        this.wrongAlert();
@@ -118,7 +121,7 @@ class Listen extends React.Component {
       else {
         this.setState({showW: true});
         this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
-         this.randomSound();
+         this.displayData1();
     }
     }
   };
@@ -176,11 +179,12 @@ class Listen extends React.Component {
 
 
   playButton = () => {
-   console.log('play');
-    console.log(soundN);
-    console.log(Listennotes[soundN]);
+   //console.log('play');
+    indexS = Listennotes.findIndex(item=> item.name ===  this.state.soundName);
+    //console.log(indexS);
+    console.log('Play Sound:' + Listennotes[indexS].name);
     this.setState({showMusic: true});
-    var playSound = new Sound(keySound[soundN].url, (error) => {
+    var playSound = new Sound(keySound[indexS].url, (error) => {
       if (error) {
         console.log('failed to load the sound', error);
         return;
@@ -250,7 +254,8 @@ class Listen extends React.Component {
   //this.removeArray();
   BackHandler.addEventListener('hardwareBackPress', this.homeExit);
   Orientation.lockToLandscape();
-  this.randomSound();
+  //this.randomSound();
+  this.displayData1();
   this.reset();
   }
 
@@ -262,11 +267,40 @@ class Listen extends React.Component {
   }
   ';';
 
-   randomSound= async () => {
-      this.setState({records: []});
+   randomSound(){
+            // console.log(ccc);
+            //  soundN = Math.floor(Math.random() * keySound.length);
+            //  console.log(Listennotes[soundN]);
+              //indexS = Listennotes.findIndex(item=> item.name === this.state.name);
+           console.log(this.state.name);
+           //   console.log(indexN);
+            console.log(this.state.records);
+              soundN = Math.floor(Math.random() * this.state.records.length);
+            //  console.log(soundN);
+               this.setState({
+                soundName : this.state.records[soundN].name,
+                });
+              console.log('Random Sound:' + this.state.soundName);
+      }
+
+
+ /* displayData = async () => {
   try {
-          const value = await AsyncStorage.getItem('@setlisten_key');
+    const value = await AsyncStorage.getItem('@listen_key');
     console.log(JSON.parse(value));
+    console.log(octave.map((octaven) => octaven.nameoctave));
+    console.log(octave.map((octaven) => octaven.listoctave.map((n) => n.name)));
+  } catch (error) {
+    // Error retrieving data
+  }
+};
+*/
+
+  displayData1 = async () => {
+// this.setState({records: []});
+  try {
+    const value = await AsyncStorage.getItem('@listen_key');
+   /// console.log(JSON.parse(value));
     if (value !== null) {
       // We have data!!
        this.setState({
@@ -277,49 +311,64 @@ class Listen extends React.Component {
         .then((ccc) => {
         console.log('has notes has counter');
        // console.log(ccc);
-              soundN = Math.floor(Math.random() * keySound.length);
-              console.log(Listennotes[soundN]);
+        imageN = Math.floor(Math.random() * this.state.logbook.length);
         this.setState({
+        name : this.state.logbook[imageN],
         maxCount : ccc,
+        records : octavelist[imageN].listoctave,
         });
-              //indexS = Listennotes.findIndex(item=> item.name === this.state.name);
-            // console.log(this.state.name);
+        indexN = octavelist.findIndex(item=> item.nameoctave ===  this.state.name);
+         this.setState({
+        records : octavelist[indexN].listoctave,
+        });
+        this.randomSound();
         })
         .catch((err) => {
         console.log(err.message, err.code);
         console.log('has notes no counter');
-              soundN = Math.floor(Math.random() * keySound.length);
-               console.log(Listennotes[soundN]);
+         imageN = Math.floor(Math.random() * this.state.logbook.length);
         this.setState({
-              maxCount : 10,
+        name : this.state.logbook[imageN],
+        maxCount : 5,
+        records : octavelist[imageN].listoctave,
         });
+        indexN = octavelist.findIndex(item=> item.nameoctave ===  this.state.name);
+         this.setState({
+        records : octavelist[indexN].listoctave,
+        });
+        this.randomSound();
         });
     }
     else {
          RNFS.readFile(path1, 'ascii')
             .then((res) => {
               console.log('no notes has counter');
-              soundN = Math.floor(Math.random() * keySound.length);
-               console.log(Listennotes[soundN]);
+             imageN = Math.floor(Math.random() * octavelist.length);
+             indexN = imageN;
              this.setState({
+             name : octavelist[indexN].nameoctave,
+             records : octavelist[indexN].listoctave,
             maxCount : res,
              });
-                  //console.log(res);
+              this.randomSound();
          })
          .catch(() => {
          // console.log(err.message, err.code);
           console.log('no notes no counter');
-                soundN = Math.floor(Math.random() * keySound.length);
-                 console.log(Listennotes[soundN]);
+          imageN = Math.floor(Math.random() * octavelist.length);
+          indexN = imageN;
           this.setState({
+          name : octavelist[indexN].nameoctave,
+          records : octavelist[indexN].listoctave,
           maxCount : 5,
           });
+            this.randomSound();
        });
     }
   } catch (error) {
     // Error retrieving data
   }
-      };
+};
 
   render() {
     return (
@@ -480,7 +529,7 @@ class Listen extends React.Component {
                   ? [styles.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
                   : [styles.buttonB1, {marginLeft: config.deviceWidth * item.left}]
               }
-              onPress={() => this.toggleKeyword(item)}
+              onPress={() => this.toggleKeyword(item.name)}
               key={id}>
               <Text style={styles.textStyleB}>{item.name}</Text>
             </TouchableHighlight>

screens/settingListen.js

@@ -7,19 +7,29 @@ import {
   ImageBackground,
   Text,
   View,
+  Image,
+  ScrollView,
   BackHandler,
+  Pressable,
 } from 'react-native';
 import styles from '../style/styleSettings';
 import Orientation from 'react-native-orientation';
-//import Notes from './data';
+import Notes from './data';
 import * as RNFS from 'react-native-fs';
 import NumericInput from 'react-native-numeric-input';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import notesData from './dataNotes';
+
+const octave = [
+'Octave 1','Octave 2','Octave 3','Octave 4','Octave 5','Octave 6','Octave 7',
+];
+const octavelist = [
+'Octave 1','Octave 2','Octave 3','Octave 4','Octave 5','Octave 6','Octave 7',
+];
+
 var path1 = RNFS.DocumentDirectoryPath + '/counterlisten.txt';
 var counter = 0;
-var notes = notesData;
-
+var notes = octavelist;
 
 export default class SettingsListen extends React.Component {
   constructor(props) {
@@ -54,19 +64,7 @@ export default class SettingsListen extends React.Component {
   };
 
   saveData = async () => {
-    AsyncStorage.setItem('@setisten_key', JSON.stringify(this.state.listN), (err)=> {
-          if (err){
-              console.log('an error');
-              throw err;
-          }
-      console.log('success');  //console.log(JSON.stringify(this.state.listN));
-      }).catch((err)=> {
-          console.log('error is: ' + err);
-      });
-  };
-
-  saveData = async () => {
-    AsyncStorage.setItem('@notes_key', JSON.stringify(this.state.listN), (err)=> {
+    AsyncStorage.setItem('@listen_key', JSON.stringify(this.state.listN), (err)=> {
           if (err){
               console.log('an error');
               throw err;
@@ -79,7 +77,7 @@ export default class SettingsListen extends React.Component {
 
   _retrieveData = async () => {
   try {
-    const value = await AsyncStorage.getItem('@notes_key');
+    const value = await AsyncStorage.getItem('@listen_key');
     if (value !== null) {
       // We have data!!
       console.log(value);
@@ -172,6 +170,27 @@ export default class SettingsListen extends React.Component {
             rightButtonBackgroundColor="black"
             leftButtonBackgroundColor="black"/>
             </View>
+            <ScrollView style={styles.scroll}>
+              <View
+                style={styles.view2}>
+                {octave.map((item, id) => (
+                  <View key={id}>
+                    <Pressable
+                      style={
+                        notes.find((element) => element === item)
+                          ? styles.selectedKeywordStyle
+                          : styles.buttonStyle
+                      }
+                      onPress={() => this.toggleKeyword(item)}
+                      key={id}>
+                      <Text style={styles.textname}>
+                        {item}
+                      </Text>
+                    </Pressable>
+                  </View>
+                ))}
+              </View>
+            </ScrollView>
           </SafeAreaView>
           </ImageBackground>
       </View>

screens/settingScale.js

@@ -68,18 +68,6 @@ export default class SettingsScale extends React.Component {
       });
   };
 
-  saveData = async () => {
-    AsyncStorage.setItem('@notes_key', JSON.stringify(this.state.listN), (err)=> {
-          if (err){
-              console.log('an error');
-              throw err;
-          }
-      console.log('success');  //console.log(JSON.stringify(this.state.listN));
-      }).catch((err)=> {
-          console.log('error is: ' + err);
-      });
-  };
-
   _retrieveData = async () => {
   try {
     const value = await AsyncStorage.getItem('@notes_key');