screenFooter component by yotam-wix · Pull Request #3905 · wix/react-native-ui-lib

yotam-wix · 2026-01-05T09:15:43Z

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:

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.
Please run yarn tsc to verify the typescript is ok
Please add api.json file for the docs.
In general theres no need to pass default values, you get them by default :)
Please add render tests, you can see references in other components.
When adding text + image + button, on a stretch case in the example screen, the result is not so good, see the image:

packages/react-native-ui-lib/src/assets/internal/images/bottomGradient.png

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

… basic render function, basic styling

…port to screen

added hideOnScroll to footerScreen.

added safeArea support.

…als, added shadow and dividers support

…er centrization of img component

github-actions · 2026-01-13T15:26:38Z

✅ 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 · 2026-01-13T15:37:33Z

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)

packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay.png

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

packages/react-native-ui-lib/src/assets/internal/images/bottomGradient.png

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

…ages

yotam-wix · 2026-02-03T10:15:54Z

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

-      const flexStyle = itemsFit === ItemsFit.STRETCH ? {flex: 1, alignItems: 'center'} : {flexShrink: 1};
+      const flexStyle = itemsFit === ItemsFit.STRETCH 
+        ? {flex: 1, minWidth: 0, alignItems: 'center'} 
+        : {flexShrink: 1};


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

…entering on 'stretch' and 'fixed'

lidord-wix

Looks good! 🎉 👏🏽
Approved with a small comment, feel free to merge once fixed :)

lidord-wix · 2026-02-08T08:24:55Z

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

+  stretchItemWrapper: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'center'
+  },


you can use modifiers instead this style, also I think you don't need the "row"

it's actually necessary - the stretch happens due to the default alignItems: 'stretch', and to not ruin this stretch I needed to kind of cheat it by combining row+justifyContent: center, which caused effect of alignItems: center without overriding the alignItems: stretch.

let me know if I'm missing something though.

Oh, ok 👍🏽

but still I think you can move to modifiers :)

yotam-wix · 2026-02-08T15:56:03Z

@lidord-wix
I think I managed to fix the issue we had by using react-native-safe-area-context as suggested.
I also tried to sort out the issue of the padding remaining when hoisting is activated and a keyboard is open by using UseKeyboardHeight(). let me know if it looks ok.

also, my build fails for some reason due to it not finding the react-native-safe-area-context module?

lidord-wix

Please see the comments
regarding the build - I see you wasn't on the latest master, I pulled, please re check 🙏🏽

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

yotam-wix requested a review from lidord-wix January 5, 2026 09:15

lidord-wix self-assigned this Jan 6, 2026

lidord-wix reviewed Jan 8, 2026

View reviewed changes

yotam-wix added 18 commits January 13, 2026 16:48

Implemented component first steps - enums, props, basic logic layout,…

ecac0a5

… basic render function, basic styling

re-construct foundation of component

e76bba7

background prop handling

d4f8b92

added vertical layout alignment support - fix width option

e5511bb

added footerScreen, fixed alignment bugs

a8df60f

horizontal alignment sorted, improved screen functionality

c4f2eb5

added support of sticky vs. hoisted keyboard. fixed overflow issues

01c9a52

added items fit support to both component and screen, added image sup…

f4352ea

…port to screen

Added support of hideOnScroll with new hook - useScrollToHide.

a1baac4

added hideOnScroll to footerScreen.

added animation support, for keyboard and entrance.

4af7b9f

added safeArea support.

switched animations from react animated to reanimated for better visu…

14def43

…als, added shadow and dividers support

types bug fix

87848e5

apply small fixes due to PR comments, move types to different file

ac69b5d

add docs api json file

a2c5e70

add basic render tests

faf7374

multiple android bug fixes + keyboardAccessibilityView support + bett…

461fb78

…er centrization of img component

added support of 5 sizes to gradient image used in fading background

9739b2a

generated an improve docs, still need to update links to wixmp files

7547d9d

yotam-wix closed this Jan 13, 2026

yotam-wix deleted the screenFooter-in-dev branch January 13, 2026 14:59

yotam-wix restored the screenFooter-in-dev branch January 13, 2026 15:04

yotam-wix reopened this Jan 13, 2026

yotam-wix force-pushed the screenFooter-in-dev branch from b2a729d to 7547d9d Compare January 13, 2026 15:26

yotam-wix requested a review from lidord-wix January 13, 2026 15:37

lidord-wix reviewed Jan 19, 2026

View reviewed changes

yotam-wix requested a review from lidord-wix January 27, 2026 15:43

Merge branch 'master' into screenFooter-in-dev

5fa31a1

lidord-wix assigned yotam-wix and unassigned lidord-wix Feb 2, 2026

yotam-wix added 3 commits February 3, 2026 10:47

fix: rename gradient assets to bottomGradient and move to internal im…

b6c0f63

…ages

removed 'as' keyword, repalced with ViewStyle

7816257

added wrapper view for safeArea, improved flex layout when stretched

635fdb0

yotam-wix commented Feb 3, 2026

View reviewed changes

yotam-wix assigned lidord-wix and unassigned yotam-wix Feb 3, 2026

removed cloning of children on horizontal stretch, fixed horizontal c…

bb87bc0

…entering on 'stretch' and 'fixed'

lidord-wix previously approved these changes Feb 8, 2026

View reviewed changes

lidord-wix assigned yotam-wix and unassigned lidord-wix Feb 8, 2026

fixed safeArea handling, moved stretch styling to modifiers

e9336cb

yotam-wix dismissed lidord-wix’s stale review via e9336cb February 8, 2026 15:46

yotam-wix requested a review from lidord-wix February 8, 2026 15:56

yotam-wix assigned lidord-wix and unassigned yotam-wix Feb 8, 2026

Merge branch 'master' into screenFooter-in-dev

7f65e8e

lidord-wix reviewed Feb 9, 2026

View reviewed changes

packages/react-native-ui-lib/src/components/screenFooter/index.tsx Outdated Show resolved Hide resolved

packages/react-native-ui-lib/src/components/screenFooter/index.tsx Outdated Show resolved Hide resolved

yotam-wix added 2 commits February 10, 2026 10:44

removed safeArea prop, moved safe-area-context to optionalDependencies.

3072bf4

Merge branch 'master' into screenFooter-in-dev

7e17228

yotam-wix requested a review from lidord-wix February 10, 2026 09:05

lidord-wix approved these changes Feb 11, 2026

View reviewed changes

lidord-wix assigned yotam-wix and unassigned lidord-wix Feb 11, 2026

yotam-wix merged commit fae1849 into master Feb 11, 2026
3 checks passed

yotam-wix deleted the screenFooter-in-dev branch February 11, 2026 12:00

Conversation

yotam-wix commented Jan 5, 2026 • edited by lidord-wix Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Additional info

Uh oh!

lidord-wix left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR Description Validation Passed

Uh oh!

yotam-wix commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lidord-wix left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yotam-wix Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

lidord-wix left a comment

Choose a reason for hiding this comment

Uh oh!

lidord-wix Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

yotam-wix Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lidord-wix Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

lidord-wix Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

yotam-wix commented Feb 8, 2026

Uh oh!

lidord-wix left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

yotam-wix commented Jan 5, 2026 •

edited by lidord-wix

Loading

github-actions bot commented Jan 13, 2026 •

edited

Loading

yotam-wix commented Jan 13, 2026 •

edited

Loading

yotam-wix Feb 8, 2026 •

edited

Loading