still updating

App.js

+/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-//import {ImageBackground} from 'react-native';
+import {Image} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import {Icon} from 'react-native-elements';
-
-import Settings from './screens/settings';
+import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
+//import Settings from './screens/settings';
+import SettingsScale from './screens/settingScale';
+import SettingsListen from './screens/settingListen';
 import Listen from './screens/listening';
-import LogBook from './screens/logbook';
+import LogBookScale from './screens/logbookScale';
+import LogBookListen from './screens/logbookListen';
 import Home from './screens/home';
 import Quiz from './screens/quiz';
-
 import Orientation from 'react-native-orientation';
 
 const Stack = createStackNavigator();
+const Tab = createMaterialBottomTabNavigator();
+
+function LogBook() {
+  return (
+    <Tab.Navigator
+      activeColor="white"
+      inactiveColor="black"
+      barStyle={{backgroundColor: '#7eb9db', fontSize: 10}}>
+      <Tab.Screen
+        name="Scale"
+        component={LogBookScale}
+        options={{
+          tabBarLabel: 'Scale',
+          tabBarIcon: ({color, size}) => (
+            <Image
+              style={{height: 20, width: 30}}
+              source={require('./media/img/1piano.png')}
+            />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Listen Scale"
+        component={LogBookListen}
+        options={{
+          tabBarLabel: 'Listen Skill',
+          tabBarIcon: ({color, size}) => (
+            <Image
+              style={{height: 23, width: 30}}
+              source={require('./media/img/listening.png')}
+            />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+function Settings() {
+  return (
+    <Tab.Navigator
+      activeColor="white"
+      inactiveColor="black"
+      barStyle={{backgroundColor: '#7eb9db', fontSize: 10}}>
+      <Tab.Screen
+        name="Scale"
+        component={SettingsScale}
+        options={{
+          tabBarLabel: 'Scale',
+          tabBarIcon: ({color, size}) => (
+            <Image
+              style={{height: 20, width: 30}}
+              source={require('./media/img/1piano.png')}
+            />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Listen Scale"
+        component={SettingsListen}
+        options={{
+          tabBarLabel: 'Listen Skill',
+          tabBarIcon: ({color, size}) => (
+            <Image
+              style={{height: 23, width: 30}}
+              source={require('./media/img/listening.png')}
+            />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
 
 class App extends React.PureComponent {
   componentDidMount() {

package.json

@@ -12,8 +12,9 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.13.2",
     "@react-native-community/masked-view": "^0.1.10",
-    "@react-navigation/bottom-tabs": "^5.11.2",
+    "@react-navigation/bottom-tabs": "^5.11.7",
     "@react-navigation/drawer": "^5.11.4",
+    "@react-navigation/material-bottom-tabs": "^5.3.13",
     "@react-navigation/native": "^5.8.10",
     "@react-navigation/stack": "^5.12.8",
     "moment": "^2.29.1",
@@ -26,6 +27,7 @@
     "react-native-grid-list": "^1.1.0",
     "react-native-numeric-input": "^1.8.3",
     "react-native-orientation": "^3.1.3",
+    "react-native-paper": "^4.7.1",
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.15.0",

screens/home.js

@@ -76,7 +76,7 @@ class Home extends React.PureComponent {
                   style={styles.menu}
                   onPress={() => this.props.navigation.navigate('5')}>
                   <Image
-                    style={styles.image2}
+                    style={styles.image3}
                     source={require('../media/img/settings.png')}
                   />
                   <Text style={styles.textmenu}>{'\n'}Settings</Text>

screens/logbookListen.js

+/* eslint-disable prettier/prettier */
+import React from 'react';
+import {
+  SafeAreaView,
+  ImageBackground,
+  Text,
+  View,
+  ScrollView,
+  BackHandler,
+} from 'react-native';
+import styles from '../style/styleLogbook';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import Orientation from 'react-native-orientation';
+
+class LogBookListen extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      logbook: [],
+
+    };
+  }
+
+  displayData = async () => {
+
+    try {
+    const value = await AsyncStorage.getItem('@listening_key');
+    if (value !== null) {
+         this.setState({ logbook: JSON.parse(value)});
+         console.log(this.state.logbook);
+    }
+    } catch (error) {
+        // Error retrieving data
+      }
+  };
+
+  componentDidMount() {
+    Orientation.lockToPortrait();
+     BackHandler.addEventListener('hardwareBackPress', this.homeExit);
+    this.displayData();
+  }
+
+  homeExit = async () => {
+    this.props.navigation.navigate('1');
+     BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
+    //Orientation.lockToPortrait();
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <ImageBackground
+          source={require('../media/img/background.jpg')}
+          style={styles.imagebackground}>
+          <SafeAreaView>
+            <ScrollView
+              style={styles.scroll}>
+                {this.state.logbook && this.state.logbook.map((item, id) => (
+                <View
+                  key ={id}
+                  style={styles.view1}>
+                  <View style={styles.datedays}>
+                  <View>
+                  <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={styles.textday}>{item.day}</Text>
+                 </View>
+                 </View>
+                 <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()}
+            </ScrollView>
+          </SafeAreaView>
+        </ImageBackground>
+      </View>
+    );
+  }
+}
+export default LogBookListen;
+
+

screens/logbook.js → screens/logbookScale.js

@@ -12,7 +12,7 @@ import styles from '../style/styleLogbook';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import Orientation from 'react-native-orientation';
 
-class LogBook extends React.PureComponent {
+class LogBookScale extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -84,6 +84,6 @@ class LogBook extends React.PureComponent {
     );
   }
 }
-export default LogBook;
+export default LogBookScale;
 
 

screens/quiz.js

@@ -49,15 +49,14 @@ const NOTESWHITE = [
 const NOTESBLACK = [
   {name: 'C#1', url: require('../media/sound/c_c.mp3'), left:0.048},
   {name: 'D#1', url: require('../media/sound/d_d.mp3'),left:0.123},
-  {name: 'D#1', url: require('../media/sound/d_d.mp3'),left:0.275},
-  {name: 'F#1', url: require('../media/sound/f_f.mp3'),left:0.348},
-  {name: 'G#1', url: require('../media/sound/g_g.mp3'), left:0.423},
-  {name: 'A#1', url: require('../media/sound/a_a.mp3'), left:0.575},
-  {name: 'C#2', url: require('../media/sound/c_cc.mp3'), left:0.65},
-  {name: 'D#2', url: require('../media/sound/d_dd.mp3'), left:0.798},
-  {name: 'F#2', url: require('../media/sound/f_ff.mp3'), left:0.872},
-  {name: 'G#2', url: require('../media/sound/g_gg.mp3'), left:0.95},
-  {name: 'A#2', url: require('../media/sound/a_aa.mp3'), left:0.575},
+  {name: 'F#1', url: require('../media/sound/d_d.mp3'),left:0.275},
+  {name: 'G#1', url: require('../media/sound/f_f.mp3'),left:0.348},
+  {name: 'A#1', url: require('../media/sound/g_g.mp3'), left:0.423},
+  {name: 'C#1', url: require('../media/sound/a_a.mp3'), left:0.575},
+  {name: 'D#2', url: require('../media/sound/c_cc.mp3'), left:0.65},
+  {name: 'F#2', url: require('../media/sound/d_dd.mp3'), left:0.798},
+  {name: 'G#2', url: require('../media/sound/f_ff.mp3'), left:0.872},
+  {name: 'A#2', url: require('../media/sound/g_gg.mp3'), left:0.95},
 ];
 const keywordsList = [];
 const corSound = require('../media/sound/correct.mp3');
@@ -811,7 +810,7 @@ class Quiz extends React.Component {
 
   render() {
     return (
-      <View style={styles.container}>
+     <View style={styles.container}>
        <ImageBackground
           source={require('../media/img/background.jpg')}
           style={styles.imagebackground}>
@@ -900,7 +899,24 @@ class Quiz extends React.Component {
               stime = tt;
             }}
             // Options for the styling
-            options={[styles.optcontainer, styles.opttext]}/>
+            options={{//timer
+                      container: {
+                        backgroundColor: 'black',
+                        padding: 5,
+                        borderRadius: 10,
+                        borderColor:'white',
+                        borderWidth:3,
+                        width: 200,
+                        alignItems: 'center',
+                      },
+                      text: {
+                        fontSize: 25,
+                        color: '#FFF',
+                        textAlign: 'center',
+                        paddingTop: 5,
+                        alignItems: 'center',
+                        fontFamily: 'sans-serif',
+                      }}}/>
           </View>
           <View style={styles.buttonView}>
             <View style={styles.submit}>

screens/settingListen.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,
+  Image,
+  ScrollView,
+  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';
+import notesData from './dataNotes';
+var path1 = RNFS.DocumentDirectoryPath + '/counterlisten.txt';
+var counter = 0;
+var notes = notesData;
+
+
+export default class SettingsListen extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 0,
+      listN : [],
+    };
+  }
+
+  toggleKeyword = (keyword) => {
+  // console.log(notes.indexOf(keyword));
+    let list = notes;
+    let index = -1;
+    if ((index = notes.indexOf(keyword)) !== -1) {
+      list.splice(index, 1);
+    } else {
+         list.push(keyword);
+    }
+    this.setState({listN: list});
+    if (this.state.listN !== null){
+       this.setState({listN: list});
+         this.saveData(this.state.listN);
+    }
+    else {
+          this.setState({listN: notes});
+         this.saveData2(this.state.listN);
+    }
+
+    this._retrieveData();
+   // console.log(notes);
+  };
+
+  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)=> {
+          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');
+    if (value !== null) {
+      // We have data!!
+      console.log(value);
+    }
+  } catch (error) {
+    // Error retrieving data
+  }
+};
+
+  saveData1 = async () => {
+      RNFS.writeFile(path1,JSON.stringify(counter),'utf8',)
+        .then((success) => {
+        //console.log(JSON.stringify(counter));
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+  };
+
+  displayData1 = async () => {
+    RNFS.readFile(path1, 'ascii')
+      .then((res) => {
+        console.log(JSON.stringify(res));
+      })
+      .catch((err) => {
+        console.log(err.message, err.code);
+      });
+  };
+
+  componentWillUnmount() {
+     Orientation.lockToPortrait();
+     BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
+    // Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
+  }
+
+  componentDidMount() {
+   // notes.splice(0, notes.length);
+   // console.log(notes);
+    Orientation.lockToPortrait();
+        BackHandler.addEventListener('hardwareBackPress', this.homeExit);
+   // console.log(notes.length);
+    counter = 0;
+    RNFS.unlink(path1).then(res => {
+    console.log('delete');
+    RNFS.scanFile(path1);
+    })
+    .catch(err => {
+        console.log(err.message, err.code);
+    });
+  }
+
+  onChange(number, type) {
+    //console.log(number, type); // 1, + or -
+    counter = number;
+    if (counter > 0) {
+    this.saveData1(counter);
+    console.log(number);
+    this.displayData1();
+    }
+  }
+
+  homeExit = async () => {
+    this.props.navigation.navigate('1');
+  //Orientation.lockToPortrait();
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+      <ImageBackground
+          source={require('../media/img/background.jpg')}
+          style={styles.imagebackground}>
+          <SafeAreaView>
+          <View style={styles.view1}>
+          <Text style={styles.textques}>No. of Questions :  </Text>
+          <NumericInput
+            value={this.state.value}
+            minValue={0}
+            maxValue={100}
+            onChange={this.onChange.bind(this)}
+            onLimitReached={(isMax,msg) => console.log(isMax,msg)}
+            totalWidth={150}
+            totalHeight={40}
+            iconSize={25}
+            step={1}
+            valueType="real"
+            rounded
+            textColor="black"
+            iconStyle={{ color: 'white' }}
+            rightButtonBackgroundColor="black"
+            leftButtonBackgroundColor="black"/>
+            </View>
+          </SafeAreaView>
+          </ImageBackground>
+      </View>
+    );
+  }
+}

screens/settings.js → screens/settingScale.js

@@ -24,7 +24,7 @@ var counter = 0;
 var notes = notesData;
 
 
-export default class Settings extends React.Component {
+export default class SettingsScale extends React.Component {
   constructor(props) {
     super(props);
     this.state = {

style/styleHome.js

@@ -39,4 +39,8 @@ export default StyleSheet.create({
     height:150,
     width:150,
 },
+  image3:{
+    height:150,
+    width:200,
+},
 });

style/styleListen.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: '55%',
+    alignItems: 'center',
+    borderColor: 'black',
+    marginTop:5,
+  },
+  cc1: {
+    flexDirection: 'row',
+    marginLeft: 5,
+  },
+  t: {
+    fontSize: 25,
+    fontFamily: 'sans-serif',
+  },
+  c2: {
+    flexDirection: 'row',
+    height: '35%',
+  },
+
+  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: 100,
+    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: 100,
+    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.deviceWidth * 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,
+    paddingTop:100,
+    textAlign: 'center',
+    fontFamily: 'sans-serif',
+  },
+   textStyleB: {
+    fontSize: 16,
+    padding: 8,
+    paddingTop:5,
+    textAlign: 'center',
+    color:'white',
+    fontFamily: 'sans-serif',
+  },
+  buttonView: {
+    flexDirection: 'column',
+    marginLeft: config.deviceHeight * 1.0,
+  },
+  buttonStyle: {
+    width: config.deviceWidth * 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,
+  },
+  buttonB1: {
+    alignItems: 'center',
+    backgroundColor: 'black',
+    height: '55%',
+    width: '1.5%',
+    position: 'absolute',
+  },
+  SbuttonB1: {
+    alignItems: 'center',
+    backgroundColor: 'black',
+    height: '55%',
+   marginLeft: config.deviceWidth * 0.048,
+    width: '1.5%',
+    position: 'absolute',
+  },
+});

style/styleQuiz.js

@@ -12,10 +12,10 @@ export default StyleSheet.create({
     flex: 1,
   },
   viewmodalQ: {
-    marginLeft: Dimensions.get('window').width * 0.35,
-    width : Dimensions.get('window').width * 0.4,
-    height : Dimensions.get('window').height * 0.4,
-    marginTop : Dimensions.get('window').height * 0.25,
+    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,
@@ -64,8 +64,8 @@ export default StyleSheet.create({
   },
   // Modal Correct and Wrong
   viewmodalCW: {
-    marginLeft: Dimensions.get('window').width * 0.25,
-    width : Dimensions.get('window').width * 0.4,
+    marginLeft: Dimensions.get('window').height * 0.25,
+    width : Dimensions.get('window').height * 0.4,
     alignItems: 'center',
   },
   imagecw: {
@@ -76,7 +76,7 @@ export default StyleSheet.create({
     fontSize: 25,
     fontFamily: 'sans-serif',
     textAlign: 'center',
-    marginTop:Dimensions.get('window').height * 0.43,
+    marginTop:Dimensions.get('window').width * 0.43,
     marginLeft:120,
     color:'white',
   },
@@ -97,8 +97,8 @@ export default StyleSheet.create({
   },
   // Modal Done
   viewmodalD: {
-    marginLeft: Dimensions.get('window').width * 0.3,
-    width : Dimensions.get('window').width * 0.4,
+    marginLeft: Dimensions.get('window').height * 0.3,
+    width : Dimensions.get('window').height * 0.4,
     alignItems: 'center',
   },
   imagedone :{
@@ -113,7 +113,7 @@ export default StyleSheet.create({
     fontSize: 25,
     fontFamily: 'sans-serif',
     textAlign: 'center',
-    marginTop:Dimensions.get('window').height * 0.42,
+    marginTop:Dimensions.get('window').width * 0.42,
     marginLeft:65,
     color:'white',
   },
@@ -281,7 +281,6 @@ export default StyleSheet.create({
     alignItems: 'center',
     backgroundColor: 'black',
     height: '55%',
-    marginLeft: config.deviceWidth * 0.048,
     width: '5%',
     position: 'absolute',
   },
@@ -289,26 +288,7 @@ export default StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#92ddea',
     height: '55%',
-   marginLeft: config.deviceWidth * 0.048,
     width: '5%',
     position: 'absolute',
   },
-  //timer
-   optcontainer: {
-    backgroundColor: 'black',
-    padding: 5,
-    borderRadius: 10,
-    borderColor:'white',
-    borderWidth:3,
-    width: 200,
-    alignItems: 'center',
-  },
-  opttext: {
-    fontSize: 25,
-    color: '#FFF',
-    textAlign: 'center',
-    paddingTop: 5,
-    alignItems: 'center',
-    fontFamily: 'sans-serif',
-  },
 });

style/styleSettings.js

 /* eslint-disable prettier/prettier */
-import {StyleSheet} from 'react-native';
-import config from './config';
+import {StyleSheet,Dimensions} from 'react-native';
+
+const config = {
+  deviceWidth: Dimensions.get('window').width,
+  deviceHeight: Dimensions.get('window').height,
+};
+
 export default StyleSheet.create({
   container: {
     alignItems: 'center',
@@ -46,7 +51,7 @@ export default StyleSheet.create({
     flexWrap: 'wrap',
   },
   textques: {
-    fontSize: 16,
+    fontSize: 15,
     marginRight:9,
     fontFamily: 'sans-serif',
    },

yarn.lock

@@ -710,6 +710,14 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@callstack/react-theme-provider@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz#a173e455e9603c9c45357a3b6ace1273086527ca"
+  integrity sha512-Iec+ybWN0FvNj87sD3oWo/49edGUP0UOSdMnzCJEFJIDYr992ECIuOV89burAAh2/ibPCxgLiK6dmgv2mO/8Tg==
+  dependencies:
+    deepmerge "^3.2.0"
+    hoist-non-react-statics "^3.3.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1171,10 +1179,10 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401"
   integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==
 
-"@react-navigation/bottom-tabs@^5.11.2":
-  version "5.11.2"
-  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.2.tgz#5b541612fcecdea2a5024a4028da35e4a727bde6"
-  integrity sha512-7+hH00N9Ze74VcX8uYWVyXFXZ0Fwid+lG+SSLtmnJjk1Y6oIQpQ17EPqKO0UZlKKjhsvMlAnL5fdgFtoqnSjcA==
+"@react-navigation/bottom-tabs@^5.11.7":
+  version "5.11.7"
+  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.7.tgz#a1d220afe02b6897c0705ddc40265e65c01fa0ba"
+  integrity sha512-O8B/5GiME589fc6ltqV3iJxCdWXhplx+9i7tPbwx4SxKm1e1N9jdL9H8bsx+SWcMBelGfGeZ2WqRwMJzjQDT3Q==
   dependencies:
     color "^3.1.3"
     react-native-iphone-x-helper "^1.3.0"
@@ -1198,6 +1206,11 @@
     color "^3.1.3"
     react-native-iphone-x-helper "^1.3.0"
 
+"@react-navigation/material-bottom-tabs@^5.3.13":
+  version "5.3.13"
+  resolved "https://registry.yarnpkg.com/@react-navigation/material-bottom-tabs/-/material-bottom-tabs-5.3.13.tgz#c9657008894b2ec85ed3560731e8ea6220151e5a"
+  integrity sha512-yx/V8wnjZPq+1Gbxeb9G2xvavS52bRB9YoTkIHbSRuug6VBLSc4yK3N1tWpc5rytQZegIL0h63jOn65uo1hm/g==
+
 "@react-navigation/native@^5.8.10":
   version "5.8.10"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.8.10.tgz#3fe806abff9efb085bcf595212803dd05a1347ca"
@@ -5962,7 +5975,7 @@ react-native-grid-list@^1.1.0:
   dependencies:
     prop-types "^15.6.0"
 
-react-native-iphone-x-helper@^1.3.0:
+react-native-iphone-x-helper@^1.3.0, react-native-iphone-x-helper@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
   integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
@@ -5980,6 +5993,15 @@ react-native-orientation@^3.1.3:
   resolved "https://registry.yarnpkg.com/react-native-orientation/-/react-native-orientation-3.1.3.tgz#d45803841fe94b6cce9acbe904fd5ca191a3711e"
   integrity sha512-A0h0E+2f95X4avmhaBG1ZT8WDxBACA/q//JN2eF1E7kq8AJVxt5XDiavv+aSBkBlqFsfF3bIS+T/DB5mXmnxuA==
 
+react-native-paper@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.7.1.tgz#9f22116d39e4a129be9fd4c8d7342d0f6a20245c"
+  integrity sha512-37xJgCcTAELFBvE7+l9xcMW3wh2/dvrOs7TeRLIpnHsjfa+m4h+vvzb8q0YIUJOKtHcJ4cY77NHUr6JMGzNHFw==
+  dependencies:
+    "@callstack/react-theme-provider" "^3.0.5"
+    color "^3.1.2"
+    react-native-iphone-x-helper "^1.3.1"
+
 react-native-pixel-perfect@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-native-pixel-perfect/-/react-native-pixel-perfect-1.0.2.tgz#8e6dc97e377caa4bd07f9e584ba438d53c0e25e8"