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.
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