From b8115c0b37f6fec1507d7a66b0badfb6d5434c40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Badar=20Khan=20=E3=83=84?=
 <badarshahzad@users.noreply.github.com>
Date: Tue, 25 Sep 2018 11:31:26 +0500
Subject: [PATCH 1/3] Now its perfect component

You placed a ; after view. :+1:
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4cec91e..f48c2f0 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ Optionally, you can add a prop `renderEndComponent`. It expects a function that
         <Text style={{ textAlign: 'center' }}>
           No more items, check back later!
         </Text>
-      </View>;
+      </View>
     );
   }}
 />

From 5dd5356fa0e676fccb44d82bc7515c2124ce3333 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Badar=20Khan=20=E3=83=84?=
 <badarshahzad@users.noreply.github.com>
Date: Tue, 25 Sep 2018 13:11:21 +0500
Subject: [PATCH 2/3] I have resolved the issue of index

I have used your component its awesome idea. But  I have found you didn't maintain the index in the component. I have resolved that one.
---
 index.js | 78 +++++++++++++++++++++++++++-----------------------------
 1 file changed, 38 insertions(+), 40 deletions(-)

diff --git a/index.js b/index.js
index 92641b2..52bb594 100644
--- a/index.js
+++ b/index.js
@@ -1,58 +1,56 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  View,
-  Text,
-  FlatList,
-} from 'react-native';
+import React from "react";
+import PropTypes from "prop-types";
+import { View, Text, FlatList } from "react-native";
 
 // Hack: To detect that it is at the end.
-const LastElementHash = { hash: 'XwPp9xazJ0ku5CZnlmgAx2Dld8SHkAeT' };
+const LastElementHash = { hash: "XwPp9xazJ0ku5CZnlmgAx2Dld8SHkAeT" };
 
 // Just a place holder element
 const DefaultRenderEndComponent = () => {
-  return <View style={{ paddingVertical: 15 }}><Text style={{ textAlign: 'center' }}>End of list</Text></View>;
-};
-
-const FlatListWithEnd = (props) => {
-  // Clone the array
-  const data = props.data.slice(0);
-  data.push(LastElementHash);
-  /**
-   * A new renderItem function to replace the default
-   * Basically, we check if the item is the last element we manually pushed in earlier
-   * If so, we render the EndComponent
-   *
-   * @param {any}        {item} Same as from FlatList
-   * @returns {Function} A function which returns a React Component.
-   */
-  const renderItem = ({ item }) => {
-    if (item.hash === LastElementHash.hash) {
-      return props.renderEndComponent();
-    }
-    return props.renderItem({ item });
-  };
-  const mutatedProps = {
-    ...props,
-    data,
-    renderItem,
-  };
-
   return (
-    <FlatList
-      {...mutatedProps}
-    />
+    <View style={{ paddingVertical: 15 }}>
+      <Text style={{ textAlign: "center" }}>End of list</Text>
+    </View>
   );
 };
 
+class FlatListWithEnd extends React.Component {
+  render() {
+    // Clone the array
+    const data = this.props.data.slice(0);
+    data.push(LastElementHash);
+
+    /**
+     * A new renderItem function to replace the default
+     * Basically, we check if the item is the last element we manually pushed in earlier
+     * If so, we render the EndComponent
+     *
+     * @param {any}        {item} Same as from FlatList
+     * @returns {Function} A function which returns a React Component.
+     */
+    const renderItem = ({ item, index }) => {
+      if (item.hash === LastElementHash.hash) {
+        return this.props.renderEndComponent();
+      }
+      return this.props.renderItem({ item, index });
+    };
+    const mutatedProps = {
+      data,
+      renderItem
+    };
+
+    return <FlatList {...mutatedProps} />;
+  }
+}
+
 FlatListWithEnd.propTypes = {
   data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
   renderItem: PropTypes.func.isRequired,
-  renderEndComponent: PropTypes.func,
+  renderEndComponent: PropTypes.func
 };
 
 FlatListWithEnd.defaultProps = {
-  renderEndComponent: DefaultRenderEndComponent,
+  renderEndComponent: DefaultRenderEndComponent
 };
 
 export default FlatListWithEnd;

From 462d15a66c398a5c3403682dc8398596e506e356 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Badar=20Khan=20=E3=83=84?=
 <badarshahzad@users.noreply.github.com>
Date: Tue, 25 Sep 2018 13:13:57 +0500
Subject: [PATCH 3/3] Now its perfect component :+1:

I think now its perfect component. :+1:
---
 README.md | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f48c2f0..c6ba9fd 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ Optionally, you can add a prop `renderEndComponent`. It expects a function that
 # Demo
 ![Demo](https://raw.githubusercontent.com/jjingrong/react-native-flatlist-with-end/master/demo.png)
 
-# Example
+# Example 1
 ```
 <FlatListWithEnd
   scrollEnabled
@@ -48,6 +48,29 @@ Optionally, you can add a prop `renderEndComponent`. It expects a function that
 />
 ```
 
+# Example 2
+
+```
+<FlatListWithEnd
+          scrollEnabled
+          renderItem={({ item, index }) => this._renderItem(item, index)}
+          data={this.state.addToCartList}
+          renderEndComponent={() => {
+            return (
+              <View>
+                <View style={{ paddingVertical: 15 }}>
+                  <Text style={{ textAlign: "center" }}>
+                    No more items, check back later!
+                  </Text>
+                </View>
+                {this.returnBillView()}
+              </View>
+            );
+          }}
+          keyExtractor={(item, index) => index.toString()}
+        />
+```
+
 # API