Merge pull request #535 from GetStream/improve-non-immutable-rendering

Improve non immutable rendering

Author: nhannah

package.json

@@ -71,7 +71,7 @@
     "path": "0.12.7",
     "react-art": "^16.8.6",
     "react-native-markdown-package": "1.8.1",
-    "stream-chat": "3.0.0"
+    "stream-chat": "3.1.2"
   },
   "peerDependencies": {
     "react": "^16.8.6",

src/components/Message/Message.tsx

@@ -51,6 +51,7 @@ import {
 } from '../../contexts/messageOverlayContext/MessageOverlayContext';
 import {
   MessagesContextValue,
+  MessagesProvider,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import {
@@ -141,6 +142,8 @@ export type MessagePropsWithContext<
   | 'isAdmin'
   | 'isModerator'
   | 'isOwner'
+  | 'members'
+  | 'readEventsEnabled'
 > &
   Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
   Pick<KeyboardContextValue, 'dismissKeyboard'> &
@@ -295,6 +298,7 @@ const MessageWithContext = <
     isModerator,
     isOwner,
     lastReceivedId,
+    members,
     message,
     messageActions: messageActionsProp,
     messageContentOrder: messageContentOrderProp,
@@ -310,6 +314,7 @@ const MessageWithContext = <
     OverlayReactionList,
     preventPress,
     reactionsEnabled,
+    readEventsEnabled,
     removeMessage,
     repliesEnabled,
     reply: replyProp,
@@ -934,6 +939,8 @@ const MessageWithContext = <
     alignment,
     animatedLongPress,
     canModifyMessage,
+    channel,
+    disabled,
     files: attachments.files,
     groupStyles: forwardedGroupStyles,
     handleAction,
@@ -944,6 +951,7 @@ const MessageWithContext = <
       forwardedGroupStyles[0] === 'single' ||
       forwardedGroupStyles[0] === 'bottom',
     lastReceivedId,
+    members,
     message,
     messageContentOrder,
     onLongPress: animatedLongPress
@@ -966,6 +974,7 @@ const MessageWithContext = <
     otherAttachments: attachments.other,
     preventPress,
     reactions,
+    readEventsEnabled,
     showAvatar,
     showMessageOverlay,
     showMessageStatus:
@@ -1048,9 +1057,18 @@ const MessageWithContext = <
                 targetedStyle,
               ]}
             />
-            <MessageProvider value={messageContext}>
-              <MessageSimple />
-            </MessageProvider>
+            {/**
+             * MessagesProvider is here to prevent and issue where FlatList
+             * and context re-rendering causes memoization to be skipped.
+             * We will separate messages to another context and keep the
+             * components currently in the same context apart to remove
+             * the need for this in a future PR.
+             */}
+            <MessagesProvider value={messagesContext}>
+              <MessageProvider value={messageContext}>
+                <MessageSimple />
+              </MessageProvider>
+            </MessagesProvider>
           </Animated.View>
         </TapGestureHandler>
       </Animated.View>
@@ -1206,6 +1224,8 @@ export const Message = <
     isAdmin,
     isModerator,
     isOwner,
+    members,
+    readEventsEnabled,
   } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { dismissKeyboard } = useKeyboardContext();
@@ -1227,8 +1247,10 @@ export const Message = <
         isAdmin,
         isModerator,
         isOwner,
+        members,
         messagesContext,
         openThread,
+        readEventsEnabled,
         setData,
         setOverlay,
         t,

src/components/Message/MessageSimple/MessageContent.tsx

@@ -9,10 +9,6 @@ import merge from 'lodash/merge';
 
 import { MessageTextContainer } from './MessageTextContainer';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../../contexts/channelContext/ChannelContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -83,25 +79,23 @@ export type MessageContentPropsWithContext<
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType
 > = Pick<
-  ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-  'disabled' | 'members'
+  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  | 'alignment'
+  | 'disabled'
+  | 'groupStyles'
+  | 'hasReactions'
+  | 'lastGroupMessage'
+  | 'members'
+  | 'message'
+  | 'messageContentOrder'
+  | 'onLongPress'
+  | 'onlyEmojis'
+  | 'onPress'
+  | 'otherAttachments'
+  | 'preventPress'
+  | 'showMessageStatus'
+  | 'threadList'
 > &
-  Pick<
-    MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    | 'alignment'
-    | 'groupStyles'
-    | 'hasReactions'
-    | 'lastGroupMessage'
-    | 'message'
-    | 'messageContentOrder'
-    | 'onLongPress'
-    | 'onlyEmojis'
-    | 'onPress'
-    | 'otherAttachments'
-    | 'preventPress'
-    | 'showMessageStatus'
-    | 'threadList'
-  > &
   Pick<
     MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
     | 'additionalTouchableProps'
