updating UI

App.js

@@ -4,7 +4,6 @@ import {Image, Dimensions} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import {Icon} from 'react-native-elements';
-import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
 //import Settings from './screens/settings';
 import SettingsScale from './screens/settingScale';
 import SettingsListen from './screens/settingListen';
@@ -19,7 +18,6 @@ import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs
 const closeIcon = require('./media/img/btn_close.png');
 
 const Stack = createStackNavigator();
-const Tab = createMaterialBottomTabNavigator();
 const TabTop = createMaterialTopTabNavigator();
 
 function LogBook() {
@@ -140,65 +138,21 @@ class App extends React.PureComponent {
           <Stack.Screen
             name="2"
             component={Quiz}
-            options={({navigation}) => ({
-              title: 'Scale',
-              headerTitleStyle: {
-                fontFamily: 'Gilroy-Bold',
-                fontSize: 20,
-                lineHeight: 25,
-                marginHorizontal: Dimensions.get('window').width * 0.15,
-                color: '#3B3A39',
-              },
-              headerStyle: {
-                backgroundColor: '#E07EF9',
-              },
-              headerTintColor: '#fff',
+            options={{
+              title: ' ',
               headerTransparent: true,
-              headerBackImage: () => (
-                <Icon
-                  name="close"
-                  type="font-awesome"
-                  size={26}
-                  color="black"
-                  onPress={() => {
-                    navigation.navigate('1');
-                    Orientation.lockToPortrait();
+              headerLeft: null,
             }}
           />
-              ),
-            })}
-          />
           <Stack.Screen
             name="3"
             component={Listen}
-            options={({navigation}) => ({
-              title: 'Listen Skill',
-              headerTitleStyle: {
-                fontFamily: 'Gilroy-Bold',
-                fontSize: 20,
-                lineHeight: 25,
-                marginHorizontal: Dimensions.get('window').width * 0.15,
-                color: '#3B3A39',
-              },
-              headerStyle: {
-                backgroundColor: '#E07EF9',
-              },
-              headerTintColor: '#fff',
+            options={{
+              title: ' ',
               headerTransparent: true,
-              headerBackImage: () => (
-                <Icon
-                  name="close"
-                  type="font-awesome"
-                  size={26}
-                  color="black"
-                  onPress={() => {
-                    navigation.navigate('1');
-                    Orientation.lockToPortrait();
+              headerLeft: null,
             }}
           />
-              ),
-            })}
-          />
           <Stack.Screen
             name="4"
             component={MetronomeSkill}

screens/quiz.js

@@ -29,10 +29,6 @@ import Sound from 'react-native-sound';
 import moment from 'moment';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
-const con = {
-  deviceWidth: Dimensions.get('window').width,
-  deviceHeight: Dimensions.get('window').height,
-};
 const date = moment().utcOffset('+08:00').format('DD/MM/YYYY');
 const time = moment().utcOffset('+08:00').format('h:mm a');
 const day = moment().utcOffset('+08:00').format('ddd');
@@ -77,6 +73,11 @@ const corIcon = require('../media/img/icon_check.png');
 const timerIcon = require('../media/img/icon_timer.png');
 const undo1 = require('../media/img/btn_reset_grey.png');
 const undo2 = require('../media/img/btn_reset_orange.png');
+const closeIcon = require('../media/img/btn_close.png');
+
+const height = Dimensions.get('window').height;
+const width = Dimensions.get('window').width;
+
 
 var imageN = '';
 var indexN = 0;
@@ -996,7 +997,13 @@ class Quiz extends React.Component {
         {this.showCorrect()}
         {this.showWrong()}
         {this.showDone()}
+        <View style={styles.viewTitle}>
+          <TouchableOpacity  style={{marginHorizontal:height * 0.01}} onPress={() => this.homeExit()}>
+          <Image style={styles.closeIcon} source={closeIcon} />
+          </TouchableOpacity>
+          <Text style={styles.textTitle}>Scale</Text>
           {this.clickSubmitButton()}
+        </View>
 
         <View style={styles.view1}>
           <View  style={styles.viewQues}>

style/styleQuiz.js

@@ -5,19 +5,38 @@ const width = Dimensions.get('window').width;
 
 export default StyleSheet.create({
 
+viewTitle: {
+  flexDirection: 'row',
+  height:'15%',
+  width:height,
+  marginTop:'2%',
+},
+textTitle: {
+  fontFamily: 'Gilroy-Bold',
+  fontSize: 20,
+  lineHeight: 25,
+  marginLeft: height * 0.36,
+  marginTop:width * 0.04,
+},
+closeIcon: {
+  height: 50,
+  width: 50,
+  padding:10,
+},
 // clickSubmitButton ()
 viewSubmitButton:{
   flexDirection: 'row',
-  width:width,
-  marginBottom:height * 0.05,
+  width:height * 0.2,
+  marginBottom:width * 0.05,
+  height:width * 0.15,
+  marginLeft:height * 0.08,
 },
 // clickSubmitButton () if true
 buttonSubmitButtonT:{
   backgroundColor:'#E7E7E7',
   borderRadius:8,
-  width:width * 0.22,
-  marginHorizontal:width * 0.75,
-  marginTop:'3%',
+  width:height * 0.22,
+  marginHorizontal:height * 0.05,
 },
 textSubmitButtonT:{
   fontFamily:'Gilroy-Bold',
@@ -25,14 +44,14 @@ textSubmitButtonT:{
   textAlign:'center',
   lineHeight:20,
   color:'#848484',
-  paddingVertical:height * 0.035,
+  paddingVertical:width * 0.035,
 },
 // clickSubmitButton () if false
 buttonSubmitButtonF:{
   backgroundColor:'#EF476F',
   borderRadius:8,
-  width:width * 0.22,
-  marginHorizontal:width * 0.75,
+  width:height * 0.22,
+  marginHorizontal:height * 0.05,
   marginTop:'3%',
 },
 textSubmitButtonF:{
@@ -41,7 +60,7 @@ textSubmitButtonF:{
   textAlign:'center',
   lineHeight:20,
   color:'#FFFBF0',
-  paddingVertical:height * 0.035,
+  paddingVertical:width * 0.035,
 },
 
 //clickResetButton ()
@@ -56,9 +75,9 @@ buttonResetButtonT:{
   borderColor:'#E7E7E7',
   borderWidth:1,
   borderRadius:8,
-  width:width * 0.22,
-  marginHorizontal:width * 0.72,
-  marginTop:height * 0.03,
+  width:height * 0.22,
+  marginHorizontal:height * 0.72,
+  marginTop:width * 0.03,
 },
 textResetButtonT:{
   fontFamily:'Gilroy-Bold',
@@ -66,16 +85,16 @@ textResetButtonT:{
   textAlign:'left',
   lineHeight:18,
   color:'#848484',
-  paddingVertical:height * 0.04,
+  paddingVertical:width * 0.04,
 },
 buttonResetButtonF:{
   backgroundColor:'#FFFBF0',
   borderColor:'#FC8121',
   borderWidth:1,
   borderRadius:8,
-  width:width * 0.22,
-  marginHorizontal:width * 0.72,
-  marginTop:height * 0.03,
+  width:height * 0.22,
+  marginHorizontal:height * 0.72,
+  marginTop:width * 0.03,
 },
 textResetButtonF:{
   fontFamily:'Gilroy-Bold',
@@ -83,15 +102,15 @@ textResetButtonF:{
   textAlign:'left',
   lineHeight:18,
   color:'#FC8121',
-  paddingVertical:height * 0.04,
+  paddingVertical:width * 0.04,
 },
 
 //showQuit()
 viewShowQuit:{
-  marginHorizontal:width * 0.28,
-  width:width * 0.45,
-  height:height * 0.6,
-  marginTop:width * 0.13,
+  marginHorizontal:height * 0.28,
+  width:height * 0.45,
+  height:width * 0.6,
+  marginTop:height * 0.13,
   alignItems: 'center',
   backgroundColor:'#FFFBF0',
   borderRadius: 16,
@@ -109,7 +128,7 @@ textQuitScale:{
   textAlign: 'center',
   lineHeight:30,
   color:'#3B3A39',
-  paddingTop:height * 0.17,
+  paddingTop:width * 0.17,
 },
 viewButtonQuit:{
   alignItems: 'center',
@@ -133,7 +152,7 @@ textNoQuit:{
   fontSize:16,
   textAlign: 'left',
   lineHeight:20,
-  paddingHorizontal:width * 0.04,
+  paddingHorizontal:height * 0.04,
 },
 buttonYesQuit:{
   backgroundColor: 'white',
@@ -154,15 +173,15 @@ textYesQuit:{
   fontSize:16,
   textAlign: 'left',
   lineHeight:20,
-  paddingHorizontal:width * 0.03,
+  paddingHorizontal:height * 0.03,
 },
 
 //showCorrect()
 viewShowCorrect:{
-  marginHorizontal: Dimensions.get('window').width * 0.28,
-  width :width * 0.45,
-  height :height * 0.6,
-  marginTop :width * 0.13,
+  marginHorizontal: height * 0.28,
+  width :height * 0.45,
+  height :width * 0.6,
+  marginTop :height * 0.13,
   alignItems: 'center',
   backgroundColor:'#FFFBF0',
   borderRadius: 16,
@@ -180,7 +199,7 @@ textScaleResult:{
   textAlign: 'center',
   lineHeight:25,
   color:'#3B3A39',
-  paddingTop:height * 0.17,
+  paddingTop:width * 0.17,
 },
 textCorrect:{
   fontSize: 24,
@@ -188,11 +207,11 @@ textCorrect:{
   textAlign: 'center',
   lineHeight:30,
   color:'#14A76C',
-  paddingTop:height * 0.02,
+  paddingTop:width * 0.02,
 },
 buttonOK:{
   backgroundColor: '#81C9C9',
-  width :width * 0.3,
+  width :height * 0.3,
   paddingTop: 15,
   paddingBottom: 15,
   borderRadius: 8,
@@ -206,15 +225,15 @@ textOK:{
   fontSize:16,
   textAlign: 'left',
   lineHeight:20,
-  paddingHorizontal:width * 0.12,
+  paddingHorizontal:height * 0.12,
 },
 
 //showWrong()
 viewShowWrong: {
-  marginHorizontal:width * 0.28,
-  width :width * 0.45,
-  height :height * 0.6,
-  marginTop :width * 0.13,
+  marginHorizontal:height * 0.28,
+  width :height * 0.45,
+  height :width * 0.6,
+  marginTop :height * 0.13,
   alignItems: 'center',
   backgroundColor:'#FFFBF0',
   borderRadius: 16,
@@ -232,7 +251,7 @@ textScaleResultW:{
   textAlign: 'center',
   lineHeight:25,
   color:'#3B3A39',
-  paddingTop:height * 0.17,
+  paddingTop:width * 0.17,
 },
 textWrong:{
   fontSize: 24,
@@ -240,11 +259,11 @@ textWrong:{
   textAlign: 'center',
   lineHeight:30,
   color:'#D11427',
-  paddingTop:height * 0.02,
+  paddingTop:width * 0.02,
 },
 buttonOKW:{
   backgroundColor: '#81C9C9',
-  width :width * 0.3,
+  width :height * 0.3,
   paddingTop: 15,
   paddingBottom: 15,
   borderRadius: 8,
@@ -258,15 +277,15 @@ textOKW:{
   fontSize:16,
   textAlign: 'left',
   lineHeight:20,
-  paddingHorizontal:width * 0.12,
+  paddingHorizontal:height * 0.12,
 },
 
 //showDone()
 viewShowDone:{
-  marginHorizontal:width * 0.28,
-  width :width * 0.42,
-  height :height * 0.73,
-  marginTop :width * 0.08,
+  marginHorizontal:height * 0.28,
+  width :height * 0.42,
+  height :width * 0.73,
+  marginTop :height * 0.08,
   alignItems: 'center',
   backgroundColor:'#FFFBF0',
   borderRadius: 16,
@@ -284,7 +303,7 @@ textWellDone:{
   textAlign: 'center',
   lineHeight:25,
   color:'#3B3A39',
-  paddingTop:height * 0.14,
+  paddingTop:width * 0.14,
 },
 viewScaleResult:{
   borderRadius:16,
@@ -293,7 +312,8 @@ viewScaleResult:{
   backgroundColor:'#FFFBF0',
   marginTop:'2.5%',
   marginLeft:'2%',
-  width:width * 0.33, marginBottom:'1.7%',
+  width:height * 0.33,
+  marginBottom:'1.7%',
 },
 textScaleResultD: {
   fontSize: 20,
@@ -301,13 +321,13 @@ textScaleResultD: {
   textAlign: 'center',
   lineHeight:25,
   color:'#3D9090',
-  paddingHorizontal:width * 0.06,
-  paddingTop:height * 0.02,
+  paddingHorizontal: height * 0.06,
+  paddingTop:width * 0.02,
 },
 viewCorrectWrong:{
   flexDirection: 'row',
-  paddingHorizontal:width * 0.07,
-  paddingVertical:height * 0.02,
+  paddingHorizontal:height * 0.07,
+  paddingVertical:width * 0.02,
 },
 corIcon:{
   height:'65%',
@@ -337,7 +357,7 @@ textWrongD:{
 },
 buttonDone:{
   backgroundColor: '#81C9C9',
-  width :width * 0.33,
+  width :height * 0.33,
   paddingTop: 15,
   paddingBottom: 15,
   borderRadius: 8,
@@ -351,21 +371,21 @@ textDone:{
   fontSize:16,
   textAlign: 'left',
   lineHeight:20,
-  paddingHorizontal:width * 0.14,
+  paddingHorizontal:height * 0.12,
 },
 
 //render()
 view1:{
   backgroundColor:'#FFFBF0',
   flexDirection: 'row',
-  width:width,
-  height:height * 0.4,
+  width:height,
+  height:width * 0.4,
   borderTopLeftRadius:8,
   borderTopRightRadius:8,
 },
 viewQues:{
-  width:width * 0.25,
-  marginHorizontal:width * 0.03,
+  width:height * 0.25,
+  marginHorizontal:height * 0.03,
   marginTop:'6%',
   marginBottom:'2%',
 },
@@ -401,13 +421,13 @@ textCorrectQ:{
 },
 viewImageNotes:{
   alignItems:'center',
-  width:width * 0.32,
-  marginHorizontal:width * 0.03,
+  width:height * 0.32,
+  marginHorizontal:height * 0.03,
   marginTop:'2%',
 },
 imageNote:{
-  height:height * 0.27,
-  width:width * 0.18,
+  height:width * 0.27,
+  width:height * 0.18,
 },
 textKeyLeft:{
   fontFamily:'Gilroy-Bold',
@@ -426,8 +446,8 @@ textKeyCount:{
 },
 viewTimerUndo:{
   alignItems:'center',
-  width:width * 0.25,
-  marginHorizontal:width * 0.045,
+  width:height * 0.25,
+  marginHorizontal:height * 0.045,
   marginTop:'2.5%',
 },
 //stopwatch
@@ -437,7 +457,7 @@ containerStopWatch:{
   borderRadius: 8,
   borderColor:'#FFECDA',
   borderWidth:2,
-  width:width * 0.22,
+  width:height * 0.22,
   alignItems: 'center',
 },
 textStopWatch:{
@@ -451,15 +471,15 @@ textStopWatch:{
 },
 timerIcon:{
   height:'18%',
-  width:'13%',
+  width:'15%',
   position: 'absolute',
-  left:25,
-  top:15,
+  left:22,
+  top:16,
 },
 
 //White Notes
 whiteNotesButton: {
-  width:width / 14,
+  width:height / 14,
   borderWidth: 0.5,
   borderColor: '#707070',
   alignItems: 'center',
@@ -467,7 +487,7 @@ whiteNotesButton: {
   borderBottomWidth: 1,
 },
 whiteNotesButtonPress:{
-  width:width / 14,
+  width:height / 14,
   alignItems: 'center',
   backgroundColor: '#FCE1FF',
   borderWidth: 0.5,