From 343a7da9faea5f6be43842793c160a4933fce723 Mon Sep 17 00:00:00 2001
From: Bao Nguyen <waycaosi1994@gmail.com>
Date: Sun, 23 Aug 2026 11:09:16 +0700
Subject: [PATCH] fix(appbar): make back icon respect the icon from Provider
 settings

---
 src/components/Appbar/AppbarBackIcon.tsx      |  7 +-
 .../__tests__/Appbar/Appbar.test.tsx          | 65 ++++++++++++++++++-
 2 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/src/components/Appbar/AppbarBackIcon.tsx b/src/components/Appbar/AppbarBackIcon.tsx
index ff827b3f5f..3383909603 100644
--- a/src/components/Appbar/AppbarBackIcon.tsx
+++ b/src/components/Appbar/AppbarBackIcon.tsx
@@ -2,7 +2,7 @@ import { Image, Platform, StyleSheet, View } from 'react-native';
 import type { ColorValue } from 'react-native';
 
 import { useLocale } from '../../core/locale';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
+import Icon from '../Icon';
 
 const AppbarBackIcon = ({
   size,
@@ -34,11 +34,10 @@ const AppbarBackIcon = ({
       />
     </View>
   ) : (
-    <MaterialCommunityIcon
-      name="arrow-left"
+    <Icon
+      source={{ source: 'arrow-left', direction }}
       color={color}
       size={size}
-      direction={direction}
     />
   );
 };
diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
index 27cd573f9d..481fbdec13 100644
--- a/src/components/__tests__/Appbar/Appbar.test.tsx
+++ b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -1,9 +1,10 @@
-import { Animated } from 'react-native';
+import { Animated, Platform, Text as RNText } from 'react-native';
 
-import { describe, expect, it, jest } from '@jest/globals';
-import { act } from '@testing-library/react-native';
+import { afterEach, describe, expect, it, jest } from '@jest/globals';
+import { act, render as rtlRender } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
+import PaperProvider from '../../../core/PaperProvider';
 import { getTheme } from '../../../core/theming';
 import { render, screen } from '../../../test-utils';
 import { tokens } from '../../../theme/tokens';
@@ -14,6 +15,7 @@ import {
   modeTextVariant,
   renderAppbarContent as utilRenderAppbarContent,
 } from '../../Appbar/utils';
+import type { IconProps } from '../../MaterialCommunityIcon';
 import Menu from '../../Menu/Menu';
 import Searchbar from '../../Searchbar';
 import Text from '../../Typography/Text';
@@ -453,3 +455,60 @@ describe('animated value changes correctly', () => {
     });
   });
 });
+
+describe('Appbar.BackAction icon', () => {
+  const originalPlatform = Platform.OS;
+
+  afterEach(() => {
+    Platform.OS = originalPlatform;
+  });
+
+  const CustomIcon = ({ name, size, direction, testID }: IconProps) => (
+    <RNText
+      testID={testID}
+      style={{
+        fontSize: size,
+        transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
+      }}
+    >
+      {`custom-${name}`}
+    </RNText>
+  );
+
+  const renderBackAction = (direction?: 'ltr' | 'rtl') =>
+    rtlRender(
+      <PaperProvider settings={{ icon: CustomIcon }} direction={direction}>
+        <Appbar.BackAction onPress={() => {}} testID="back-action" />
+      </PaperProvider>
+    );
+
+  it('renders the icon provided through PaperProvider settings', async () => {
+    Platform.OS = 'android';
+
+    await renderBackAction();
+
+    expect(
+      screen.getByText('custom-arrow-left', { includeHiddenElements: true })
+    ).toBeOnTheScreen();
+  });
+
+  it('keeps the icon mirrored in RTL', async () => {
+    Platform.OS = 'android';
+
+    await renderBackAction('rtl');
+
+    expect(
+      screen.getByText('custom-arrow-left', { includeHiddenElements: true })
+    ).toHaveStyle({ transform: [{ scaleX: -1 }] });
+  });
+
+  it('keeps the icon unmirrored in LTR', async () => {
+    Platform.OS = 'android';
+
+    await renderBackAction('ltr');
+
+    expect(
+      screen.getByText('custom-arrow-left', { includeHiddenElements: true })
+    ).toHaveStyle({ transform: [{ scaleX: 1 }] });
+  });
+});