FIX: Receive close button padding (#7602)

components/navigationStyle.tsx

@@ -59,7 +59,6 @@ const navigationStyle = (
   {
     closeButtonPosition,
     onCloseButtonPressed,
-    headerBackVisible = Platform.OS === 'ios' || !closeButtonPosition,
     ...opts
   }: NativeStackNavigationOptions & {
     closeButtonPosition?: CloseButtonPosition;
@@ -103,19 +102,24 @@ const navigationStyle = (
           </TouchableOpacity>
         );
       }
-
-      let options: NativeStackNavigationOptions = {
+      const baseHeaderStyle = {
         headerShadowVisible: false,
         headerTitleStyle: {
-          fontWeight: '600',
+          fontWeight: '600' as const,
           color: theme.colors.foregroundColor,
         },
-        headerBackVisible,
-        headerBackTitle: undefined,
-        headerBackButtonDisplayMode: 'minimal',
         headerTintColor: theme.colors.foregroundColor,
+        headerBackButtonDisplayMode: 'minimal',
+      };
+      const isLeftCloseButtonAndroid = closeButton === CloseButtonPosition.Left && Platform.OS === 'android';
+
+      const leftCloseButtonStyle = isLeftCloseButtonAndroid ? { headerBackImageSource: theme.closeImage } : { headerLeft };
+
+      let options: NativeStackNavigationOptions = {
+        ...baseHeaderStyle,
+        ...leftCloseButtonStyle,
+        headerBackButtonDisplayMode: 'minimal',
         headerRight,
-        headerLeft,
         ...opts,
       };
 

navigation/ReceiveDetailsStack.tsx

@@ -1,7 +1,6 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-
-import navigationStyle from '../components/navigationStyle';
+import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
 import { ReceiveDetailsComponent } from './LazyLoadReceiveDetailsStack';
@@ -16,7 +15,11 @@ const ReceiveDetailsStackRoot = () => {
       <Stack.Screen
         name="ReceiveDetails"
         component={ReceiveDetailsComponent}
-        options={navigationStyle({ headerBackVisible: false, title: loc.receive.header, statusBarStyle: 'light' })(theme)}
+        options={navigationStyle({
+          closeButtonPosition: CloseButtonPosition.Left,
+          title: loc.receive.header,
+          statusBarStyle: 'light',
+        })(theme)}
       />
     </Stack.Navigator>
   );

screen/receive/details.js

@@ -1,17 +1,6 @@
 import { useFocusEffect, useRoute } from '@react-navigation/native';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  BackHandler,
-  Image,
-  InteractionManager,
-  LayoutAnimation,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { BackHandler, InteractionManager, LayoutAnimation, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
 import Share from 'react-native-share';
 
 import * as BlueElectrum from '../../blue_modules/BlueElectrum';
@@ -92,7 +81,7 @@ const ReceiveDetails = () => {
   const [currentTab, setCurrentTab] = useState(segmentControlValues[0]);
   const { goBack, setParams, setOptions } = useExtendedNavigation();
   const bottomModalRef = useRef(null);
-  const { colors, closeImage } = useTheme();
+  const { colors } = useTheme();
   const [intervalMs, setIntervalMs] = useState(5000);
   const [eta, setEta] = useState('');
   const [initialConfirmed, setInitialConfirmed] = useState(0);
@@ -212,32 +201,12 @@ const ReceiveDetails = () => {
     [onPressMenuItem, toolTipActions],
   );
 
-  const handleClose = useCallback(() => {
-    goBack();
-  }, [goBack]);
-
-  const HeaderLeft = useMemo(
-    () => (
-      <TouchableOpacity
-        accessibilityRole="button"
-        accessibilityLabel={loc._.close}
-        style={styles.button}
-        onPress={handleClose}
-        testID="NavigationCloseButton"
-      >
-        <Image source={closeImage} />
-      </TouchableOpacity>
-    ),
-    [closeImage, handleClose],
-  );
-
   useEffect(() => {
     wallet?.allowBIP47() &&
       setOptions({
-        headerLeft: () => HeaderLeft,
         headerRight: () => HeaderRight,
       });
-  }, [HeaderLeft, HeaderRight, colors.foregroundColor, setOptions, wallet]);
+  }, [HeaderRight, colors.foregroundColor, setOptions, wallet]);
 
   // re-fetching address balance periodically
   useEffect(() => {