screenFooter component

[yotam-wix]

Description

Added ScreenFooter, a new component for sticky bottom items (3 max) with support for:

• Horizontal & vertical layouts with flexible alignment/distribution.
• Solid, fading, and transparent backgrounds.
• Keyboard handling (sticky or hoisted) and visibility animations.

Added ScreenFooterScreen demo to showcase all configurations.
Added hook 'useScrollToHide' to allow functionality of 'hideOnScroll'.

Changelog

screenFooter - added new component.
screenFooterScreen - added demo screen for new component.
useScrollToHide - added new hook for controlling visibility during scroll.

Additional info

Ticket 4330

[lidord-wix]

Looks good!
I added some comments, it may look a lot but it's because the PR is a bit big..
Some more general comments:

1. Some of the comments I wrote general and not specific only to the place I added them, so please re-review the whole PR when fixing.
2. Please run yarn tsc to verify the typescript is ok
3. Please add api.json file for the docs.
4. In general theres no need to pass default values, you get them by default :)
5. Please add render tests, you can see references in other components.
6. When adding text + image + button, on a stretch case in the example screen, the result is not so good, see the image:

[github-actions]

✅ PR Description Validation Passed

All required sections are properly filled out:

• ✅ Description
• ✅ Changelog
• ✅ Additional info

Your PR is good for review! 🚀

---

This validation ensures all sections from the PR template are properly filled.

[yotam-wix]

After making some mess with git history due to the new pre-push check that denied my branch name, I've managed to do it properly.

the new commits start from 'apply small fixes due to PR comments, move types to different file'.

I've left replies to some comments due to things I wasn't sure about.

Here's what was added in the recent commits here -

• small changes due to PR comments
• moved keyboard hoisting from useKeyboardHeight hook with to KeyboardAccessibilityView for better visuals as you suggested.
• added 5 sizes of gradient into assets folder
• added a template of docs api.json file, still need to finish it by uploading examples to the media platform
• added render tests
• moved types into a separate file
• found multiple bugs on android that needed addressing, so hopefully fixed them here (sticky still pushed footer on top of keyboard, hoisted + solid caused the background to render on top of footer etc.)

this was quite a lot and I still miss some work on the docs part, but let me know what you think overall.

[lidord-wix]

Looks really good overall, good job 🙂
I replied and added some small comments, please also see bullet 6 in my last review comment (still looks the same)

[yotam-wix]

I've replied to the comments left. Let me know what you think.

By the way, have you gone over the changes made in the 'android bug fixes' commit? I've done some code re-writing there due to specific Android-only bugs, just wanna make sure it didn't go over you and that the code there is fine.

And regarding bullet 6 - I think I did fix it, will attach here the current look of the stretch + icon, text Footer, where as the previous worse version can be seen at this page too.

It now centeres each item properly, it does make sense that the icon won't be completely centered since the button and text are bigger and wider, pretty sure that's more similar to what Alexey has showed in the desired behavior.

[yotam-wix]

adding a minWidth prop here to the stretched layout improved the correct division of the container between the items, seems like the button having a certain minWidth caused it to catch more unwanted space