ScreenFooter - fix overflow in Fit mode, fix stretching issues#3954
ScreenFooter - fix overflow in Fit mode, fix stretching issues#3954
Conversation
✅ PR Description Validation PassedAll required sections are properly filled out:
Your PR is good for review! 🚀 This validation ensures all sections from the PR template are properly filled. |
| <View key={index} style={fixedStyle}> | ||
| {child} | ||
| {isHorizontal && React.isValidElement(child) | ||
| ? React.cloneElement(child as React.ReactElement<any>, {center: true}) |
There was a problem hiding this comment.
We previously talked about it that we don't want to clone the user's element and add it some props
It's reasonable that their component won't even have the center prop..
There was a problem hiding this comment.
yeah I know. But we do need to handle the combination of 'alignItems: stretch' and centerization, which I couldn't find a proper solution for without cloning the children and injecting the centering to them somehow.
All previous solutions were messing up one of the two, and I can't find an alternative to cloneElement so far :/
Also, the user can always override the 'center' prop for one of his items manually which I felt made sense for a 'generic' component like the footer.
There was a problem hiding this comment.
Generally this bug is only related to components that do not already handle centering their content - such as Image for example. So technically we can move the responsibility to the users - by letting them know they need to center manually the items they're passing in that case.
…d Fixed modes Replace row+centerH wrappers with column-direction wrappers where default alignItems: 'stretch' handles button stretching. Restore flexShrink wrapping for horizontal FIT mode lost during prior refactor. Users control centering via the 'center' modifier on their items. Made-with: Cursor
yotam-wix
force-pushed
the
fix/screenFooter-stretch-issues
branch
from
6c887b5 to
4e852d2
Compare
|
@lidord-wix I re did this PR with a fix that assumes the user passes a centered item, now it's much simpler. let me know if this one's ok in your mind |
2 participants
Description
Fixed layout bugs in horizontal STRETCH, FIXED, and FIT modes caused by the previous row + justifyContent: center approach for centering items. That approach centered items but prevented buttons from stretching,
Replaced with column-direction wrappers (where default alignItems: 'stretch' handles button stretching) and cloneElement with the center modifier to inject centering into children's internal layout. This is necessary because alignItems: 'stretch' and alignItems: 'center' can't both be applied to the same container - the wrapper handles stretch, and the clone handles centering.
Restored flexShrink wrapping for horizontal FIT mode, which was lost during the earlier refactor.
Changelog
ScreenFooter - overflow and stretching bug fixes.
Additional info
N/A