diff --git a/example/src/pages/FooterWithButton.tsx b/example/src/pages/FooterWithButton.tsx index 4c500489..0686ee53 100644 --- a/example/src/pages/FooterWithButton.tsx +++ b/example/src/pages/FooterWithButton.tsx @@ -21,6 +21,7 @@ export const FooterWithButton = () => (

Footer with button

{ ); return ( - + {renderLeftButton()} {renderMidButton()} {renderRightButton()} diff --git a/src/components/layout/FooterWithButtons.tsx b/src/components/layout/FooterWithButtons.tsx index 4a8eb62e..7c587931 100644 --- a/src/components/layout/FooterWithButtons.tsx +++ b/src/components/layout/FooterWithButtons.tsx @@ -4,6 +4,10 @@ import { StyleSheet, View } from "react-native"; import { IOStyles } from "../../core"; import { BlockButtons, BlockButtonsProps } from "./BlockButtons"; +type Props = BlockButtonsProps & { + sticky?: boolean; +}; + // TODO: Refactor with an unique component like `FooterTopShadow` after bonus vacanze const styles = StyleSheet.create({ container: { @@ -11,7 +15,9 @@ const styles = StyleSheet.create({ width: "100%", // This Magic number is an heritage of the app code-base, this component should be removed in favor of `GradientBottomAction` marginTop: -50, - paddingTop: 50, + paddingTop: 50 + }, + sticky: { position: "absolute", bottom: 0 } @@ -21,15 +27,15 @@ const styles = StyleSheet.create({ * Implements a component that show buttons as sticky footer * It can include 1, 2 or 3 buttons. If they are 2, they can have the inlineHalf or the inlineOneThird style */ -export const FooterWithButtons = (props: BlockButtonsProps) => ( +export const FooterWithButtons = ({ sticky = false, ...rest }: Props) => ( - + );