updating ...

App.js

@@ -5,6 +5,7 @@ import {createStackNavigator} from '@react-navigation/stack';
 import {Icon} from 'react-native-elements';
 
 import Settings from './screens/settings';
+import Listen from './screens/listening';
 import LogBook from './screens/logbook';
 import Home from './screens/home';
 import Quiz from './screens/quiz';
@@ -72,6 +73,31 @@ class App extends React.PureComponent {
           />
           <Stack.Screen
             name="3"
+            component={Listen}
+            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="4"
             component={LogBook}
             options={{
               title: 'Records',
@@ -87,7 +113,7 @@ class App extends React.PureComponent {
             }}
           />
           <Stack.Screen
-            name="4"
+            name="5"
             component={Settings}
             options={{
               title: 'Settings ',

android/app/build.gradle

@@ -207,6 +207,19 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+
+     // If your app supports Android versions before Ice Cream Sandwich (API level 14)
+  implementation 'com.facebook.fresco:animated-base-support:1.3.0'
+
+  // For animated GIF support
+  implementation 'com.facebook.fresco:animated-gif:2.0.0'
+
+  // For WebP support, including animated WebP
+  implementation 'com.facebook.fresco:animated-webp:2.1.0'
+  implementation 'com.facebook.fresco:webpsupport:2.0.0'
+
+  // For WebP support, without animations
+  implementation 'com.facebook.fresco:webpsupport:2.0.0'
 }
 
 // Run this once to be able to run the application with BUCK

screens/home.js

 /* eslint-disable prettier/prettier */
-/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
 import {
   SafeAreaView,
@@ -7,17 +6,17 @@ import {
   Text,
   View,
   TouchableOpacity,
-  StyleSheet,
   ScrollView,
   Image,
   BackHandler,
 } from 'react-native';
-import {Icon} from 'react-native-elements';
+//import {Icon} from 'react-native-elements';
 import Orientation from 'react-native-orientation';
+import styles from '../style/styleHome';
+
 const exitApp = () => BackHandler.exitApp();
 
 class Home extends React.PureComponent {
-
   async componentDidMount() {
     Orientation.lockToPortrait();
     BackHandler.addEventListener('hardwareBackPress', exitApp);
@@ -30,38 +29,57 @@ class Home extends React.PureComponent {
     // Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
   }
 
-
   render() {
     return (
       <View style={styles.container}>
         <ImageBackground
           source={require('../img/background.jpg')}
-          style={{
-            width: '100%',
-            height: '100%',
-          }}>
+          style={styles.imagebackground}>
           <SafeAreaView>
             <ScrollView>
-              <View style={{marginTop: '15%', marginBottom: '5%'}}>
+              <View style={styles.viewmenu}>
                 <TouchableOpacity
                   style={styles.menu}
                   onPress={() => {
-                    this.props.navigation.navigate('2',{c: 0, w: 0, t: 0, cc : 1});
+                    this.props.navigation.navigate('2', {
+                      c: 0,
+                      w: 0,
+                      t: 0,
+                      cc: 1,
+                    });
                   }}>
-                  <Image style={{height:150, width:250}} source={require('../img/1piano.png')} />
-                  <Text style={{fontSize:20}}>{'\n'}Piano</Text>
+                  <Image
+                    style={styles.image1}
+                    source={require('../img/1piano.png')}
+                  />
+                  <Text style={styles.textmenu}>{'\n'}Scale</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
                   style={styles.menu}
                   onPress={() => this.props.navigation.navigate('3')}>
-                  <Icon size={150} name="clipboard" type="font-awesome" />
-                  <Text style={{fontSize:20}}>{'\n'}Records</Text>
+                  <Image
+                    style={styles.image2}
+                    source={require('../img/listening.png')}
+                  />
+                  <Text style={styles.textmenu}>{'\n'}Listen Skill</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
                   style={styles.menu}
                   onPress={() => this.props.navigation.navigate('4')}>
-                  <Image style={{height:150, width:150}} source={require('../img/settings.png')} />
-                  <Text style={{fontSize:20}}>{'\n'}Settings</Text>
+                  <Image
+                    style={styles.image2}
+                    source={require('../img/records.png')}
+                  />
+                  <Text style={styles.textmenu}>{'\n'}Records</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={styles.menu}
+                  onPress={() => this.props.navigation.navigate('5')}>
+                  <Image
+                    style={styles.image2}
+                    source={require('../img/settings.png')}
+                  />
+                  <Text style={styles.textmenu}>{'\n'}Settings</Text>
                 </TouchableOpacity>
               </View>
             </ScrollView>
@@ -73,23 +91,3 @@ class Home extends React.PureComponent {
 }
 
 export default Home;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  menu: {
-    marginBottom: '2%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '10%',
-    marginLeft: '3%',
-    marginRight: '3%',
-    borderRadius: 10,
-    borderWidth: 5,
-    borderColor: 'black',
-    backgroundColor: 'white',
-  },
-});

screens/listenData.js

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

screens/logbook.js

 /* eslint-disable prettier/prettier */
-/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
 import {
   SafeAreaView,
   ImageBackground,
   Text,
   View,
-  //TouchableOpacity,
-  StyleSheet,
   ScrollView,
- // Alert,
   BackHandler,
 } from 'react-native';
+import styles from '../style/styleLogbook';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import Orientation from 'react-native-orientation';
 
@@ -23,18 +20,16 @@ class LogBook extends React.PureComponent {
 
     };
   }
+
   displayData = async () => {
 
     try {
     const value = await AsyncStorage.getItem('@storage_key');
-   // console.log(JSON.parse(value));
     if (value !== null) {
-        // We have data!!
-     // console.log(JSON.parse(value));
          this.setState({ logbook: JSON.parse(value)});
          console.log(this.state.logbook);
     }
-} catch (error) {
+    } catch (error) {
         // Error retrieving data
       }
   };
@@ -56,42 +51,29 @@ class LogBook extends React.PureComponent {
       <View style={styles.container}>
         <ImageBackground
           source={require('../img/background.jpg')}
-          style={{
-            width: '100%',
-            height: '100%',
-          }}>
+          style={styles.imagebackground}>
           <SafeAreaView>
             <ScrollView
-              style={{
-                marginTop: 50,
-              }}>
+              style={styles.scroll}>
                 {this.state.logbook && this.state.logbook.map((item, id) => (
                 <View
                   key ={id}
-                  style={{
-                    flexDirection: 'row',
-                    paddingLeft: 15,
-                    paddingRight: 15,
-                    paddingBottom:10,
-                    paddingTop:5,
-                    backgroundColor: 'white',
-                    borderBottomWidth:1,
-                  }}>
-                  <View style={{alignItems: 'center',marginRight:8}}>
+                  style={styles.view1}>
+                  <View style={styles.datedays}>
                   <View>
-                  <Text style={{color:'black', fontSize: 40,textAlign: 'center'}}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text>
-                  <Text style={{color:'black', fontSize: 15, textAlign: 'center'}}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text>
+                  <Text style={styles.textdate1}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text>
+                  <Text style={styles.textdate2}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text>
                  </View>
                   <View>
-                  <Text style={{color:'black', fontSize: 15, textAlign: 'center'}}>{item.day}</Text>
+                  <Text style={styles.textday}>{item.day}</Text>
                  </View>
                  </View>
-                 <View style={{borderWidth:1, borderColor : 'gray'}}/>
-                 <View style={{flexDirection: 'column',marginLeft:5,marginTop:10}}>
-                  <Text style={{color:'green', fontSize: 15}}>Correct:{item.correct}</Text>
-                  <Text style={{color:'red', fontSize: 15}}>Wrong: {item.wrong}</Text>
-                  <Text style={{color:'black', fontSize: 15}}>Timer: {item.timer}</Text>
-                  <Text style={{color:'black', fontSize: 15}}>Time: {item.time}</Text>
+                 <View style={styles.border}/>
+                 <View style={styles.details}>
+                  <Text style={styles.textcorrect}>Correct:{item.correct}</Text>
+                  <Text style={styles.textwrong}>Wrong: {item.wrong}</Text>
+                  <Text style={styles.texttime}>Timer: {item.timer}</Text>
+                  <Text style={styles.texttime}>Time: {item.time}</Text>
                  </View>
                 </View>
               )).reverse()}
@@ -104,23 +86,4 @@ class LogBook extends React.PureComponent {
 }
 export default LogBook;
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#9001f5',
-  },
-  menu: {
-    marginTop: '3%',
-    marginBottom: '2%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '15%',
-    marginLeft: '5%',
-    marginRight: '5%',
-    borderRadius: 10,
-    borderWidth: 2,
-    borderColor: 'white',
-  },
-});
+

screens/notesData.js

+/* eslint-disable prettier/prettier */
+const notesData = [
+  '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 notesData;

screens/settings.js

 /* eslint-disable prettier/prettier */
 /* eslint-disable react-native/no-inline-styles */
+/* eslint-disable prettier/prettier */
 import React from 'react';
 import {
   SafeAreaView,
   ImageBackground,
   Text,
   View,
-  //TouchableOpacity,
-  StyleSheet,
   Image,
   ScrollView,
-  Dimensions,
- // TextInput,
   BackHandler,
   Pressable,
 } from 'react-native';
+import styles from '../style/styleSettings';
 import Orientation from 'react-native-orientation';
 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';
-
-//var path = RNFS.DocumentDirectoryPath + '/settings.txt';
+import notesData from './notesData';
 var path1 = RNFS.DocumentDirectoryPath + '/counter.txt';
-
-
-const config = {
-  deviceWidth: Dimensions.get('window').width,
-  deviceHeight: Dimensions.get('window').height,
-};
 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',
-];
+var notes = notesData;
+
 
 export default class Settings extends React.Component {
   constructor(props) {
@@ -69,6 +32,7 @@ export default class Settings extends React.Component {
       listN : [],
     };
   }
+
   toggleKeyword = (keyword) => {
   // console.log(notes.indexOf(keyword));
     let list = notes;
@@ -128,7 +92,6 @@ export default class Settings extends React.Component {
   }
 };
 
-
   saveData1 = async () => {
       RNFS.writeFile(path1,JSON.stringify(counter),'utf8',)
         .then((success) => {
@@ -165,10 +128,10 @@ export default class Settings extends React.Component {
     RNFS.unlink(path1).then(res => {
     console.log('delete');
     RNFS.scanFile(path1);
-})
-.catch(err => {
+    })
+    .catch(err => {
         console.log(err.message, err.code);
-});
+    });
   }
 
   onChange(number, type) {
@@ -183,7 +146,6 @@ export default class Settings extends React.Component {
 
   homeExit = async () => {
     this.props.navigation.navigate('1');
-
   //Orientation.lockToPortrait();
   };
 
@@ -192,15 +154,10 @@ export default class Settings extends React.Component {
       <View style={styles.container}>
       <ImageBackground
           source={require('../img/background.jpg')}
-          style={{
-            width: '100%',
-            height: '100%',
-          }}>
+          style={styles.imagebackground}>
           <SafeAreaView>
-          <View style={{alignItems:'center',marginTop: '15%',  marginLeft: config.deviceWidth * 0.08,
-                  marginRight: config.deviceWidth * 0.1, flexDirection: 'row',
-                  flexWrap: 'wrap'}}>
-                  <Text style={{fontSize: 16,marginRight:9}}>No. of Questions :  </Text>
+          <View style={styles.view1}>
+          <Text style={styles.textques}>No. of Questions :  </Text>
           <NumericInput
             value={this.state.value}
             minValue={0}
@@ -218,16 +175,9 @@ export default class Settings extends React.Component {
             rightButtonBackgroundColor="black"
             leftButtonBackgroundColor="black"/>
             </View>
-            <ScrollView style={{marginTop: '5%'}}>
+            <ScrollView style={styles.scroll}>
               <View
-                style={{
-                  flexDirection: 'row',
-                  flexWrap: 'wrap',
-                  width: config.deviceWidth,
-                  marginLeft: config.deviceWidth * 0.08,
-                  marginRight: config.deviceWidth * 0.1,
-                  marginBottom: config.deviceHeight * 0.12,
-                }}>
+                style={styles.view2}>
                 {Notes.map((item, id) => (
                   <View key={id}>
                     <Pressable
@@ -240,12 +190,8 @@ export default class Settings extends React.Component {
                       key={id}>
                       <Image
                         source={item.image}
-                        style={{
-                          width: 100,
-                          height: 100,
-                        }}
-                      />
-                      <Text style={{textAlign: 'center', paddingBottom: 10}}>
+                        style={styles.image}/>
+                      <Text style={styles.textname}>
                         {item.name}
                       </Text>
                     </Pressable>
@@ -259,38 +205,3 @@ export default class Settings extends React.Component {
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%',
-  },
-  buttonStyle: {
-    flex: 1,
-    width: config.deviceWidth * 0.4,
-    alignItems: 'center',
-    borderWidth: 3,
-    borderColor: 'white',
-    borderRadius: 10,
-    backgroundColor: 'rgba(52, 52, 52, 0.0)',
-    opacity:0.4,
-    padding: 10,
-    marginRight: config.deviceWidth * 0.03,
-    marginBottom: config.deviceHeight * 0.03,
-  },
-  selectedKeywordStyle: {
-    flex: 1,
-    width: config.deviceWidth * 0.4,
-    alignItems: 'center',
-    borderWidth: 3,
-    borderColor: 'black',
-     backgroundColor: 'white',
-   // backgroundColor: 'rgba(0,0,0,0)',
-    borderRadius: 10,
-    marginRight: config.deviceWidth * 0.03,
-    marginBottom: config.deviceHeight * 0.03,
-    padding: 10,
-  },
-});