Merge branch 'master' into documentation

Author: ecorreia

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flatlist-react",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A helpful utility component to handle lists in react like a champ",
   "main": "./lib/index.js",
   "scripts": {

src/___subComponents/PlainList.tsx

@@ -11,14 +11,14 @@ interface Props {
     renderItem: JSX.Element | renderFunc;
     renderWhenEmpty?: null | (() => JSX.Element);
     wrapperHtmlTag?: string;
-    renderScroll?: boolean;
+    renderOnScroll?: boolean;
     __forwarededRef?: Ref<HTMLElement>;
     [key: string]: any;
 }
 
 const PlainList = (props: Props) => {
     const {
-        list, renderItem, renderWhenEmpty, renderScroll, wrapperHtmlTag, __forwarededRef,
+        list, renderItem, renderWhenEmpty, renderOnScroll, wrapperHtmlTag, __forwarededRef,
         ...tagProps
     } = props;
     const dataList = convertListToArray(list);
@@ -31,7 +31,7 @@ const PlainList = (props: Props) => {
     const content = (
         <>
             {
-                renderScroll
+                renderOnScroll
                     ? <ScrollRenderer list={dataList} renderItem={renderItem}/>
                     : dataList.map(handleRenderItem(renderItem))
             }
@@ -69,13 +69,13 @@ PlainList.propTypes = {
     wrapperHtmlTag: string,
     // eslint-disable-next-line react/forbid-prop-types
     __forwarededRef: object,
-    renderScroll: bool
+    renderOnScroll: bool
 };
 
 PlainList.defaultProps = {
     wrapperHtmlTag: '',
     renderWhenEmpty: DefaultBlank,
-    renderScroll: false,
+    renderOnScroll: false,
     __forwarededRef: {current: null}
 };
 

src/___subComponents/ScrollRenderer.tsx

@@ -32,16 +32,12 @@ const ScrollRenderer = (props: Props) => {
         }
     };
 
-    const onScroll = () => {
-        const span: any = containerRef.current;
-
-        if (span) {
-            const startingPoint = span.parentNode.offsetTop + span.parentNode.offsetHeight;
-            const anchorPos = span.offsetTop - span.parentNode.scrollTop;
+    const onScroll = (span: any) => () => {
+        const startingPoint = span.parentNode.offsetTop + span.parentNode.offsetHeight;
+        const anchorPos = span.offsetTop - span.parentNode.scrollTop;
 
-            if (anchorPos <= (startingPoint + (span.parentNode.offsetHeight * 2))) {
-                requestAnimationFrame(() => addItem(span.parentNode, span.parentNode.scrollTop));
-            }
+        if (anchorPos <= (startingPoint + (span.parentNode.offsetHeight * 2))) {
+            requestAnimationFrame(() => addItem(span.parentNode, span.parentNode.scrollTop));
         }
     };
 
@@ -68,25 +64,26 @@ const ScrollRenderer = (props: Props) => {
     useLayoutEffect(() => {
         const span: any = containerRef.current;
         let container: any = null;
+        const handleScroll = onScroll(span);
         if (span) {
             container = span.parentNode;
             // populate double the container height of items
-            if (span.parentNode.scrollHeight <= (container.offsetHeight * 2)) {
+            if (render.index === 0 || container.scrollHeight <= (container.offsetHeight * 2)) {
                 requestAnimationFrame(() => addItem(container));
             }
 
             if (render.index > 0 && dataList.length === render.renderList.length) {
-                container.removeEventListener('scroll', onScroll, true);
+                container.removeEventListener('scroll', handleScroll, true);
             } else {
-                container.addEventListener('scroll', onScroll, true);
+                container.addEventListener('scroll', handleScroll, true);
             }
 
             adding = false;
         }
 
         return () => { // when unmounted
             if (span) {
-                container.removeEventListener('scroll', onScroll, true);
+                container.removeEventListener('scroll', handleScroll, true);
             }
         };
     }, [render.index]);