Updating UI

App.js

@@ -156,30 +156,11 @@ class App extends React.PureComponent {
           <Stack.Screen
             name="4"
             component={MetronomeSkill}
-            options={({navigation}) => ({
-              title: 'Metronome',
-              //title: 'C Major',
+            options={{
+              title: ' ',
               headerTransparent: true,
-              headerStyle: {
-                backgroundColor: '#81C9C9',
-              },
-              headerTitleStyle: {
-                fontFamily: 'Gilroy-Bold',
-                fontSize: 20,
-                lineHeight: 25,
-                marginLeft: '5%',
-              },
-              headerBackImage: () => (
-                <Image
-                  style={{height: 50, width: 50}}
-                  source={closeIcon}
-                  onPress={() => {
-                    Orientation.lockToPortrait();
-                    navigation.navigate('1');
-                  }}
-                />
-              ),
-            })}
+              headerLeft: null,
+            }}
           />
           <Stack.Screen
             name="5"

screens/listening.js

@@ -550,7 +550,7 @@ class Listen extends React.Component {
             <Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={rightIcon}/>
             </TouchableOpacity>
           </View>
-          <View style={{backgroundColor:'#9F9F9F'}}>
+          <View style={{backgroundColor:'#9F9F9F', position: 'absolute'}}/>
             <View style={styles.screenA}>
               {NOTESWHITE.slice(0, 13).map((item,id) => (
                 <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle}
@@ -567,7 +567,6 @@ class Listen extends React.Component {
                 </TouchableHighlight>
               ))}
             </View>
-          </View>
         </View>
 
         <View style={styles.screen}>

style/styleMetronome.js

@@ -6,12 +6,41 @@ const config = {
   deviceHeight: Dimensions.get('window').height,
 };
 
+const height = Dimensions.get('window').height;
+const width = Dimensions.get('window').width;
+
 export default StyleSheet.create({
-  imagebackground: {
-    width: '100%',
-    height: '100%',
+
+  viewTitle: {
+    flexDirection: 'row',
+    width:width,
+    height: height * 0.06,
+  },
+  textTitle: {
+    fontFamily: 'Gilroy-Bold',
+    fontSize: 20,
+    lineHeight: 25,
+    marginLeft: width * 0.17,
+    paddingVertical: height * 0.012,
+  },
+  closeIcon: {
+    height: 50,
+    width: 50,
+    padding:10,
   },
 
+
+
+
+
+
+
+
+
+
+
+
+
   modal1:{
     backgroundColor: '#545252',
     marginTop:296,