refactor: accept ReactElement for FooterComponent

README.md

@@ -64,7 +64,7 @@ Extends `ViewProps`
 | cornerRadius | `number` | - | the sheet corner radius. | ✅ | ✅ |
 | maxHeight | `number` | - | Overrides `large` or `100%` height. | ✅ | ✅ |
 | contentContainerStyle | `StyleProp<ViewStyle>` | - | Optional content container styles. | ✅ | ✅ |
-| FooterComponent | `ReactNode` | - | A component that floats at the bottom of the sheet. | ✅ | ✅ |
+| FooterComponent | `ComponentType<...> | ReactElement` | - | A component that floats at the bottom of the sheet. Accepts a functional `Component` or `ReactElement`. | ✅ | ✅ |
 | dismissible | `boolean` | `true` | If set to `false`, the sheet will prevent interactive dismissal via dragging or clicking outside of it. | ✅ | ✅ |
 | grabber | `boolean` | `true` | Shows a grabber (or handle). Native on IOS and styled `View` on Android. | ✅ | ✅ |
 | grabberProps | [`TrueSheetGrabberProps`](#truesheetgrabberprops) | - | Overrides the grabber props for android. | | ✅ |

example/src/App.tsx

@@ -90,7 +90,7 @@ export default function App() {
           console.log(`Sheet 1 presented with size of ${value} at index: ${index}`)
         }
         onSizeChange={({ index, value }) => console.log(`Resized to:`, value, 'at index:', index)}
-        FooterComponent={Footer}
+        FooterComponent={<Footer />}
       >
         <DemoContent color={DARK_BLUE} text={random(randomTexts)} />
         <Button text="Present Large" onPress={() => resizeSheet1(2)} />
@@ -112,7 +112,7 @@ export default function App() {
           console.log(`Sheet Prompt presented with size of ${value} at index: ${index}`)
         }
         onSizeChange={({ index, value }) => console.log(`Resized to:`, value, 'at index:', index)}
-        FooterComponent={Footer}
+        FooterComponent={<Footer />}
       >
         <DemoContent color={DARK_BLUE} text={random(randomTexts)} />
         <Input />
@@ -124,7 +124,7 @@ export default function App() {
         scrollRef={scrollViewRef}
         onDismiss={() => console.log('Sheet ScrollView dismissed!')}
         onPresent={() => console.log(`Sheet ScrollView presented!`)}
-        FooterComponent={Footer}
+        FooterComponent={<Footer />}
       >
         <ScrollView
           ref={scrollViewRef}

src/TrueSheet.tsx

@@ -179,14 +179,28 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
           <View collapsable={false} style={contentContainerStyle}>
             {children}
           </View>
-          <View collapsable={false}>{!!FooterComponent && <FooterComponent />}</View>
+          <View collapsable={false}>
+            <TrueSheetFooter FooterComponent={FooterComponent} />
+          </View>
           {Platform.OS === 'android' && <TrueSheetGrabber visible={grabber} {...grabberProps} />}
         </View>
       </TrueSheetNativeView>
     )
   }
 }
 
+const TrueSheetFooter = (props: Pick<TrueSheetProps, 'FooterComponent'>) => {
+  const { FooterComponent } = props
+
+  if (!FooterComponent) return null
+
+  if (typeof FooterComponent !== 'function') {
+    return FooterComponent
+  }
+
+  return <FooterComponent />
+}
+
 const $nativeSheet: ViewStyle = {
   position: 'absolute',
   left: -9999,

src/types.ts

@@ -1,5 +1,6 @@
-import type { Component, ComponentType, RefObject } from 'react'
+import type { Component, ComponentType, ReactElement, RefObject } from 'react'
 import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native'
+
 import type { TrueSheetGrabberProps } from './TrueSheetGrabber'
 
 export interface SizeInfo {
@@ -169,7 +170,7 @@ export interface TrueSheetProps extends ViewProps {
   /**
    * A component that floats at the bottom of the Sheet.
    */
-  FooterComponent?: ComponentType<unknown>
+  FooterComponent?: ComponentType<unknown> | ReactElement
 
   /**
    * Called when the Sheet has been presented.