.......

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

@@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
 import com.zmxv.RNSound.RNSoundPackage;
 import com.zmxv.RNSound.RNSoundPackage;
 import com.github.yamill.orientation.OrientationPackage;

android/settings.gradle

 rootProject.name = 'PianoApp'
+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'
 project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
 include ':react-native-sound'

ios/Podfile

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

screens/logbook.js

@@ -11,15 +11,9 @@ import {
   ScrollView,
  // Alert,
 } from 'react-native';
-//import {Icon} from 'react-native-elements';
-//import AsyncStorage from '@react-native-async-storage/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import Orientation from 'react-native-orientation';
 
-//import AsyncStorage from '@react-native-async-storage/async-storage';
-import * as RNFS from 'react-native-fs';
-var path = RNFS.DocumentDirectoryPath + '/test.txt';
-//var array = [];
-
 class LogBook extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -29,17 +23,19 @@ class LogBook extends React.PureComponent {
     };
   }
   displayData = async () => {
+    try {
+    const value = await AsyncStorage.getItem('@storage_key');
+    if (value !== null) {
+        // We have data!!
+       // console.log(JSON.parse(value));
+         this.setState({ logbook: JSON.parse(value) });
+           console.log(this.state.logbook.length);
 
-    RNFS.readFile(path, 'ascii')
-      .then((res) => {
-        this.setState({
-          logbook: res.split('\n'),
-        });
-        console.log(this.state.logbook);
-      })
-      .catch((err) => {
-        console.log(err.message, err.code);
-      });
+    }
+} catch (error) {
+    // Error retrieving data
+}
+console.log(this.state.logbook);
   };
 
   componentDidMount() {
@@ -47,6 +43,7 @@ class LogBook extends React.PureComponent {
     this.displayData();
   }
 
+
   render() {
     return (
       <View style={styles.container}>
@@ -61,19 +58,30 @@ class LogBook extends React.PureComponent {
               style={{
                 marginTop: 50,
               }}>
-              {this.state.logbook.map((item, id) => (
                 <View
-                  key={id}
                   style={{
                     flexDirection: 'row',
-                    padding: 15,
+                    padding: 10,
                     backgroundColor: 'white',
                     borderBottomWidth:1,
-
                   }}>
-                  <Text style={{fontSize:17}}>{item.split(',').join('\n')}</Text>
+                  <View style={{alignItems: 'center', paddingLeft:15, paddingRight:15}}>
+                  <View style={{marginRight:5, marginBottom:5}}>
+                  <Text style={{color:'black', fontSize: 40}}>{(this.state.logbook.date !== undefined) ? this.state.logbook.date.split(' ')[0].trim() : ''}</Text>
+                  <Text style={{color:'black', fontSize: 15}}>{(this.state.logbook.date !== undefined) ? this.state.logbook.date.split(' ')[1].trim() : ''}</Text>
+                 </View>
+                  <View style={{marginRight:5}}>
+                  <Text style={{color:'black', fontSize: 15}}>{this.state.logbook.day}</Text>
+                 </View>
+                 </View>
+                 <View style={{borderWidth:1, borderColor : 'blue'}}/>
+                 <View style={{flexDirection: 'column',marginLeft:5,marginTop:5}}>
+                  <Text style={{color:'green', fontSize: 15}}>Correct : {this.state.logbook.correct}</Text>
+                  <Text style={{color:'red', fontSize: 15}}>Wrong : {this.state.logbook.wrong}</Text>
+                  <Text style={{color:'black', fontSize: 15}}>Timer : {this.state.logbook.timer}</Text>
+                  <Text style={{color:'black', fontSize: 15}}>Time : {this.state.logbook.time}</Text>
+                 </View>
                 </View>
-              )).reverse()}
             </ScrollView>
           </SafeAreaView>
         </ImageBackground>

screens/quiz.js

@@ -638,6 +638,7 @@ class Quiz extends React.Component {
         this.setState({
           logbook: res.split(','),
         });
+        console.log(this.state.logbook);
      RNFS.readFile(path1, 'ascii')
         .then((ccc) => {
         console.log('has notes has counter');

screens/saveRecords.js

 /* eslint-disable prettier/prettier */
 /*This is an Example of Calling Other Class Function in React Native*/
 import { Component } from 'react';
-import {Alert} from 'react-native';
 import moment from 'moment';
-import * as RNFS from 'react-native-fs';
-const date = moment().utcOffset('+08:00').format('D MMM YYYY');
+import AsyncStorage from '@react-native-async-storage/async-storage';
+const date = moment().utcOffset('+08:00').format('D MMM');
 const time = moment().utcOffset('+08:00').format('h:mm a');
-const record = RNFS.DocumentDirectoryPath + '/test.txt';
+const day = moment().utcOffset('+08:00').format('ddd');
+var records = [];
 
 class OtherClass extends Component {
-  functionWithoutArg = () => {
-    //function to be called from default class (without args)
-    Alert.alert('Function Called Without Argument ');
-  };
-
-  functionWithArg = (Value) => {
-    //function to called from default class (with args)
-    Alert.alert(Value);
-  };
-
-
   saveRecord = async (correct, wrong, stime) => {
     let obj = {
       correct: correct,
@@ -27,63 +16,41 @@ class OtherClass extends Component {
       timer: stime,
       date: date,
       time: time,
+      day : day,
     };
-    if (await RNFS.exists(record)) {
-      console.log('BLAH EXISTS');
-      // write the file
-      RNFS.appendFile(
-        record,
-         'Correct : ' +
-          JSON.stringify(obj.correct) +
-          ',' +
-          'Wrong : ' +
-          JSON.stringify(obj.wrong) +
-          ',' +
-          'Timer : ' +
-          stime +
-          ',' +
-          'Date : ' +
-          date +
-          ',' +
-          'Time : ' +
-          time +
-          '\n',
-        'utf8',
-      )
-        .then((success) => {
-          console.log(JSON.stringify(obj));
-        })
-        .catch((err) => {
-          console.log(err.message);
+
+ try {
+    const value = await AsyncStorage.getItem('@storage_key');
+    if (value !== null) {
+        // We have data!!
+    console.log(JSON.parse(value));
+    records.push(JSON.parse(value));
+    records.push(JSON.parse(obj));
+    //console.log(records);
+    AsyncStorage.setItem('@storage_key', JSON.stringify(records), (err)=> {
+          if (err){
+              console.log('an error');
+              throw err;
+          }
+        // console.log('success');
+      }).catch((err)=> {
+          console.log('error is: ' + err);
       });
-    } else {
-      console.log('BLAH DOES NOT EXIST');
-      RNFS.writeFile(
-        record,
-        'Correct : ' +
-          JSON.stringify(obj.correct) +
-          ',' +
-          'Wrong : ' +
-          JSON.stringify(obj.wrong) +
-          ',' +
-          'Timer : ' +
-          stime +
-          ',' +
-          'Date : ' +
-          date +
-          ',' +
-          'Time : ' +
-          time +
-          '\n',
-        'utf8',
-      )
-        .then((success) => {
-          console.log(JSON.stringify(obj));
-        })
-        .catch((err) => {
-          console.log(err.message);
+    }
+    else {
+        AsyncStorage.setItem('@storage_key', JSON.stringify(obj), (err)=> {
+          if (err){
+              console.log('an error');
+              throw err;
+          }
+        // console.log('success');
+      }).catch((err)=> {
+          console.log('error is: ' + err);
       });
     }
+} catch (error) {
+    // Error retrieving data
+}
   };
 }
 

screens/settings.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import {
   SafeAreaView,
-  ImageBackground,
+  //ImageBackground,
   Text,
   View,
   TouchableOpacity,
@@ -63,6 +63,7 @@ export default class Settings extends React.Component {
     super(props);
     this.state = {
       value: 0,
+      listN : [],
     };
   }
   toggleKeyword = (keyword) => {
@@ -74,16 +75,16 @@ export default class Settings extends React.Component {
     } else {
          list.push(keyword);
     }
-    this.setState({notes: list});
-    this.saveData(notes);
+    this.setState({listN: list});
+    this.saveData(this.state.listN);
     this.displayData();
    // console.log(notes);
   };
 
     saveData = async () => {
-      RNFS.writeFile(path,JSON.stringify(notes),'utf8',)
+      RNFS.writeFile(path,JSON.stringify(this.state.listN),'utf8',)
         .then((success) => {
-        console.log(JSON.stringify(notes));
+        console.log(JSON.stringify(this.state.listN));
         })
         .catch((err) => {
           console.log(err.message);
@@ -231,7 +232,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'black',
     borderRadius: 10,
-    backgroundColor: 'rgba(0,0,0,0)',
+    backgroundColor: 'rgba(52, 52, 52, 0.0)',
     //opacity: 0.5,
     padding: 10,
     marginRight: config.deviceWidth * 0.03,