Added renderHeader prop for React Native

README.md

@@ -94,6 +94,7 @@ In case you cannot determine heights of items in advance just set `forceNonDeter
 | onVisibleIndicesChanged | No | TOnItemStatusChanged | Provides visible index; helpful in sending impression events |
 | onVisibleIndexesChanged | No | TOnItemStatusChanged | (Deprecated in 2.0 beta) Provides visible index; helpful in sending impression events |
 | renderFooter | No | () => JSX.Element \| JSX.Element[] \| null | Provide this method if you want to render a footer. Helpful in showing a loader while doing incremental loads |
+| renderHeader | No | () => JSX.Element \| JSX.Element[] \| null | **React Native only**. Provide this method if you want to render a header |
 | initialRenderIndex | No | number | Specify the initial item index you want rendering to start from. Preferred over initialOffset if both specified |
 | scrollThrottle | No | number |iOS only; Scroll throttle duration |
 | canChangeSize | No | boolean | Specify if size can change |

package.json

@@ -2,7 +2,7 @@
   "name": "recyclerlistview",
   "version": "3.2.0-beta.1",
   "description": "The listview that you need and deserve. It was built for performance, uses cell recycling to achieve smooth scrolling.",
-  "main": "dist/reactnative/index.js",
+  "main": "src/index.ts",
   "types": "dist/reactnative/index.d.ts",
   "scripts": {
     "build": "sh scripts/build.sh",

src/core/RecyclerListView.tsx

@@ -18,7 +18,7 @@
  * TODO: Observe size changes on web to optimize for reflowability
  * TODO: Solve //TSI
  */
-import debounce = require("lodash.debounce");
+const debounce = require("lodash.debounce");
 import * as PropTypes from "prop-types";
 import * as React from "react";
 import { ObjectUtil, Default } from "ts-object-utils";
@@ -91,6 +91,7 @@ export interface RecyclerListViewProps {
     onVisibleIndexesChanged?: TOnItemStatusChanged;
     onVisibleIndicesChanged?: TOnItemStatusChanged;
     renderFooter?: () => JSX.Element | JSX.Element[] | null;
+    renderHeader?: () => JSX.Element | JSX.Element[] | null;
     externalScrollView?: { new(props: ScrollViewDefaultProps): BaseScrollView };
     layoutSize?: Dimension;
     initialOffset?: number;
@@ -832,6 +833,9 @@ RecyclerListView.propTypes = {
 
     //Provide this method if you want to render a footer. Helpful in showing a loader while doing incremental loads.
     renderFooter: PropTypes.func,
+
+    //Provide this method if you want to render a header
+    renderHeader: PropTypes.func,
 
     //Specify the initial item index you want rendering to start from. Preferred over initialOffset if both are specified.
     initialRenderIndex: PropTypes.number,

src/core/scrollcomponent/BaseScrollComponent.tsx

@@ -11,6 +11,7 @@ export interface ScrollComponentProps {
     externalScrollView?: { new(props: ScrollViewDefaultProps): BaseScrollView };
     isHorizontal?: boolean;
     renderFooter?: () => JSX.Element | JSX.Element[] | null;
+    renderHeader?: () => JSX.Element | JSX.Element[] | null;
     scrollThrottle?: number;
     useWindowScroll?: boolean;
     onLayout?: any;

src/platform/reactnative/scrollcomponent/ScrollComponent.tsx

@@ -71,6 +71,7 @@ export default class ScrollComponent extends BaseScrollComponent {
         //     externalScrollView,
         //     canChangeSize,
         //     renderFooter,
+        //     renderHeader,
         //     isHorizontal,
         //     scrollThrottle,
         //     ...props,
@@ -84,6 +85,7 @@ export default class ScrollComponent extends BaseScrollComponent {
                 onScroll={this._onScroll}
                 onLayout={(!this._isSizeChangedCalledOnce || this.props.canChangeSize) ? this._onLayout : this.props.onLayout}>
                 <View style={{ flexDirection: this.props.isHorizontal ? "row" : "column" }}>
+                    {this.props.renderHeader ? this.props.renderHeader() : null}
                     {renderContentContainer(contentContainerProps, this.props.children)}
                     {this.props.renderFooter ? this.props.renderFooter() : null}
                 </View>