support for scrollingContainerId prop

documentation/Doc.md

@@ -358,10 +358,10 @@ FlatList comes with pagination out of the box. This is specially great for when
 so you start with fetching a small portion and then let the user scroll to the bottom, show the loading indicator while you
 fetch some more.
 
-To make it work you need to render `FlatList` inside of a scrolling container with "`overflow: auto`" or "`overflow: scroll`".
-If the container wrapping FlatList does not scroll it misses the point of infinite scrolling.
+To make it work you need to render `FlatList` inside of a scrolling container ancestor element with "`overflow: auto`" or "`overflow: scroll`".
 
 ```jsx
+// as direct child of a scrolling container
 <div style={{overflow: "auto", height: "300px"}}>
     <FlatList
         list={this.props.people}
@@ -371,14 +371,29 @@ If the container wrapping FlatList does not scroll it misses the point of infini
 </div>
 
 // --- OR ---
-
+// as a scrolling container itself using the "wrapperHtmlTag" prop
 <FlatList
     list={this.props.people}
     renderItem={this.renderPerson}
     renderWhenEmpty={this.showBlank}
     wrapperHtmlTag="div"
     style={{overflow: "auto", height: "300px"}}
 />
+
+// --- OR ---
+// as a DEEP child of a scrolling ancestor element using the "scrollingContainerId" prop
+<div style={{overflow: "auto", height: "300px"}} id="scrolling-container">
+  <div className="mid-wrapper">
+    <div className="list-wrapper">
+      <FlatList
+        list={this.props.people}
+        renderItem={this.renderPerson}
+        renderWhenEmpty={this.showBlank}
+        scrollingContainerId="scrolling-container"
+      />
+    </div>
+  </div>
+</div>
 ```
 
 Pagination props will not work while `renderOnScroll` is being used. Pagination already renders on scroll.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flatlist-react",
-  "version": "1.5.14",
+  "version": "1.5.15-next",
   "description": "A helpful utility component to handle lists in react like a champ",
   "main": "./lib/index.js",
   "types": "./lib/index.d.js",

src/___subComponents/InfiniteLoader.tsx

@@ -18,6 +18,7 @@ interface InfiniteLoaderState {
 
 interface InfiniteLoaderProps extends InfiniteLoaderInterface {
   itemsCount: number;
+  scrollingContainerId?: string;
 }
 
 class InfiniteLoader extends Component<
@@ -46,10 +47,25 @@ class InfiniteLoader extends Component<
     const { current: loadIndicatorContainer } = this.loaderContainerRef;
 
     if (loadIndicatorContainer) {
+      let scrollingContainer = loadIndicatorContainer.parentNode as HTMLElement;
+
+      if (this.props.scrollingContainerId) {
+        // find the closest ancestor with the id
+        scrollingContainer = scrollingContainer.closest(
+          `#${this.props.scrollingContainerId}`
+        ) as HTMLElement;
+
+        if (!scrollingContainer) {
+          throw new Error(
+            `Can't find scrolling container with id of "${this.props.scrollingContainerId}"`
+          );
+        }
+      }
+
       this.setState(
         {
           loadIndicatorContainer,
-          scrollingContainer: loadIndicatorContainer.parentNode as HTMLElement,
+          scrollingContainer,
         },
         () => {
           this.currentItemsCount = this.getScrollingContainerChildrenCount();

src/flatListProps.ts

@@ -106,6 +106,7 @@ export interface FlatListProps<ListItem> {
   scrollToTopOffset?: number;
   scrollToTopPadding?: number;
   scrollToTopPosition?: string;
+  scrollingContainerId?: string;
   // others
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
@@ -183,6 +184,7 @@ export const defaultProps: FlatListProps<any> = {
   scrollToTopOffset: undefined,
   scrollToTopPadding: undefined,
   scrollToTopPosition: undefined,
+  scrollingContainerId: undefined,
   // SEARCH
   search: {
     by: "",

src/flatlist-react.tsx

@@ -46,6 +46,7 @@ function FlatList<ListItem>(props: FlatListProps<ListItem>) {
     scrollToTopPadding,
     scrollToTopOffset,
     scrollToTopPosition,
+    scrollingContainerId,
     pagination = {} as InfiniteLoaderInterface, // pagination props
     // eslint-disable-next-line @typescript-eslint/naming-convention
     // @ts-ignore
@@ -113,6 +114,7 @@ function FlatList<ListItem>(props: FlatListProps<ListItem>) {
           loadingIndicator={
             paginationLoadingIndicator || pagination.loadingIndicator
           }
+          scrollingContainerId={scrollingContainerId}
           loadingIndicatorPosition={
             paginationLoadingIndicatorPosition ||
             pagination.loadingIndicatorPosition