updating....

App.js

@@ -13,10 +13,14 @@ import Orientation from 'react-native-orientation';
 
 const Stack = createStackNavigator();
 
-class App extends React.Component {
+class App extends React.PureComponent {
   componentDidMount() {
     Orientation.lockToPortrait();
   }
+  componentDidUpdate(){
+    Orientation.lockToPortrait();
+  }
+
   render() {
     return (
       <NavigationContainer>

android/app/src/main/java/com/pianoapp/MainApplication.java

@@ -4,6 +4,8 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.zmxv.RNSound.RNSoundPackage;
+import com.zmxv.RNSound.RNSoundPackage;
 import com.github.yamill.orientation.OrientationPackage;
 import com.github.yamill.orientation.OrientationPackage;
 import com.rnfs.RNFSPackage;

android/settings.gradle

 rootProject.name = 'PianoApp'
+include ':react-native-sound'
+project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
+include ':react-native-sound'
+project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
 include ':react-native-orientation'
 project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')
 include ':react-native-fs'

ios/Podfile

@@ -14,6 +14,8 @@ target 'PianoApp' do
 
   pod 'react-native-orientation', :path => '../node_modules/react-native-orientation'
 
+  pod 'RNSound', :path => '../node_modules/react-native-sound'
+
   target 'PianoAppTests' do
     inherit! :complete
     # Pods for testing

package.json

@@ -29,6 +29,7 @@
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.15.0",
+    "react-native-sound": "^0.11.0",
     "react-native-stopwatch-timer": "^0.0.21",
     "react-native-super-grid": "^4.0.3",
     "react-native-vector-icons": "^7.1.0"

screens/quiz.js

@@ -22,35 +22,36 @@ import * as RNFS from 'react-native-fs';
 import Notes from './data';
 import styles from '../style/style';
 import OtherClass from './saveRecords';
+import Sound from 'react-native-sound';
 
 const path = RNFS.DocumentDirectoryPath + '/settings.txt';
 const path1 = RNFS.DocumentDirectoryPath + '/counter.txt';
 const NOTESWHITE = [
-  'C1',
-  'D1',
-  'E1',
-  'F1',
-  'G1',
-  'A1',
-  'B1',
-  'C2',
-  'D2',
-  'E2',
-  'F2',
-  'G2',
-  'A2',
-  'B2',
+  {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')},
 ];
-const NOTESCC = ['C#1'];
-const NOTESDD = ['D#1'];
-const NOTESFF = ['F#1'];
-const NOTESGG = ['G#1'];
-const NOTESAA = ['A#1'];
-const NOTESCC1 = ['C#2'];
-const NOTESDD1 = ['D#2'];
-const NOTESFF1 = ['F#2'];
-const NOTESGG1 = ['G#2'];
-const NOTESAA1 = ['A#2'];
+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 keywordsList = [];
 
 var maxCount = 5;
@@ -78,13 +79,29 @@ class Quiz extends React.Component {
   }
 
     toggleKeyword = (keyword) => {
+      var sound = new Sound(keyword.url, (error) => {
+      if (error) {
+        console.log('failed to load the sound', error);
+        return;
+      }
+      // loaded successfully
+      sound.play((success) => {
+        if (success) {
+          console.log('successfully finished playing');
+        } else {
+          console.log('playback failed due to audio decoding errors');
+          sound.release();
+        }
+      });
+    });
+
     let list = keywordsList;
     let index = -1;
-    if ((index = keywordsList.indexOf(keyword)) !== -1) {
+    if ((index = keywordsList.indexOf(keyword.name)) !== -1) {
       list.splice(index, 1);
       console.log(list);
     } else {
-      list.push(keyword);
+      list.push(keyword.name);
       console.log(list);
     }
     this.setState({keywordsList: list});
@@ -602,7 +619,7 @@ class Quiz extends React.Component {
   };
 
   async componentDidMount() {
-  this.removeArray();
+  //this.removeArray();
     Orientation.lockToLandscape();
     this.displayData();
   }
@@ -677,7 +694,10 @@ class Quiz extends React.Component {
    removeArray = () => {
     keywordsList.splice(0, keywordsList.length);
     console.log(keywordsList);
-    clearInterval(this._interval);
+    this.setState({
+      correct: this.state.correct,
+      wrong: this.state.wrong,
+    });
   };
 
   render() {
@@ -844,7 +864,7 @@ class Quiz extends React.Component {
           {NOTESWHITE.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? selectedKeywordStyle
                   : buttonStyle
               }
@@ -856,7 +876,7 @@ class Quiz extends React.Component {
           {NOTESCC.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? SbuttonB1
                   : buttonB1
               }
@@ -868,7 +888,7 @@ class Quiz extends React.Component {
           {NOTESDD.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? SbuttonB2
                   : buttonB2
               }
@@ -880,7 +900,7 @@ class Quiz extends React.Component {
           {NOTESFF.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? SbuttonB3
                   : buttonB3
               }
@@ -892,7 +912,7 @@ class Quiz extends React.Component {
           {NOTESGG.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? SbuttonB4
                   : buttonB4
               }
@@ -904,7 +924,7 @@ class Quiz extends React.Component {
           {NOTESAA.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? SbuttonB5
                   : buttonB5
               }
@@ -916,7 +936,7 @@ class Quiz extends React.Component {
           {NOTESCC1.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? SbuttonB11
                   : buttonB11
               }
@@ -928,7 +948,7 @@ class Quiz extends React.Component {
           {NOTESDD1.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? SbuttonB21
                   : buttonB21
               }
@@ -940,7 +960,7 @@ class Quiz extends React.Component {
           {NOTESFF1.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? SbuttonB31
                   : buttonB31
               }
@@ -952,7 +972,7 @@ class Quiz extends React.Component {
           {NOTESGG1.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? SbuttonB41
                   : buttonB41
               }
@@ -964,7 +984,7 @@ class Quiz extends React.Component {
           {NOTESAA1.map((item, id) => (
             <TouchableHighlight
               style={
-                keywordsList.find((element) => element === item)
+                keywordsList.find((element) => element === item.name)
                   ? SbuttonB51
                   : buttonB51
               }

screens/settings.js

@@ -117,7 +117,7 @@ export default class Settings extends React.Component {
     counter = number;
     if (counter > 0) {
     this.saveData1(counter);
-    //console.log(counter);
+    console.log(number);
     this.displayData1();
   }
   }
@@ -216,6 +216,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderWidth: 1,
     borderColor: 'black',
+     backgroundColor: 'lightpink',
     borderRadius: 10,
     marginRight: config.deviceWidth * 0.03,
     marginBottom: config.deviceHeight * 0.03,

style/style.js

@@ -304,4 +304,48 @@ export default StyleSheet.create({
     marginBottom: '5%',
     borderRadius: 30,
   },
+   buttonStyleSettings: {
+    flex: 1,
+    width: config.deviceHeight * 0.4,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'black',
+    borderRadius: 10,
+    backgroundColor: 'white',
+    padding: 10,
+    marginRight: config.deviceHeight * 0.03,
+    marginBottom: config.deviceWidth * 0.03,
+  },
+  selectedKeywordStyleSettings: {
+    flex: 1,
+    backgroundColor: 'lightpink',
+    width: config.deviceHeight * 0.4,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'black',
+    borderRadius: 10,
+    marginRight: config.deviceHeight * 0.03,
+    marginBottom: config.deviceWidth * 0.03,
+    padding: 10,
+  },
+   containerSettings: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+  },
+  viewSettings: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    width: config.deviceHeight,
+    marginLeft: config.deviceWidth * 0.05,
+    marginRight: config.deviceWidth * 0.08,
+    },
+    viewInputSettings: {
+      alignItems:'center',
+      marginTop: '15%',
+      marginLeft: config.deviceHeight * 0.08,
+      marginRight: config.deviceHeight * 0.1,
+      flexDirection: 'row',
+      flexWrap: 'wrap'},
 });

yarn.lock

@@ -6015,6 +6015,11 @@ react-native-size-matters@^0.3.1:
   resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz#24d0cfc335a2c730f6d58bd7b43ea5a41be4b49f"
   integrity sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw==
 
+react-native-sound@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/react-native-sound/-/react-native-sound-0.11.0.tgz#ad60b55ba8c6dc89917f381ad3713f2738de530f"
+  integrity sha512-4bGAZfni6E2L695NQjOZwNLBQGXgBGYC4Sy+h99K5h0HqNZjCqR0+aLel+ezASxEJDpaH83gylNObXpiqJgdwg==
+
 react-native-status-bar-height@^2.5.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/react-native-status-bar-height/-/react-native-status-bar-height-2.6.0.tgz#b6afd25b6e3d533c43d0fcdcfd5cafd775592cea"