update UI

App.js

@@ -16,6 +16,7 @@ import Quiz from './screens/quiz';
 import MetronomeSkill from './screens/metronome';
 import Orientation from 'react-native-orientation';
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
+const closeIcon = require('./media/img/btn_close.png');
 
 const Stack = createStackNavigator();
 const Tab = createMaterialBottomTabNavigator();
@@ -23,7 +24,7 @@ const TabTop = createMaterialTopTabNavigator();
 
 function LogBook() {
   return (
-   <TabTop.Navigator
+    <TabTop.Navigator
       tabBarOptions={{
         indicatorStyle: {
           backgroundColor: 'transparent',
@@ -65,7 +66,7 @@ function Settings() {
     <TabTop.Navigator
       tabBarOptions={{
         indicatorStyle: {
-          backgroundColor: 'transparent',
+          backgroundColor: '#3D9090',
         },
         labelStyle: {
           fontSize: 14,
@@ -107,6 +108,11 @@ class App extends React.PureComponent {
     Orientation.lockToPortrait();
   }
 
+  backAction = () => {
+    this.props.navigation.navigate('1');
+    Orientation.lockToPortrait();
+  };
+
   render() {
     return (
       <NavigationContainer>
@@ -144,7 +150,7 @@ class App extends React.PureComponent {
               headerTransparent: true,
               headerBackImage: () => (
                 <Icon
-                  name="chevron-left"
+                  name="close"
                   type="font-awesome"
                   size={26}
                   color="black"
@@ -169,7 +175,7 @@ class App extends React.PureComponent {
               headerTransparent: true,
               headerBackImage: () => (
                 <Icon
-                  name="chevron-left"
+                  name="close"
                   type="font-awesome"
                   size={26}
                   color="black"
@@ -187,8 +193,8 @@ class App extends React.PureComponent {
             options={({navigation}) => ({
               title: 'Metronome',
               //title: 'C Major',
-               headerTransparent: true,
-               headerStyle: {
+              headerTransparent: true,
+              headerStyle: {
                 backgroundColor: '#81C9C9',
               },
               headerTitleStyle: {
@@ -198,14 +204,12 @@ class App extends React.PureComponent {
                 marginHorizontal: Dimensions.get('window').width * 0.15,
               },
               headerBackImage: () => (
-                <Icon
-                  name="chevron-left"
-                  type="font-awesome"
-                  size={26}
-                  color="black"
+                <Image
+                  style={{height: 50, width: 50}}
+                  source={closeIcon}
                   onPress={() => {
-                    navigation.navigate('1');
                     Orientation.lockToPortrait();
+                    navigation.navigate('1');
                   }}
                 />
               ),
@@ -216,7 +220,7 @@ class App extends React.PureComponent {
             component={LogBook}
             options={{
               title: 'Record',
-               headerTransparent: true,
+              headerTransparent: true,
               headerStyle: {
                 backgroundColor: '#81C9C9',
               },
@@ -227,12 +231,7 @@ class App extends React.PureComponent {
                 marginHorizontal: Dimensions.get('window').width * 0.2,
               },
               headerBackImage: () => (
-                <Icon
-                  name="chevron-left"
-                  type="font-awesome"
-                  size={26}
-                  color="black"
-                />
+                <Image style={{height: 50, width: 50}} source={closeIcon} />
               ),
             }}
           />
@@ -241,7 +240,7 @@ class App extends React.PureComponent {
             component={Settings}
             options={{
               title: 'Setting',
-               headerTransparent: true,
+              headerTransparent: true,
               headerStyle: {
                 backgroundColor: '#81C9C9',
               },
@@ -252,12 +251,7 @@ class App extends React.PureComponent {
                 marginHorizontal: Dimensions.get('window').width * 0.2,
               },
               headerBackImage: () => (
-                <Icon
-                  name="chevron-left"
-                  type="font-awesome"
-                  size={26}
-                  color="black"
-                />
+                <Image style={{height: 50, width: 50}} source={closeIcon} />
               ),
             }}
           />