Added load more feature for notifications

src/components/notification/view/notificationView.js

@@ -34,6 +34,7 @@ class NotificationView extends PureComponent {
         { key: 'follows', value: 'FOLLOWS' },
         { key: 'reblogs', value: 'REBLOGS' },
       ],
+      selectedFilter: null,
     };
   }
 
@@ -45,7 +46,8 @@ class NotificationView extends PureComponent {
     const { getActivities } = this.props;
     const { filters } = this.state;
 
-    getActivities(filters[index].key);
+    this.setState({ selectedFilter: filters[index].key });
+    getActivities(filters[index].key, false);
   };
 
   _renderList = (data) => {
@@ -60,6 +62,8 @@ class NotificationView extends PureComponent {
             handleOnPressNotification={navigateToNotificationRoute}
           />
         )}
+        initialNumToRender={data.length}
+        maxToRenderPerBatch={data.length}
         keyExtractor={item => item.id}
       />
     );
@@ -133,8 +137,8 @@ class NotificationView extends PureComponent {
   };
 
   render() {
-    const { readAllNotification } = this.props;
-    const { filters } = this.state;
+    const { readAllNotification, getActivities } = this.props;
+    const { filters, selectedFilter } = this.state;
 
     const _notifications = this._getNotificationsArrays();
 
@@ -148,7 +152,16 @@ class NotificationView extends PureComponent {
           rightIconName="ios-checkmark"
           onRightIconPress={readAllNotification}
         />
-        <ScrollView style={styles.scrollView}>
+        <ScrollView
+          style={styles.scrollView}
+          onScroll={(e) => {
+            let paddingToBottom = 1;
+            paddingToBottom += e.nativeEvent.layoutMeasurement.height;
+            if (e.nativeEvent.contentOffset.y >= e.nativeEvent.contentSize.height - paddingToBottom) {
+              getActivities(selectedFilter, true);
+            }
+          }}
+        >
           <FlatList
             data={_notifications}
             renderItem={({ item, index }) => (

src/components/notificationLine/view/notificationLineView.js

@@ -59,7 +59,7 @@ class NotificationLineView extends PureComponent {
 
       _title = _percent + _title;
     }
-
+console.log('1 :');
     return (
       <TouchableHighlight onPress={() => this._handleOnNotificationPress()}>
         <View

src/screens/notification/container/notificationContainer.js

@@ -16,6 +16,7 @@ class NotificationContainer extends Component {
     super(props);
     this.state = {
       notifications: [],
+      lastNotificationId: null,
     };
   }
 
@@ -27,11 +28,18 @@ class NotificationContainer extends Component {
     }
   }
 
-  _getAvtivities = (type = null) => {
+  _getAvtivities = (type = null, loadMore = false) => {
     const { username } = this.props;
+    const { lastNotificationId, notifications } = this.state;
+    const since = loadMore ? lastNotificationId : null;
 
-    getActivities({ user: username, type }).then((res) => {
-      this.setState({ notifications: res });
+    getActivities({ user: username, type, since }).then((res) => {
+      const lastId = [...res].pop().id;
+
+      this.setState({
+        notifications: loadMore ? [...notifications, ...res] : res,
+        lastNotificationId: lastId,
+      });
     });
   };