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.
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added support for barTintColor in android ios #55
Added support for barTintColor in android ios #55
Changes from 2 commits
c812a97
5ddd00b
be576fd
da45f39
21dfd79
61c593a
ecca1b0
36b95c2
File filter
Filter by extension
Conversations
Jump to
There are no files selected for viewing
Check warning on line 107 in example/src/App.tsx
GitHub Actions / lint
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should use
.onChange(of: props.barTintColor)
to allow dynamic changing.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the suggestion!
I initially tried using .onChange(of: props.barTintColor), but it doesn't seem to update the barTintColor as expected in my case. The color only reflects properly when using .onAppear.
To make sure the
barTintColor
reflects both on view load and during dynamic changes, I combined both .onAppear and .onChange(of:). This approach ensures that the UITabBar appearance is set correctly when the view first appears and updates dynamically when barTintColor changes.Here is what I am going to change:
Is this okay? @okwasniewski
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If thats the case you can do a custom extension on the view, lets keep simillar logic contained:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Doesn't it work for newer OS versions? I didn't see deprecation in the docs.
This function should ideally only call
UITabBar.appearance().barTintColor
. Overriding theappearance
one more time can cause issues with scrollEdgeApperance.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried with this approach as well:
UITabBar.appearance().barTintColor
on iOS 17.2 simulator.One wierd thing happening here is when I reach end by scrolling till end barTintColor disappeared.
Attaching video for reference:
vii.mp4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@shubhamguptadream11 This looks like its related to
scrollEdgeAppearance
(which controls whether the tab bar should disappear when nothing is behind.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yess
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why are we putting a check for iOS 15? Is barTintColor deprecated?
No, barTintColor is not deprecated. The issue I raised above requires setting scrollEdgeAppearance, which is available from iOS 15. To set this, we create a UITabBarAppearance(), making the direct use of barTintColor redundant. Instead, we use backgroundColor.
Why are we not only using barTintColor to set the tab bar's color?
This is due to the need to set scrollEdgeAppearance, as mentioned above.
Why do we check for nil for barTintColor?
We check for nil to ensure that barTintColor is applied only when the user passes it from the React Native side. This way, scrollEdgeAppearance is overridden only when barTintColor is being applied.
Let me know if you have any other suggestion.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh okay, now I get what you mean.
In this case we need to have one function which updates everything related to apperance.
Then we can combine it together with onChange:
This should also fix current bug with scrollEdgeAppearance because its not updated
onAppear
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you rebase on top of main as I've merged your recent PR, we need to also include it here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@okwasniewski
I refactored the code to handle the
onAppear
andonChange
logic for all TabView props in one place, simplifying the update logic. I’ve tested the changes across all three props—translucent, scrollEdgeAppearance, and barTintColor—with all their possible values to ensure everything is working as expected.