screenFooter component #3905

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/components/screenFooter/gradient.png

lidord-wix · 2026-01-06T09:56:12Z

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

+    /**
+     * The background style of the footer
+     */
+    backgroundType?: ScreenFooterBackgrounds | `${ScreenFooterBackgrounds}`;


Nice! the type is well defined 😄
Did you understand why we're doing it?

I've seen it done in other places in ui-lib, I guess it's for letting devs write the literal string or to use an enum which supports changes in the enums value?

exactly, it also supports auto-complete when using it, which is really nice as a user

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

lidord-wix · 2026-01-08T14:04:46Z

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

+  ItemsFit,
+  Switch,
+  TextField,
+  Slider,


The Slider doesn't work so good, can you try the slider from Incubator?

it seems much more laggy tbh, do we still prefer it?

Works better for me with Slider from incubator 🙈

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

lidord-wix · 2026-01-08T15:21:50Z

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

+        ? {width: itemWidth, flexShrink: 1, overflow: 'hidden' as const}
+        : {width: itemWidth, maxWidth: '100%' as const};


Please avoid using "as ..." for resolving typing issues, it kinda hack

what's the alternative for it? couldn't find one but seemed to be used throughout the repo.
perhaps using 'ViewStyle'?

Yes, try to use ViewStyle
most of the time it just shows that we don't use the types properly

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)

lidord-wix · 2026-01-19T15:09:37Z

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

Let's rename, maybe bottomGradient or something?

lidord-wix · 2026-01-19T15:10:36Z

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

+    /**
+     * The background style of the footer
+     */
+    backgroundType?: ScreenFooterBackgrounds | `${ScreenFooterBackgrounds}`;


exactly, it also supports auto-complete when using it, which is really nice as a user

lidord-wix · 2026-01-19T15:11:39Z

packages/react-native-ui-lib/src/components/screenFooter/gradient.png

I see we still have this one

lidord-wix · 2026-01-19T15:16:31Z

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

+    if (useSafeArea && Constants.isIphoneX) {
+      style.push({paddingBottom: safeAreaBottom});
+    }


I thinks it's better to retry
in general we don't support landscape in Wix mobile apps (yet), but since it's also for the community, let's take it into consideration :)

lidord-wix · 2026-01-19T15:18:07Z

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

+      {alignItems, justifyContent}
+    ];
+
+    if (useSafeArea && Constants.isIphoneX) {


but only iPhoneX needs this padding?

lidord-wix · 2026-01-19T15:33:50Z

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

+    }
+  };
+
+  const renderFooterItems = useMemo(() => {


No need to memo if it's not passed as a prop value :)

lidord-wix · 2026-01-19T15:35:48Z

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

+        ? {width: itemWidth, flexShrink: 1, overflow: 'hidden' as const}
+        : {width: itemWidth, maxWidth: '100%' as const};


Yes, try to use ViewStyle
most of the time it just shows that we don't use the types properly

lidord-wix · 2026-01-19T15:39:51Z

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

+  ItemsFit,
+  Switch,
+  TextField,
+  Slider,


Works better for me with Slider from incubator 🙈

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

lidord-wix · 2026-01-19T15:42:34Z

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

+  }, [visible, height, animationDuration]);
+
+  // Combine keyboard hoisting + visibility into a single animated style
+  const animatedStyle = useAnimatedStyle(() => {


works much better with the keyboard accessory view

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

		? {width: itemWidth, flexShrink: 1, overflow: 'hidden' as const}
		: {width: itemWidth, maxWidth: '100%' as const};

screenFooter component #3905

Are you sure you want to change the base?

screenFooter component #3905

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jan 13, 2026

✅ 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yotam-wix commented Jan 5, 2026 •

edited by lidord-wix

Loading

yotam-wix commented Jan 13, 2026 •

edited

Loading