From 56b3cc3dc2d947c810a8759d0cbcc716f3a17e9f Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Thu, 31 Jul 2025 05:59:25 -0700
Subject: [PATCH] Android: Fixes #12782: Fix save button is invisible in
 release builds (#12826)

---
 .../components/ScreenHeader/index.tsx         | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/app-mobile/components/ScreenHeader/index.tsx b/packages/app-mobile/components/ScreenHeader/index.tsx
index ee651f469c..8746790848 100644
--- a/packages/app-mobile/components/ScreenHeader/index.tsx
+++ b/packages/app-mobile/components/ScreenHeader/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PureComponent, ReactElement } from 'react';
 import { connect } from 'react-redux';
-import { View, Text, StyleSheet, TouchableOpacity, Image, ViewStyle, Platform } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ViewStyle, Platform } from 'react-native';
 const Icon = require('react-native-vector-icons/Ionicons').default;
 import BackButtonService from '../../services/BackButtonService';
 import NavService from '@joplin/lib/services/NavService';
@@ -129,7 +129,10 @@ class ScreenHeaderComponent extends PureComponent<ScreenHeaderProps, ScreenHeade
 				flex: 0,
 				flexDirection: 'row',
 				alignItems: 'center',
-				padding: 10,
+				justifyContent: 'center',
+				minWidth: 40,
+				minHeight: 40,
+
 				borderWidth: 1,
 				borderColor: theme.colorBright2,
 				borderRadius: 4,
@@ -147,8 +150,9 @@ class ScreenHeaderComponent extends PureComponent<ScreenHeaderProps, ScreenHeade
 				height: 18,
 			},
 			saveButtonIcon: {
-				width: 18,
-				height: 18,
+				...theme.icon,
+				fontSize: 25,
+				color: theme.colorBright2,
 			},
 			contextMenuTrigger: {
 				fontSize: 30,
@@ -297,18 +301,18 @@ class ScreenHeaderComponent extends PureComponent<ScreenHeaderProps, ScreenHeade
 		) {
 			if (!show) return null;
 
-			const icon = disabled ? <Icon name="checkmark" style={styles.savedButtonIcon} /> : <Image style={styles.saveButtonIcon} source={require('./SaveIcon.png')} />;
-
 			return (
-				<TouchableOpacity
+				<IconButton
 					onPress={onPress}
-					disabled={disabled}
-					style={{ padding: 0 }}
 
-					accessibilityLabel={_('Save changes')}
-					accessibilityRole="button">
-					<View style={disabled ? styles.saveButtonDisabled : styles.saveButton}>{icon}</View>
-				</TouchableOpacity>
+					themeId={themeId}
+					description={_('Save changes')}
+					disabled={disabled}
+					contentWrapperStyle={disabled ? styles.saveButtonDisabled : styles.saveButton}
+					iconStyle={disabled ? styles.savedButtonIcon : styles.saveButtonIcon}
+
+					iconName={disabled ? 'ionicon checkmark' : 'material content-save'}
+				/>
 			);
 		}