feat(Android, Tabs): pass material theme using context wrapper & update the layout flow #3015
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
2 tasks
kkafar
changed the title
kkafar
approved these changes
Jul 17, 2025
| <?xml version="1.0" encoding="utf-8"?> | ||
| <resources> | ||
| <!-- Base application theme. --> | ||
| <style name="custom" parent="Theme.Material3.DayNight.NoActionBar"> |
There was a problem hiding this comment.
Suggested change
| <style name="custom" parent="Theme.Material3.DayNight.NoActionBar"> | |
| <style name="material_base" parent="Theme.Material3.DayNight.NoActionBar"> |
or something more informative.
There was a problem hiding this comment.
I removed that in #3026 anyway
|
Also if there is a ticket for this on a board, let's link it. |
maciekstosio
deleted the
@maciekstosio/Setup-material-3-theme-for-bottom-navigaiton
branch
maciekstosio
added a commit
that referenced
this pull request
Jul 21, 2025
) ## Description Resolves: software-mansion/react-native-screens-labs#225 This PR adjust our default (fallback) values with material values, based on https://m3.material.io/components/navigation-bar/specs and package resources. In #3015 I introduced custom theme so we can pass it to context wrapper - because I wanted the theme to inherit from `Theme_Material3_DayNight_NoActionBar`. Now I realized that I can just pass `Theme_Material3_DayNight_NoActionBar` 😅, so I removed unnecessary custom theme. ## Screenshots / GIFs <img width="426" height="917" alt="image" src="https://github.com/user-attachments/assets/1aa01712-0ce8-41bf-aa69-4a0f73636cc6" /> ## Test code and steps to reproduce See `TestBottomTabs/index.tsx` ## Checklist - [ ] Included code example that can be used to test this change - [ ] Ensured that CI passes
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.
To have styles and all features described in https://github.com/material-components/material-components-android/blob/master/docs/components/BottomNavigation.md, we should change the theme of the app to inherit from material design theme (the is one of getting started steps https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#7-material3-theme-inheritance). We don't want force users to do that in each project, thus we wrap
reactContextusingContextWrapperThemedand pass a custom theme there.Additionally, after adding the items, layout was broken, so I force layout using the pattern from https://github.com/software-mansion/react-native-screens/pull/2332/files.
Screenshots / GIFs
Test code and steps to reproduce
See
TestBottomTabs/index.tsxChecklist