ScreenFooterThe ScreenFooter component provides a flexible footer that stays at the bottom of the screen with support for various layouts, backgrounds, and keyboard behaviors. It's ideal for forms, checkout flows, and any screen requiring persistent bottom actions.
- Overview
- Dev
Use ExamplesThe ScreenFooter can be used in various scenarios depending on the content and action hierarchy. Each layout type serves different use cases and provides different visual emphasis.
Horizontal Layouts
Horizontal layouts are best when screen content is abundant and vertical space is limited. They keep actions compact while maintaining good reachability. Use the layout prop set to ScreenFooterLayouts.HORIZONTAL.
| Layout Type | Use Case | Example |
|---|---|---|
| Horizontal - Spread Best for two equally important actions positioned at opposite ends. Common in navigation flows or when presenting contrasting choices. |  | |
| Horizontal - Stacked Center Ideal for primary and secondary actions of similar importance that should be grouped together in the center. |  | |
| Horizontal - With Content Perfect for checkout or summary screens where you need to display information alongside actions. The footer can accommodate text, prices, or other content elements. |  |
Vertical Layouts
Vertical layouts provide better action prominence and are recommended when a single primary action needs emphasis, or when content can be obscured. Use itemsFit prop with ItemsFit.STRETCH for full-width buttons or ItemsFit.FIT for content-sized buttons.
| Layout Type | Use Case | Example |
|---|---|---|
| Vertical - Fit Buttons are sized based on their content. Best for clear action hierarchy with a prominent primary button and a subtle secondary link button. |  | |
| Vertical - Stretched Full-width buttons provide maximum tap area and visual prominence. Recommended for forms and high-priority actions where accessibility is crucial. |  |
Background Types
Choose the background type based on your content density and visual hierarchy needs. Set using the backgroundType prop.
| Background Type | Visual | When to Use |
|---|---|---|
| Solid Provides clear separation with a solid background and optional shadow. Best for content-heavy screens where the footer needs to stand out. |  | |
| Fading Creates a subtle gradient overlay that doesn't obscure content completely. Ideal for minimal designs or when content should remain partially visible. |  | |
| Transparent No background overlay. Use when the screen has minimal content or a solid background color, and separation isn't needed. |  |
Keyboard Behavior
Control how the footer responds to the keyboard using the keyboardBehavior prop. Choose KeyboardBehavior.STICKY to keep it at the bottom, or KeyboardBehavior.HOISTED to move it above the keyboard.
| Behavior | Description | Example |
|---|---|---|
| Sticky The footer remains at the bottom of the screen even when the keyboard is open. Best for short forms or when the footer actions don't relate to keyboard input. |  | |
| Hoisted The footer moves up with the keyboard, staying above it. Recommended for forms where users need immediate access to submit actions while typing. |  |
UsageCode Example
<View flex bg-$backgroundDefault>
<ScrollView>
{/* Screen content */}
</ScrollView>
<ScreenFooter>
<Button label="Primary Action" />
<Button label="Secondary Action" link />
</ScreenFooter>
</View>
APIThis is the list of additional props for the component