@utilitywarehouse/hearth-react-native 0.30.4 → 0.31.0

package/src/components/Modal/Modal.docs.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { BodyText, BottomSheetModal, Box, Button, Center, Heading, Modal } from '../../';
+import { BodyText, BottomSheetModal, Box, Button, Center, Flex, Heading, Modal } from '../../';
 import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Modal.stories';
@@ -28,6 +28,7 @@ If you need a modal layout inside a React Navigation modal screen, use <Storyboo
   - [Modal with Image](#modal-with-image)
   - [Fullscreen Modal](#fullscreen-modal)
   - [Modal with Custom Content](#modal-with-custom-content)
+  - [Sticky Custom Footer](#sticky-custom-footer)
   - [Loading State](#loading-state)
   - [Without Close Button](#without-close-button)
   - [Single Action Modal](#single-action-modal)
@@ -107,9 +108,13 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `children`                    | `ReactNode`                                                        | Custom content to display in the modal body                                                                        | -              |
 | `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')           | -              |
 | `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline')      | -              |
+| `footer`                      | `ReactNode`                                                        | Custom footer content that replaces the built-in action buttons                                                    | -              |
+| `footerStyle`                 | `StyleProp<ViewStyle>`                                             | Styles applied to the footer container, useful for sticky footer shadows or custom spacing                         | -              |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                       | -              |
 | `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                            | `false`        |
 
+When `footer` is provided, the primary and secondary button props are not available. Build your footer actions directly inside the custom footer content instead.
+
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 
 ### `ModalImage` Props
@@ -371,6 +376,52 @@ const CustomContentModal = () => {
 };
 ```
 
+### Sticky Custom Footer
+
+Replace the built-in buttons with a custom sticky footer when you need custom layouts or button arrangements:
+
+<Canvas of={Stories.StickyCustomFooter} />
+
+```tsx
+const StickyCustomFooterModal = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  return (
+    <>
+      <Button onPress={() => modalRef.current?.present()}>Show Custom Footer Modal</Button>
+
+      <Modal
+        ref={modalRef}
+        heading="Update billing details"
+        description="Use a custom sticky footer when you need horizontal actions or extra decoration."
+        footer={
+          <Flex direction="row" spacing="md" pt="250">
+            <Button
+              variant="outline"
+              colorScheme="functional"
+              onPress={() => modalRef.current?.dismiss()}
+              style={{ flex: 1 }}
+            >
+              Cancel
+            </Button>
+            <Button onPress={() => modalRef.current?.dismiss()} style={{ flex: 1 }}>
+              Save changes
+            </Button>
+          </Flex>
+        }
+        footerStyle={{
+          boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+        }}
+      >
+        <Box gap="200">
+          <BodyText>Review the changes before saving.</BodyText>
+        </Box>
+      </Modal>
+    </>
+  );
+};
+```
+
 ### Loading State
 
 Show a loading spinner while processing:

package/src/components/Modal/Modal.props.ts

@@ -1,10 +1,25 @@
 import { BottomSheetProps } from '../BottomSheet';
-import { ModalCommonProps } from './Modal.shared.types';
+import {
+  ModalButtonFooterProps,
+  ModalCommonBaseProps,
+  ModalCustomFooterProps,
+} from './Modal.shared.types';
 
-interface ModalProps extends Omit<BottomSheetProps, 'children'>, ModalCommonProps {
-  fullscreen?: boolean;
-  closeOnPrimaryButtonPress?: boolean;
-  closeOnSecondaryButtonPress?: boolean;
-}
+type ModalBaseProps = Omit<BottomSheetProps, 'children'> &
+  ModalCommonBaseProps & {
+    fullscreen?: boolean;
+  };
+
+type ModalProps =
+  | (ModalBaseProps &
+      ModalButtonFooterProps & {
+        closeOnPrimaryButtonPress?: boolean;
+        closeOnSecondaryButtonPress?: boolean;
+      })
+  | (ModalBaseProps &
+      ModalCustomFooterProps & {
+        closeOnPrimaryButtonPress?: never;
+        closeOnSecondaryButtonPress?: never;
+      });
 
 export default ModalProps;

package/src/components/Modal/Modal.shared.types.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
 
-export interface ModalCommonProps {
+export interface ModalCommonBaseProps {
   loading?: boolean;
   image?: ReactNode;
   showCloseButton?: boolean;
@@ -13,12 +13,31 @@ export interface ModalCommonProps {
   description?: string;
   stickyFooter?: boolean;
   children?: ViewProps['children'];
+  onPressCloseButton?: () => void;
+  closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+}
+
+export interface ModalButtonFooterProps {
   onPressPrimaryButton?: () => void;
   primaryButtonText?: string;
   onPressSecondaryButton?: () => void;
   secondaryButtonText?: string;
-  onPressCloseButton?: () => void;
   primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
-  closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+  footer?: never;
+  footerStyle?: StyleProp<ViewStyle>;
+}
+
+export interface ModalCustomFooterProps {
+  footer: ReactNode;
+  footerStyle?: StyleProp<ViewStyle>;
+  onPressPrimaryButton?: never;
+  primaryButtonText?: never;
+  onPressSecondaryButton?: never;
+  secondaryButtonText?: never;
+  primaryButtonProps?: never;
+  secondaryButtonProps?: never;
 }
+
+export type ModalCommonProps = ModalCommonBaseProps &
+  (ModalButtonFooterProps | ModalCustomFooterProps);

package/src/components/Modal/Modal.stories.tsx

@@ -5,9 +5,10 @@ import { Modal, ModalImage } from '.';
 import pigs from '../../../docs/assets/pigs.png';
 import { ViewWrap } from '../../../docs/components';
 import { BodyText } from '../BodyText';
-import { BottomSheetModal } from '../BottomSheet';
+import { BottomSheetModal, BottomSheetModalProvider } from '../BottomSheet';
 import { Box } from '../Box';
 import { Button } from '../Button';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Stories / Modal',
@@ -164,6 +165,56 @@ export const WithCustomContent = () => {
   );
 };
 
+export const StickyCustomFooter = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  const openModal = () => {
+    modalRef.current?.present();
+  };
+
+  const closeModal = () => {
+    modalRef.current?.dismiss();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <Button onPress={openModal}>Open Modal</Button>
+
+        <Modal
+          ref={modalRef}
+          heading="Update billing details"
+          description="Review the changes below, then save or discard them using a custom sticky footer."
+          onPressCloseButton={closeModal}
+          footer={
+            <Flex direction="row" spacing="md" pt="250">
+              <Button
+                variant="outline"
+                colorScheme="functional"
+                onPress={closeModal}
+                style={{ flex: 1 }}
+              >
+                Cancel
+              </Button>
+              <Button onPress={closeModal} style={{ flex: 1 }}>
+                Save changes
+              </Button>
+            </Flex>
+          }
+          footerStyle={{
+            boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+          }}
+        >
+          <Box gap="200">
+            <BodyText>Billing address: 14 Park Street, Bristol</BodyText>
+            <BodyText>Preferred payment day: 15th of each month</BodyText>
+          </Box>
+        </Modal>
+      </ViewWrap>
+    </View>
+  );
+};
+
 export const Loading = () => {
   const modalRef = useRef<BottomSheetModal>(null);
 
@@ -239,3 +290,116 @@ export const FullscreenModal: Story = {
     );
   },
 };
+
+export const NoStickyFooter: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={openModal}>Open Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading="Modal Heading"
+            description="This is a modal description without a sticky footer."
+            onPressCloseButton={closeModal}
+            primaryButtonText="Primary"
+            onPressPrimaryButton={closeModal}
+            secondaryButtonText="Cancel"
+            onPressSecondaryButton={closeModal}
+            stickyFooter={false}
+          >
+            <Box gap="200">
+              <BodyText>This is a modal with content.</BodyText>
+              <BodyText>You can swipe it up and down to close.</BodyText>
+            </Box>
+          </Modal>
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const NoFooter: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={openModal}>Open Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading="Modal Heading"
+            description="This is a modal description without a footer."
+            onPressCloseButton={closeModal}
+          >
+            <Box gap="200">
+              <BodyText>This is a modal with content.</BodyText>
+              <BodyText>You can swipe it up and down to close.</BodyText>
+            </Box>
+          </Modal>
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const NoSafeArea: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <BottomSheetModalProvider useSafeAreaInsets={false}>
+        <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+          <ViewWrap>
+            <Button onPress={openModal}>Open Modal</Button>
+
+            <Modal
+              ref={modalRef}
+              heading="Modal Heading"
+              description="This is a modal description without safe area insets."
+              onPressCloseButton={closeModal}
+              primaryButtonText="Primary"
+              onPressPrimaryButton={closeModal}
+              secondaryButtonText="Cancel"
+              onPressSecondaryButton={closeModal}
+            >
+              <Box gap="200">
+                <BodyText>This is a modal with content.</BodyText>
+                <BodyText>You can swipe it up and down to close.</BodyText>
+              </Box>
+            </Modal>
+          </ViewWrap>
+        </View>
+      </BottomSheetModalProvider>
+    );
+  },
+};

package/src/components/Modal/Modal.tsx

@@ -6,9 +6,10 @@ import {
 } from '@gorhom/bottom-sheet';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, LayoutChangeEvent, Platform, View, findNodeHandle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
 import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
 import { useBottomSheetContext } from '../BottomSheet/BottomSheet.context';
@@ -38,15 +39,19 @@ const Modal = ({
   loadingDescription,
   fullscreen = false,
   image,
+  footer,
+  footerStyle,
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
   stickyFooter = true,
   ...props
 }: ModalProps) => {
+  const theme = useTheme();
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const viewRef = useRef<View>(null);
   const scrollViewRef = useRef<BottomSheetScrollViewMethods>(null);
+  const [stickyFooterHeight, setStickyFooterHeight] = useState(0);
   const { useSafeAreaInsets } = useBottomSheetContext();
 
   useImperativeHandle(ref, () => ({
@@ -100,45 +105,57 @@ const Modal = ({
     }
   }, [closeOnSecondaryButtonPress, onPressSecondaryButton]);
 
-  const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+  const handleStickyFooterLayout = useCallback((event: LayoutChangeEvent) => {
+    const nextHeight = Math.ceil(event.nativeEvent.layout.height);
+
+    setStickyFooterHeight(currentHeight =>
+      currentHeight === nextHeight ? currentHeight : nextHeight
+    );
+  }, []);
+
+  const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
+  const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
+  const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
+  const shouldShowFooter = !loading && hasFooter;
 
   styles.useVariants({
     loading,
-    bothButtons: !!(onPressPrimaryButton && onPressSecondaryButton),
-    noButtons,
+    noButtons: !shouldShowFooter,
     stickyFooter,
     showHandle: props.showHandle,
     useSafeAreaInsets,
   });
 
-  const footer = useMemo(
-    () => (
-      <View style={styles.footer}>
-        {onPressPrimaryButton && primaryButtonText ? (
-          <Button
-            onPress={handlePrimaryButtonPress}
-            text={primaryButtonText}
-            {...primaryButtonProps}
-            variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
-            colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
-          />
-        ) : null}
-        {onPressSecondaryButton && secondaryButtonText ? (
-          <Button
-            onPress={handleSecondaryButtonPress}
-            text={secondaryButtonText}
-            {...secondaryButtonProps}
-            variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
-            colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
-          />
-        ) : null}
-      </View>
-    ),
+  const footerContent = useMemo(
+    () =>
+      footer ?? (
+        <View style={styles.footer}>
+          {hasPrimaryButton ? (
+            <Button
+              onPress={handlePrimaryButtonPress}
+              text={primaryButtonText}
+              {...primaryButtonProps}
+              variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+              colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+            />
+          ) : null}
+          {hasSecondaryButton ? (
+            <Button
+              onPress={handleSecondaryButtonPress}
+              text={secondaryButtonText}
+              {...secondaryButtonProps}
+              variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+              colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+            />
+          ) : null}
+        </View>
+      ),
     [
+      footer,
       handlePrimaryButtonPress,
       handleSecondaryButtonPress,
-      onPressPrimaryButton,
-      onPressSecondaryButton,
+      hasPrimaryButton,
+      hasSecondaryButton,
       primaryButtonProps,
       primaryButtonText,
       secondaryButtonProps,
@@ -209,38 +226,64 @@ const Modal = ({
             </View>
           ) : null}
           {children}
-          {!stickyFooter && !noButtons ? footer : null}
+          {!stickyFooter && shouldShowFooter ? (
+            <View style={footerStyle}>{footerContent}</View>
+          ) : null}
         </View>
       )}
     </>
   );
 
   const renderFooter = useCallback(
-    (props: BottomSheetFooterProps) => (
-      <BottomSheetFooter {...props}>
-        <View style={styles.footerWrap}>{footer}</View>
+    (bottomSheetFooterProps: BottomSheetFooterProps) => (
+      <BottomSheetFooter {...bottomSheetFooterProps}>
+        <View onLayout={handleStickyFooterLayout} style={[styles.footerWrap, footerStyle]}>
+          {footerContent}
+        </View>
       </BottomSheetFooter>
     ),
-    [footer]
+    [footerContent, footerStyle, handleStickyFooterLayout]
   );
 
   return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      enableDynamicSizing={true}
-      snapPoints={image || fullscreen ? ['90%'] : props.snapPoints}
-      showHandle={typeof loading !== 'undefined' && loading ? false : props.showHandle}
-      accessible={false}
-      style={styles.modal}
-      footerComponent={stickyFooter && !noButtons ? renderFooter : undefined}
-      {...props}
-      onChange={handleChange}
-    >
-      {loading ? <View style={styles.loadingTop} /> : null}
-      <BottomSheetScrollView contentContainerStyle={styles.scrollView} ref={scrollViewRef}>
-        {content}
-      </BottomSheetScrollView>
-    </BottomSheetModal>
+    <>
+      {stickyFooter && shouldShowFooter && stickyFooterHeight === 0 ? (
+        <View
+          accessible={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={styles.footerMeasurementContainer}
+        >
+          <View onLayout={handleStickyFooterLayout} style={[styles.footerWrap, footerStyle]}>
+            {footerContent}
+          </View>
+        </View>
+      ) : null}
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing={true}
+        snapPoints={image || fullscreen ? ['90%'] : props.snapPoints}
+        showHandle={typeof loading !== 'undefined' && loading ? false : props.showHandle}
+        accessible={false}
+        style={styles.modal}
+        footerComponent={stickyFooter && shouldShowFooter ? renderFooter : undefined}
+        {...props}
+        onChange={handleChange}
+      >
+        {loading ? <View style={styles.loadingTop} /> : null}
+        <BottomSheetScrollView
+          contentContainerStyle={[
+            styles.scrollView,
+            stickyFooter && shouldShowFooter && stickyFooterHeight > 0
+              ? { paddingBottom: stickyFooterHeight + theme.components.modal.gap }
+              : null,
+          ]}
+          ref={scrollViewRef}
+        >
+          {content}
+        </BottomSheetScrollView>
+      </BottomSheetModal>
+    </>
   );
 };
 
@@ -262,14 +305,6 @@ const styles = StyleSheet.create((theme, rt) => ({
   scrollView: {
     flex: 1,
     variants: {
-      bothButtons: {
-        true: {
-          paddingBottom: 166,
-        },
-        false: {
-          paddingBottom: 102,
-        },
-      },
       noButtons: {
         true: {
           paddingBottom: theme.components.modal.padding,
@@ -287,31 +322,10 @@ const styles = StyleSheet.create((theme, rt) => ({
       },
     },
     compoundVariants: [
-      {
-        bothButtons: true,
-        useSafeAreaInsets: true,
-        styles: {
-          paddingBottom:
-            166 +
-            rt.insets.bottom -
-            theme.components.modal.padding +
-            theme.components.bottomSheet.padding,
-        },
-      },
-      {
-        bothButtons: false,
-        useSafeAreaInsets: true,
-        styles: {
-          paddingBottom:
-            102 +
-            rt.insets.bottom -
-            theme.components.modal.padding +
-            theme.components.bottomSheet.padding,
-        },
-      },
       {
         noButtons: true,
         useSafeAreaInsets: true,
+        stickyFooter: false,
         styles: {
           paddingBottom:
             rt.insets.bottom +
@@ -372,6 +386,12 @@ const styles = StyleSheet.create((theme, rt) => ({
   footer: {
     gap: theme.components.modal.action.gap,
   },
+  footerMeasurementContainer: {
+    left: 0,
+    opacity: 0,
+    position: 'absolute',
+    right: 0,
+  },
   footerWrap: {
     backgroundColor: theme.color.surface.neutral.strong,
     paddingHorizontal: theme.components.bottomSheet.padding,

package/src/components/Modal/Modal.web.tsx

@@ -31,6 +31,8 @@ const Modal = ({
   loadingHeading = 'Loading...',
   fullscreen = false,
   image,
+  footer,
+  footerStyle,
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
@@ -91,7 +93,32 @@ const Modal = ({
     }
   };
 
-  const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+  const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
+  const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
+  const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
+
+  const footerContent = footer ?? (
+    <View style={styles.footer}>
+      {hasPrimaryButton ? (
+        <Button
+          onPress={handlePrimaryButtonPress}
+          text={primaryButtonText}
+          {...primaryButtonProps}
+          variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+          colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+        />
+      ) : null}
+      {hasSecondaryButton ? (
+        <Button
+          onPress={handleSecondaryButtonPress}
+          text={secondaryButtonText}
+          {...secondaryButtonProps}
+          variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+          colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+        />
+      ) : null}
+    </View>
+  );
 
   const content = (
     <>
@@ -152,28 +179,7 @@ const Modal = ({
             </View>
           ) : null}
           {children}
-          {!noButtons ? (
-            <View style={styles.footer}>
-              {onPressPrimaryButton && primaryButtonText ? (
-                <Button
-                  onPress={handlePrimaryButtonPress}
-                  text={primaryButtonText}
-                  {...primaryButtonProps}
-                  variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
-                  colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
-                />
-              ) : null}
-              {onPressSecondaryButton && secondaryButtonText ? (
-                <Button
-                  onPress={handleSecondaryButtonPress}
-                  text={secondaryButtonText}
-                  {...secondaryButtonProps}
-                  variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
-                  colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
-                />
-              ) : null}
-            </View>
-          ) : null}
+          {hasFooter ? <View style={footerStyle}>{footerContent}</View> : null}
         </View>
       )}
     </>