update

.vscode/settings.json

+{
+    "java.configuration.updateBuildConfiguration": "automatic"
+}
\ No newline at end of file

App.js

@@ -13,6 +13,7 @@ import LogBookScale from './screens/logbookScale';
 import LogBookListen from './screens/logbookListen';
 import Home from './screens/home';
 import Quiz from './screens/quiz';
+import MetronomeSkill from './screens/metronome';
 import Orientation from 'react-native-orientation';
 
 const Stack = createStackNavigator();
@@ -174,6 +175,31 @@ class App extends React.PureComponent {
           />
           <Stack.Screen
             name="4"
+            component={MetronomeSkill}
+            options={({navigation}) => ({
+              //title: 'C Major',
+              headerStyle: {
+                backgroundColor: '#E07EF9',
+              },
+              headerTintColor: '#fff',
+              title: '',
+              headerTransparent: true,
+              headerBackImage: () => (
+                <Icon
+                  name="chevron-left"
+                  type="font-awesome"
+                  size={26}
+                  color="black"
+                  onPress={() => {
+                    navigation.navigate('1');
+                    Orientation.lockToPortrait();
+                  }}
+                />
+              ),
+            })}
+          />
+          <Stack.Screen
+            name="5"
             component={LogBook}
             options={{
               title: 'Records',
@@ -189,7 +215,7 @@ class App extends React.PureComponent {
             }}
           />
           <Stack.Screen
-            name="5"
+            name="6"
             component={Settings}
             options={{
               title: 'Settings ',

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

@@ -3,6 +3,7 @@ package com.pianoapp;
 import android.content.Intent; // <--- import
 import android.content.res.Configuration; // <--- import
 import com.facebook.react.ReactActivity;
+//import com.reactlibrary.RNMetronomePackage;
 
 public class MainActivity extends ReactActivity {
 
@@ -15,12 +16,12 @@ public class MainActivity extends ReactActivity {
     return "PianoApp";
   }
 
-      @Override
-      public void onConfigurationChanged(Configuration newConfig) {
-        super.onConfigurationChanged(newConfig);
-        Intent intent = new Intent("onConfigurationChanged");
-        intent.putExtra("newConfig", newConfig);
-        this.sendBroadcast(intent);
-    }
+  @Override
+  public void onConfigurationChanged(Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+    Intent intent = new Intent("onConfigurationChanged");
+    intent.putExtra("newConfig", newConfig);
+    this.sendBroadcast(intent);
+  }
 
 }

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

@@ -4,6 +4,10 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+//import com.reactlibrary.RNMetronomePackage;
+//import com.reactlibrary.RNMetronomePackage;
+//import com.reactlibrary.RNMetronomePackage;
+//import com.reactlibrary.RNMetronomePackage;
 import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
 import com.zmxv.RNSound.RNSoundPackage;
 import com.zmxv.RNSound.RNSoundPackage;

android/settings.gradle

 rootProject.name = 'PianoApp'
+include ':react-native-metronome'
+project(':react-native-metronome').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-metronome/android')
+include ':react-native-metronome'
+project(':react-native-metronome').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-metronome/android')
+include ':react-native-metronome'
+project(':react-native-metronome').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-metronome/android')
 include ':@react-native-async-storage_async-storage'
 project(':@react-native-async-storage_async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-async-storage/async-storage/android')
 include ':react-native-sound'

ios/Podfile

@@ -18,6 +18,8 @@ target 'PianoApp' do
 
   pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-async-storage/async-storage'
 
+  pod 'RNMetronome', :path => '../node_modules/react-native-metronome'
+
   target 'PianoAppTests' do
     inherit! :complete
     # Pods for testing

package.json

@@ -34,7 +34,8 @@
     "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"
+    "react-native-vector-icons": "^7.1.0",
+    "swipeable-modal-react-native": "^1.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

screens/home.js

@@ -63,18 +63,27 @@ class Home extends React.PureComponent {
                   />
                   <Text style={styles.textmenu}>{'\n'}Listen Skill</Text>
                 </TouchableOpacity>
-                <TouchableOpacity
+                 <TouchableOpacity
                   style={styles.menu}
                   onPress={() => this.props.navigation.navigate('4')}>
                   <Image
                     style={styles.image2}
+                    source={require('../media/img/metronome.png')}
+                  />
+                  <Text style={styles.textmenu}>{'\n'}Metronome</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={styles.menu}
+                  onPress={() => this.props.navigation.navigate('5')}>
+                  <Image
+                    style={styles.image2}
                     source={require('../media/img/records.png')}
                   />
                   <Text style={styles.textmenu}>{'\n'}Records</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
                   style={styles.menu}
-                  onPress={() => this.props.navigation.navigate('5')}>
+                  onPress={() => this.props.navigation.navigate('6')}>
                   <Image
                     style={styles.image3}
                     source={require('../media/img/settings.png')}

style/styleMetronome.js

+/* eslint-disable prettier/prettier */
+import {StyleSheet, Dimensions} from 'react-native';
+import config from './config';
+export default StyleSheet.create({
+  imagebackground: {
+    width: '100%',
+    height: '100%',
+  },
+  //Modal Quit
+  modalbackground: {
+    backgroundColor: '#000000aa',
+    flex: 1,
+  },
+  viewmodalQ: {
+    marginLeft: Dimensions.get('window').height * 0.3,
+    width : Dimensions.get('window').height * 0.4,
+    height : Dimensions.get('window').width * 0.35,
+    marginTop : Dimensions.get('window').width * 0.25,
+    alignItems: 'center',
+    backgroundColor:'white',
+    borderRadius: 10,
+    borderColor: 'black',
+    borderWidth: 5,
+  },
+  textquit: {
+    fontSize: 25,
+    fontFamily: 'sans-serif',
+    textAlign: 'center',
+    marginTop: 5,
+    color:'black',
+  },
+  viewmodalQQ : {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginTop:15,
+  },
+  buttonyes: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderRadius: 10,
+    marginTop:10,
+    marginBottom:10,
+    borderTopColor:'black',
+    borderRightColor:'black',
+    borderWidth: 3,
+    marginRight:5,
+  },
+  buttonno: {
+    backgroundColor: 'white',
+    paddingLeft: 18,
+    paddingRight: 18,
+    paddingTop: 15,
+    paddingBottom: 15,
+    borderRadius: 10,
+    marginTop:10,
+    marginBottom:10,
+    borderWidth: 3,
+    borderTopColor:'black',
+    marginLeft:5,
+  },
+  textqq: {
+    color: 'black',
+    fontFamily: 'sans-serif',
+  },
+  // Modal Correct and Wrong
+  viewmodalCW: {
+    marginLeft: Dimensions.get('window').height * 0.25,
+    width : Dimensions.get('window').height * 0.4,
+    alignItems: 'center',
+  },
+  imagecw: {
+    width: '130%',
+    height: '95%',
+    },
+  textcw: {
+    fontSize: 25,
+    fontFamily: 'sans-serif',
+    textAlign: 'center',
+    marginTop:Dimensions.get('window').width * 0.43,
+    marginLeft:120,
+    color:'white',
+  },
+  viewbutton: {
+    alignItems: 'center',
+    marginLeft:120,
+  },
+  buttonc: {
+    backgroundColor: 'white',
+    borderColor: 'black',
+    padding: 15,
+    borderRadius: 5,
+    marginTop:10,
+    marginBottom:10,
+  },
+  buttonok: {
+    color: 'black',
+  },
+  // Modal Done
+  viewmodalD: {
+    marginLeft: Dimensions.get('window').height * 0.3,
+    width : Dimensions.get('window').height * 0.4,
+    alignItems: 'center',
+  },
+  imagedone :{
+    width: '120%',
+    height: '98%',
+  },
+  viewmodalDD: {
+    alignItems: 'center',
+    marginLeft:70,
+  },
+  textwelldone: {
+    fontSize: 25,
+    fontFamily: 'sans-serif',
+    textAlign: 'center',
+    marginTop:Dimensions.get('window').width * 0.42,
+    marginLeft:65,
+    color:'white',
+  },
+  modaltextcorrect: {
+    fontSize: 15,
+    fontFamily: 'sans-serif',
+    marginLeft:65,
+    textAlign: 'center',
+    color: 'green',
+  },
+  modaltextwrong: {
+    fontSize: 15,
+    fontFamily: 'sans-serif',
+    marginLeft:65,
+    textAlign: 'center',
+    color: 'red',
+  },
+  c1: {
+    height: '70%',
+    alignItems: 'center',
+    borderColor: 'black',
+    marginTop:50,
+  },
+  cc1: {
+    flexDirection: 'row',
+    marginLeft: 0,
+  },
+  t: {
+    fontSize: 25,
+    fontFamily: 'sans-serif',
+  },
+  c2: {
+    flexDirection: 'row',
+    height: '35%',
+    marginLeft: 15,
+    marginRight:15,
+  },
+
+  t1: {
+    color: 'black',
+    paddingTop: 120,
+  },
+  button: {
+    flex: 7,
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderRightWidth: 1,
+    borderColor: 'black',
+    borderBottomWidth: 1,
+  },
+  b1: {
+    marginBottom: 25,
+    width: 200,
+    height: 50,
+    borderRadius: 15,
+    alignItems: 'center',
+    backgroundColor: 'purple',
+  },
+  buttonText: {
+    textAlign: 'center',
+    paddingTop: 15,
+    color: 'white',
+    fontSize: 15,
+    fontFamily: 'sans-serif',
+  },
+  logo: {
+    height: config.deviceWidth * 0.22,
+    width: config.deviceHeight * 0.5,
+    borderColor: 'black',
+    borderWidth: 3,
+    borderRadius: 10,
+    position: 'absolute',
+    marginTop: config.deviceWidth * 0.11,
+    backgroundColor:'white',
+  },
+  correct: {
+    width: 80,
+    textAlign: 'center',
+    paddingTop: 15,
+    color: 'white',
+    height: 60,
+    borderRadius: 10,
+    alignItems: 'center',
+    fontSize: 25,
+    marginRight: 10,
+    backgroundColor:'green',
+    borderColor:'white',
+     borderWidth: 2,
+     fontFamily: 'sans-serif',
+  },
+  wrong: {
+    width: 70,
+    height: 60,
+    borderRadius: 10,
+    borderColor:'white',
+    alignItems: 'center',
+    textAlign: 'center',
+    paddingTop: 15,
+    color: 'white',
+    fontSize: 25,
+    marginRight: 10,
+    backgroundColor:'red',
+     borderWidth: 2,
+     fontFamily: 'sans-serif',
+  },
+  timer: {
+    width: 65,
+    height: 60,
+    borderRadius: 10,
+    borderColor:'white',
+    alignItems: 'center',
+    textAlign: 'center',
+    paddingTop: 16,
+    color: 'white',
+    fontSize: 25,
+    backgroundColor:'black',
+     borderWidth: 2,
+     fontFamily: 'sans-serif',
+  },
+  submit: {
+    width: '40%',
+    marginTop: config.deviceHeight * 0.055,
+    borderColor:'white',
+    borderWidth: 2,
+    borderRadius: 5,
+  },
+  viewMain: {
+    width: '20%',
+    alignContent: 'flex-end',
+    marginLeft: 180,
+    marginTop: '173%',
+    position: 'absolute',
+  },
+
+  container: {
+    flex: 1,
+  },
+  textStyle: {
+    fontSize: 16,
+    padding: 8,
+    textAlign: 'center',
+    fontFamily: 'sans-serif',
+  },
+  buttonView: {
+    flexDirection: 'column',
+    marginLeft: config.deviceWidth * 1.0,
+  },
+  //White Notes
+  buttonStyle: {
+    width: config.deviceHeight * 0.075,
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderRightWidth: 1,
+    borderColor: 'black',
+    borderBottomWidth: 1,
+  },
+  selectedKeywordStyle: {
+     width: config.deviceWidth * 0.075,
+    alignItems: 'center',
+    backgroundColor: '#EEA1E1',
+    borderRightWidth: 1,
+    borderColor: 'black',
+    borderBottomWidth: 1,
+  },
+  //Black Notes
+  buttonB1: {
+    alignItems: 'center',
+    backgroundColor: 'black',
+    height: '55%',
+    width: '5%',
+    position: 'absolute',
+  },
+  SbuttonB1: {
+    alignItems: 'center',
+    backgroundColor: '#92ddea',
+    height: '55%',
+    width: '5%',
+    position: 'absolute',
+  },
+});

yarn.lock

@@ -6962,6 +6962,11 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+swipeable-modal-react-native@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/swipeable-modal-react-native/-/swipeable-modal-react-native-1.0.8.tgz#432cd084470f5123938e5ed9ba219ca8887927ee"
+  integrity sha512-9mBkXbG6tASAslWpTNCHXw3orW2X3oORT9cqNiJ2u0xk8QK7JUu2NEwtDq+05RQ1RHj09w59E3eJMcBYGtosQg==
+
 symbol-observable@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"