fix: HeaderConfig impacts layout of Screen's contents
#2395
Conversation
This file contains 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
alduzy
force-pushed
the
@alduzy/header-config-layout-fix
branch
3 times, most recently
from
98e25f8 to
75133a8
Compare
Co-authored-by: Kacper Kafara <[email protected]>
alduzy
force-pushed
the
@alduzy/header-config-layout-fix
branch
from
75133a8 to
e58816f
Compare
alduzy
force-pushed
the
@alduzy/header-config-layout-fix
branch
from
e75c4f0 to
dbaa1eb
Compare
kkafar
changed the title
HeaderConfig impacts layout of Screen's contents
kkafar
approved these changes
Oct 10, 2024
2 tasks
alduzy
added a commit
that referenced
this pull request
Oct 28, 2024
## Description This PR fixes title being invisible when searchbar is enabled. In #2395 I added `alignItems: 'center'` style to the header config component. It aimed to fix iOS subviews floating mid-screen when a larger subview is provided: | (iOS) without `alignItems: 'center'` | (iOS) with `alignItems: 'center'`| | --- | --- | |  |  | This change unintentionally introduced a regression on Android. When searchabar is enabled, the `ScreenStackHeaderConfig` components height is equal 0 and it does not 'stretch' to accomodate the native title. Simple solution is to center align the subviews depending on the Platform. | (Android) with `alignItems: 'center'` | (Android) without `alignItems: 'center'` | | --- | --- | |  |  | ## Changes - updated `Test2395.tsx` repro - center aligning items conditionally based on Platform ## Test code and steps to reproduce - use `Test2395.tsx` repro ## Checklist - [x] Included code example that can be used to test this change - [x] 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.
Description
This PR fixes headerConfig's incorrect layout with custom subviews after recent changes in #2325.
Note
@kkafar:
Previously, before #2325, all children of the headerConfig component have been positioned absolutely, thus the headerConfig was always of height 0, not impacting layout of other components. After #2325, headerConfig's children are positioned using flexbox. This implies that it has no longer height of 0, thus it impacts the layout of other other elements, in particular
ScreenContentWrapper, which is offset by the height of the highest header config subview.The initial idea to solve this was to set
height: 0; overflow: visible, however, for some yet unknown reason the subviews become invisible with such styles set of headerConfig. Note that if you set theheight: 1it works as expected.Due to above hindrance we decided to position the headerConfig approximately at the position of native header, by setting
top: -100%. To prevent the headerConfig from blocking gestures we setpointerEvents: 'box-none'.In the end I want to note, that it would be best if we came out with solution that excludes headerConfig from layout as it was before #2325.
Changes
Test2395.tsxreproScreenshots / GIFs
Before
After
Test code and steps to reproduce
Test2395.tsxreproChecklist