fix(appbar): make back icon respect the icon from Provider settings - #5064
Open
giaBaoJS wants to merge 1 commit into
Open
fix(appbar): make back icon respect the icon from Provider settings#5064giaBaoJS wants to merge 1 commit into
giaBaoJS wants to merge 1 commit into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
Iconis the only component that reads theiconentry fromSettingsContext:react-native-paper/src/components/Icon.tsx
Lines 145 to 158 in df3cdfd
A number of components import
MaterialCommunityIcondirectly instead, which bypasses that consumer. Becausesrc/core/settings.tsx#L18also usesMaterialCommunityIconas the default context value, those call sites look correct until an app actually passessettings={{ icon }}toPaperProvider— at which point the override is silently ignored.Appbar.BackActionis one of the two components named in #4760.Scope
Deliberately narrow: this PR only changes
Appbar/AppbarBackIcon.tsx.The same bypass exists at these call sites, which I left alone because they all sit under active/competing PRs and are better done separately (happy to follow up):
Chip/Chip.tsx(2)Snackbar.tsx(1)List/ListAccordion.tsx(1)DataTable/DataTablePagination.tsx(4)DataTable/DataTableTitle.tsx(1)RadioButton/RadioButtonIOS.tsx(1)Searchbar.tsx(2)Also out of scope on purpose: the
Platform.OS === 'ios'branch ofAppbarBackIconrenders the bundledback-chevron.pngasset rather than an icon-font glyph. Routing that throughsettings.iconwould replace the iOS chevron with anarrow-leftglyph for every app that does not customise icons, which is a visual change I did not want to smuggle into a bug fix. Let me know if you'd like it changed and I'll do it here or in a follow-up.Note on RTL
The object form
{ source: 'arrow-left', direction }is used rather than the bare string"arrow-left".Iconcomputesdirectionasnullfor a bare string source, which drops thescaleX: -1mirroring that the previousdirection={direction}prop provided — the back arrow is direction-sensitive, so that would have been a regression. There is a dedicated test for both RTL and LTR to keep it that way.Test plan
Added three cases to
src/components/__tests__/Appbar/Appbar.test.tsx(Platform.OSis forced toandroidbecause the jest preset defaults toios, where this branch is not reachable):PaperProvider settings={{ icon }}is renderedBefore the fix all three fail (the default
arrow-leftglyph renders instead of the custom one). With the bare-string form, the RTL case fails on its own.yarn test: 55 suites, 738 passed / 1 skipped, 169 snapshots — no snapshot churn.yarn lintandyarn typecheckclean.Fixes part of #4760.