add renderPage prop

Author: computerjazz

README.md

@@ -14,21 +14,55 @@ Fully native interactions powered by [Reanimated 2](https://github.com/kmagiera/
 ### Props
 
 ```typescript
-type PageComponentType = (props: {
+type PageProps = {
   index: number;
   focusAnim: Animated.DerivedValue<number>;
   isActive: boolean;
-}) => JSX.Element | null;
+  pageWidthAnim: Animated.SharedValue<number>;
+  pageAnim: Animated.SharedValue<number>;
+}
+
+type PageComponentType = (props: PageProps) => JSX.Element | null;
 
 type AnyStyle = StyleProp<ViewStyle> | ReturnType<typeof useAnimatedStyle>;
+
+type Props = {
+  PageComponent?:
+    | PageComponentType
+    | React.MemoExoticComponent<PageComponentType>;
+  renderPage?: PageComponentType
+  pageCallbackNode?: Animated.SharedValue<number>;
+  onPageChange?: (page: number) => void;
+  pageBuffer?: number; 
+  style?: AnyStyle;
+  pageWrapperStyle?: AnyStyle;
+  pageInterpolator?: typeof defaultPageInterpolator;
+  minIndex?: number;
+  maxIndex?: number;
+  simultaneousGestures?: (ComposedGesture | GestureType)[];
+  gesturesDisabled?: boolean;
+  animationConfig?: Partial<WithSpringConfig>;
+};
 ```
 
 | Name               | Type                     | Description                                     |
 | :----------------- | :----------------------- | :---------------------------------------------- |
-| `PageComponent`    | `PageComponentType`      | Component to be rendered as each page.          |
+| `PageComponent`    | `PageComponentType`      | Component to be rendered as each page (either PageComponent OR renderPage must be defined, but not both — choose the version that suits your use case).          |
+| `renderPage`    | `PageComponentType`      | Function to be called to render each page.          |
 | `onPageChange`     | `(page: number) => void` | Callback invoked when the current page changes. |
 | `style`            | `AnyStyle`               | Style of the pager container.                   |
 | `pageWrapperStyle` | `AnyStyle`               | Style of the container that wraps each page.    |
+| `pageCallbackNode` | `Animated.SharedValue<number>`               | SharedValue that represents the index of the current page.    |
+| `pageBuffer` | `number`               | Number of pages to render on either side of the active page.    |
+| `pageInterpolator` | `(params: PageInterpolatorParams) => ReturnType<typeof useAnimatedStyle>`               | Interpolator for custom page animations.    |
+| `minIndex`            | `number`               | Minimum page index for non-infinite behavior (optional).                   |
+| `maxIndex`            | `number`               | Maximum page index for non-infinite behavior (optional).                   |
+| `simultaneousGestures`            | `(ComposedGesture | GestureType)[]`               | Simultaneous RNGH gestures.                   |
+| `gesturesDisabled`            | `boolean`               | Disables pan gestures.                   |
+| `animationConfig`            | `Partial<WithSpringConfig>`               | Customizes paging animations.                   |
+
+
+
 
 ### Imperative Api
 

src/index.tsx

@@ -31,20 +31,22 @@ export const DEFAULT_ANIMATION_CONFIG: WithSpringConfig = {
   restDisplacementThreshold: 0.2,
 };
 
-type PageComponentType = (props: {
+type PageProps = {
   index: number;
   focusAnim: Animated.DerivedValue<number>;
   isActive: boolean;
   pageWidthAnim: Animated.SharedValue<number>;
   pageAnim: Animated.SharedValue<number>;
-}) => JSX.Element | null;
+};
+type PageComponentType = (props: PageProps) => JSX.Element | null;
 
 type AnyStyle = StyleProp<ViewStyle> | ReturnType<typeof useAnimatedStyle>;
 
 type Props = {
-  PageComponent:
+  PageComponent?:
     | PageComponentType
     | React.MemoExoticComponent<PageComponentType>;
+  renderPage?: PageComponentType;
   pageCallbackNode?: Animated.SharedValue<number>;
   onPageChange?: (page: number) => void;
   pageBuffer?: number; // number of pages to render on either side of active page
@@ -82,6 +84,7 @@ function InfinitePager(
     simultaneousGestures = [],
     gesturesDisabled,
     animationConfig = {},
+    renderPage,
   }: Props,
   ref: React.ForwardedRef<InfinitePagerImperativeApi>
 ) {
@@ -211,6 +214,7 @@ function InfinitePager(
               pageWidth={pageWidth}
               isActive={pageIndex === curIndex}
               PageComponent={PageComponent}
+              renderPage={renderPage}
               style={pageWrapperStyle}
               pageInterpolatorRef={pageInterpolatorRef}
             />
@@ -225,7 +229,8 @@ type PageWrapperProps = {
   pageAnim: Animated.SharedValue<number>;
   index: number;
   pageWidth: Animated.SharedValue<number>;
-  PageComponent: PageComponentType;
+  PageComponent?: PageComponentType;
+  renderPage?: PageComponentType;
   isActive: boolean;
   style?: AnyStyle;
   pageInterpolatorRef: React.MutableRefObject<typeof defaultPageInterpolator>;
@@ -262,6 +267,7 @@ const PageWrapper = React.memo(
     pageAnim,
     pageWidth,
     PageComponent,
+    renderPage,
     isActive,
     style,
     pageInterpolatorRef,
@@ -289,6 +295,16 @@ const PageWrapper = React.memo(
       });
     }, [pageWidth, pageAnim, index, translation]);
 
+    if (PageComponent && renderPage) {
+      console.warn(
+        "PageComponent and renderPage both defined, defaulting to PageComponent"
+      );
+    }
+
+    if (!PageComponent && !renderPage) {
+      throw new Error("Either PageComponent or renderPage must be defined.");
+    }
+
     return (
       <Animated.View
         style={[
@@ -298,13 +314,23 @@ const PageWrapper = React.memo(
           isActive && styles.activePage,
         ]}
       >
-        <PageComponent
-          index={index}
-          isActive={isActive}
-          focusAnim={focusAnim}
-          pageWidthAnim={pageWidth}
-          pageAnim={pageAnim}
-        />
+        {PageComponent ? (
+          <PageComponent
+            index={index}
+            isActive={isActive}
+            focusAnim={focusAnim}
+            pageWidthAnim={pageWidth}
+            pageAnim={pageAnim}
+          />
+        ) : (
+          renderPage?.({
+            index,
+            isActive,
+            focusAnim,
+            pageWidthAnim: pageWidth,
+            pageAnim,
+          })
+        )}
       </Animated.View>
     );
   }