Small fix for loading channel at very first messages

Author: vishalnarkhede

src/components/Channel/Channel.tsx

@@ -1296,7 +1296,7 @@ const ChannelWithContext = <
     Me,
     Re,
     Us
-  >['loadMore'] = async () => {
+  >['loadMore'] = async (limit = 20) => {
     if (loadingMore || hasMore === false) {
       return;
     }
@@ -1313,7 +1313,6 @@ const ChannelWithContext = <
     }
 
     const oldestID = oldestMessage && oldestMessage.id;
-    const limit = 20;
 
     try {
       if (channel) {
@@ -1340,7 +1339,7 @@ const ChannelWithContext = <
     Me,
     Re,
     Us
-  >['loadMoreRecent'] = async () => {
+  >['loadMoreRecent'] = async (limit = 5) => {
     if (channel?.state.isUpToDate) {
       return;
     }
@@ -1356,7 +1355,7 @@ const ChannelWithContext = <
 
     try {
       if (channel) {
-        await queryAfterMessage(recentMessage.id);
+        await queryAfterMessage(recentMessage.id, limit);
         loadMoreRecentFinished(channel.state.messages);
       }
     } catch (err) {

src/components/MessageList/MessageList.tsx

@@ -8,7 +8,6 @@ import React, {
 import {
   FlatListProps,
   FlatList as FlatListType,
-  Platform,
   ScrollViewProps,
   StyleSheet,
   View,
@@ -425,19 +424,6 @@ const MessageListWithContext = <
       setTimeout(() => {
         initialScrollSet.current = true;
       }, 500);
-    } else if (
-      // On android, you can't overscroll. So we are going to scroll up just a little
-      // which gives user some offset to scroll down and trigger onStartReached.
-      Platform.OS === 'android' &&
-      !channel?.state.isUpToDate &&
-      flatListRef.current
-    ) {
-      flatListRef.current.scrollToOffset({
-        offset: 50,
-      });
-      setTimeout(() => {
-        initialScrollSet.current = true;
-      }, 500);
     } else if (!initialScrollSet.current) {
       initialScrollSet.current = true;
     }
@@ -547,6 +533,19 @@ const MessageListWithContext = <
       setScrollToBottomButtonVisible(true);
     }
 
+    if (
+      !channel?.state.isUpToDate &&
+      flatListRef.current &&
+      messageListLengthBeforeUpdate.current === 0 &&
+      messageListLengthAfterUpdate < 10
+    ) {
+      /**
+       * Trigger onStartReached on first load, if messages are not enough to fill the screen.
+       * This is important especially for android, where you can't overscroll.
+       */
+      maybeCallOnStartReached(10);
+    }
+
     /**
      * channelLastRead and topMessage are only used for setting initial scroll.
      * So lets not set it if `initialScrollToFirstUnreadMessage` prop is false.
@@ -679,7 +678,7 @@ const MessageListWithContext = <
    * 2. Ensures that we call `loadMoreRecent`, once per content length
    * 3. If the call to `loadMore` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
-  const maybeCallOnStartReached = () => {
+  const maybeCallOnStartReached = (limit?: number) => {
     // If onStartReached has already been called for given data length, then ignore.
     if (
       messageList?.length &&
@@ -708,12 +707,12 @@ const MessageListWithContext = <
     // If onEndReached is in progress, better to wait for it to finish for smooth UX
     if (onEndReachedInPromise.current) {
       onEndReachedInPromise.current.finally(() => {
-        onStartReachedInPromise.current = loadMoreRecent()
+        onStartReachedInPromise.current = loadMoreRecent(limit)
           .then(callback)
           .catch(onError);
       });
     } else {
-      onStartReachedInPromise.current = loadMoreRecent()
+      onStartReachedInPromise.current = loadMoreRecent(limit)
         .then(callback)
         .catch(onError);
     }

src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -39,11 +39,11 @@ export type PaginatedMessageListContextValue<
   /**
    * Load more messages
    */
-  loadMore: () => Promise<void>;
+  loadMore: (limit: number) => Promise<void>;
   /**
    * Load more recent messages
    */
-  loadMoreRecent: () => Promise<void>;
+  loadMoreRecent: (limit: number) => Promise<void>;
   /**
    * Messages from client state
    */