@@ -553,12 +547,13 @@ export const MessageContent = <
 >(
   props: MessageContentProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { disabled, members } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
   const {
     alignment,
+    disabled,
     groupStyles,
     hasReactions,
     lastGroupMessage,
+    members,
     message,
     messageContentOrder,
     onLongPress,

src/components/Message/MessageSimple/MessageSimple.tsx

@@ -1,10 +1,6 @@
 import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../../contexts/channelContext/ChannelContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -41,11 +37,10 @@ export type MessageSimplePropsWithContext<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType
-> = Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'channel'> &
-  Pick<
-    MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    'alignment' | 'groupStyles' | 'hasReactions' | 'message'
-  > &
+> = Pick<
+  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  'alignment' | 'channel' | 'groupStyles' | 'hasReactions' | 'message'
+> &
   Pick<
     MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
     'MessageAvatar' | 'MessageContent' | 'ReactionList'
@@ -216,16 +211,13 @@ export const MessageSimple = <
 >(
   props: MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { channel } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { alignment, groupStyles, hasReactions, message } = useMessageContext<
-    At,
-    Ch,
-    Co,
-    Ev,
-    Me,
-    Re,
-    Us
-  >();
+  const {
+    alignment,
+    channel,
+    groupStyles,
+    hasReactions,
+    message,
+  } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { MessageAvatar, MessageContent, ReactionList } = useMessagesContext<
     At,
     Ch,

src/components/Message/MessageSimple/MessageStatus.tsx

@@ -3,10 +3,6 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { isMessagesWithStylesAndReadBy } from '../../MessageList/hooks/useMessageList';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../../contexts/channelContext/ChannelContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -51,9 +47,8 @@ export type MessageStatusPropsWithContext<
   Us extends DefaultUserType = DefaultUserType
 > = Pick<
   MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-  'message' | 'threadList'
-> &
-  Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'readEventsEnabled'>;
+  'message' | 'readEventsEnabled' | 'threadList'
+>;
 
 const MessageStatusWithContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -191,8 +186,7 @@ export const MessageStatus = <
 >(
   props: MessageStatusProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { readEventsEnabled } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { message, threadList } = useMessageContext<
+  const { message, readEventsEnabled, threadList } = useMessageContext<
     At,
     Ch,
     Co,

src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -63,7 +63,6 @@ export type MessageTextContainerPropsWithContext<
     MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
     'markdownRules' | 'MessageText'
   > & {
-    theme: { theme: Theme };
     markdownStyles?: MarkdownStyle;
     styles?: Partial<{
       textContainer: StyleProp<ViewStyle>;
@@ -81,6 +80,8 @@ const MessageTextContainerWithContext = <
 >(
   props: MessageTextContainerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
+  const theme = useTheme();
+
   const {
     markdownRules,
     markdownStyles: markdownStylesProp = {},
@@ -89,7 +90,6 @@ const MessageTextContainerWithContext = <
     onLongPress,
     onlyEmojis,
     styles: stylesProp = {},
-    theme,
   } = props;
 
   const {
@@ -203,7 +203,6 @@ export const MessageTextContainer = <
     Re,
     Us
   >();
-  const theme = useTheme();
 
   return (
     <MemoizedMessageTextContainer
@@ -213,7 +212,6 @@ export const MessageTextContainer = <
         MessageText,
         onLongPress,
         onlyEmojis,
-        theme,
       }}
       {...props}
     />

src/components/Message/hooks/useCreateMessageContext.ts

@@ -27,6 +27,8 @@ export const useCreateMessageContext = <
   alignment,
   animatedLongPress,
   canModifyMessage,
+  channel,
+  disabled,
   files,
   groupStyles,
   handleAction,
@@ -35,6 +37,7 @@ export const useCreateMessageContext = <
   isMyMessage,
   lastGroupMessage,
   lastReceivedId,
+  members,
   message,
   messageContentOrder,
   onLongPress,
@@ -44,6 +47,7 @@ export const useCreateMessageContext = <
   otherAttachments,
   preventPress,
   reactions,
+  readEventsEnabled,
   showAvatar,
   showMessageOverlay,
   showMessageStatus,
@@ -62,6 +66,7 @@ export const useCreateMessageContext = <
   }${message.updated_at}${message.deleted_at}${readBy}${message.status}${
     message.type
   }${message.text}${message.reply_count}`;
+  const membersValue = JSON.stringify(members);
 
   const messageContext: MessageContextValue<
     At,
@@ -77,6 +82,8 @@ export const useCreateMessageContext = <
       alignment,
       animatedLongPress,
       canModifyMessage,
+      channel,
+      disabled,
       files,
       groupStyles,
       handleAction,
@@ -85,6 +92,7 @@ export const useCreateMessageContext = <
       isMyMessage,
       lastGroupMessage,
       lastReceivedId,
+      members,
       message,
       messageContentOrder,
       onLongPress,
@@ -94,6 +102,7 @@ export const useCreateMessageContext = <
       otherAttachments,
       preventPress,
       reactions,
+      readEventsEnabled,
       showAvatar,
       showMessageOverlay,
       showMessageStatus,
@@ -103,12 +112,15 @@ export const useCreateMessageContext = <
       actionsEnabled,
       alignment,
       animatedLongPress,
+      disabled,
       groupStylesLength,
       hasReactions,
       lastGroupMessage,
       lastReceivedId,
+      membersValue,
       messageValue,
       reactionsValue,
+      readEventsEnabled,
       showAvatar,
       showMessageStatus,
       threadList,

src/components/MessageList/MessageList.tsx

@@ -692,6 +692,10 @@ const MessageListWithContext = <
       closePicker();
     }
   };
+  const onScrollBeginDrag = () =>
+    !hasMoved && selectedPicker && setHasMoved(true);
+  const onScrollEndDrag = () =>
+    hasMoved && selectedPicker && setHasMoved(false);
 
   if (!FlatList) return null;
 
@@ -735,8 +739,8 @@ const MessageListWithContext = <
         }}
         onEndReached={threadList ? loadMoreThread : loadMore}
         onScroll={handleScroll}
-        onScrollBeginDrag={() => setHasMoved(true)}
-        onScrollEndDrag={() => setHasMoved(false)}
+        onScrollBeginDrag={onScrollBeginDrag}
+        onScrollEndDrag={onScrollEndDrag}
         onTouchEnd={dismissImagePicker}
         onViewableItemsChanged={onViewableItemsChanged.current}
         ref={(ref) => {