convert footer component to render function

Author: meishuu

src/components/bottomSheet/BottomSheet.tsx

@@ -160,7 +160,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       handleComponent,
       backdropComponent,
       backgroundComponent,
-      footerComponent,
+      renderFooter,
       children: Content,
 
       // accessibility
@@ -1659,10 +1659,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   >
                     {typeof Content === 'function' ? <Content /> : Content}
 
-                    {footerComponent && (
-                      <BottomSheetFooterContainer
-                        footerComponent={footerComponent}
-                      />
+                    {renderFooter && (
+                      <BottomSheetFooterContainer renderFooter={renderFooter} />
                     )}
                   </BottomSheetDraggableView>
                 </Animated.View>

src/components/bottomSheet/types.d.ts

@@ -299,11 +299,11 @@ export interface BottomSheetProps
    */
   backgroundComponent?: React.FC<BottomSheetBackgroundProps> | null;
   /**
-   * Component to be placed as a footer.
+   * Function to render as the footer.
    * @see {BottomSheetFooterProps}
-   * @type React.FC\<BottomSheetFooterProps\>
+   * @type (props: BottomSheetFooterProps) => React.ReactElement | null;
    */
-  footerComponent?: React.FC<BottomSheetFooterProps>;
+  renderFooter?: (props: BottomSheetFooterProps) => React.ReactElement | null;
   /**
    * A scrollable node or normal view.
    * @type (() => React.ReactElement) | React.ReactNode[] | React.ReactNode

src/components/bottomSheetFooterContainer/BottomSheetFooterContainer.tsx

@@ -1,11 +1,11 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { useDerivedValue } from 'react-native-reanimated';
 import { useBottomSheetInternal } from '../../hooks';
 import { KEYBOARD_STATE } from '../../constants';
 import type { BottomSheetFooterContainerProps } from './types';
 
 const BottomSheetFooterContainerComponent = ({
-  footerComponent: FooterComponent,
+  renderFooter,
 }: BottomSheetFooterContainerProps) => {
   //#region hooks
   const {
@@ -46,7 +46,7 @@ const BottomSheetFooterContainerComponent = ({
   ]);
   //#endregion
 
-  return <FooterComponent animatedFooterPosition={animatedFooterPosition} />;
+  return renderFooter({ animatedFooterPosition });
 };
 
 const BottomSheetFooterContainer = memo(BottomSheetFooterContainerComponent);

src/components/bottomSheetFooterContainer/types.d.ts

@@ -1,4 +1,4 @@
 import type { BottomSheetProps } from '../bottomSheet';
 
 export interface BottomSheetFooterContainerProps
-  extends Required<Pick<BottomSheetProps, 'footerComponent'>> {}
+  extends Required<Pick<BottomSheetProps, 'renderFooter'>> {}