stream-chat-react-native-core 5.12.0-beta.2 → 5.12.0-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.12.0-beta.2",
+  "version": "5.12.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/MessageList/MessageList.tsx

@@ -1012,6 +1012,17 @@ const MessageListWithContext = <
     return null;
   };
 
+  // We need to omit the style related props from the additionalFlatListProps and add them directly instead of spreading
+  let additionalFlatListPropsExcludingStyle:
+    | Omit<NonNullable<typeof additionalFlatListProps>, 'style' | 'contentContainerStyle'>
+    | undefined;
+
+  if (additionalFlatListProps) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { contentContainerStyle, style, ...rest } = additionalFlatListProps;
+    additionalFlatListPropsExcludingStyle = rest;
+  }
+
   return (
     <View
       style={[styles.container, { backgroundColor: white_snow }, container]}
@@ -1021,7 +1032,11 @@ const MessageListWithContext = <
         CellRendererComponent={
           shouldApplyAndroidWorkaround ? InvertedCellRendererComponent : undefined
         }
-        contentContainerStyle={[styles.contentContainer, contentContainer]}
+        contentContainerStyle={[
+          styles.contentContainer,
+          additionalFlatListProps?.contentContainerStyle,
+          contentContainer,
+        ]}
         data={messageList}
         /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
         extraData={disabled || !hasNoMoreRecentMessagesToLoad}
@@ -1049,11 +1064,12 @@ const MessageListWithContext = <
         style={[
           styles.listContainer,
           listContainer,
+          additionalFlatListProps?.style,
           shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined,
         ]}
         testID='message-flat-list'
         viewabilityConfig={flatListViewabilityConfig}
-        {...additionalFlatListProps}
+        {...additionalFlatListPropsExcludingStyle}
       />
       {!loading && (
         <>

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -43,6 +43,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "flexGrow": 1,
               "paddingBottom": 4,
             },
+            undefined,
             Object {},
           ]
         }
@@ -180,6 +181,7 @@ exports[`Thread should match thread snapshot 1`] = `
               },
               Object {},
               undefined,
+              undefined,
             ],
           ]
         }

package/src/hooks/useAppStateListener.ts

@@ -1,22 +1,25 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { AppState, AppStateStatus } from 'react-native';
 
 export const useAppStateListener = (onForeground?: () => void, onBackground?: () => void) => {
   const appStateRef = useRef(AppState.currentState);
-  const handleAppStateChange = useCallback(
-    (nextAppState: AppStateStatus) => {
+  const onForegroundRef = useRef(onForeground);
+  const onBackgroundRef = useRef(onBackground);
+
+  // setting refs to avoid passing the functions as dependencies to useEffect
+  onForegroundRef.current = onForeground;
+  onBackgroundRef.current = onBackground;
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
       const prevAppState = appStateRef.current;
       if (prevAppState.match(/inactive|background/) && nextAppState === 'active') {
-        onForeground?.();
+        onForegroundRef.current?.();
       } else if (prevAppState === 'active' && nextAppState.match(/inactive|background/)) {
-        onBackground?.();
+        onBackgroundRef.current?.();
       }
       appStateRef.current = nextAppState;
-    },
-    [onBackground, onForeground],
-  );
-
-  useEffect(() => {
+    };
     const subscription = AppState.addEventListener('change', handleAppStateChange);
 
     return () => {
@@ -28,5 +31,5 @@ export const useAppStateListener = (onForeground?: () => void, onBackground?: ()
         AppState.removeEventListener('change', handleAppStateChange);
       }
     };
-  }, [handleAppStateChange]);
+  }, []);
 };

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.12.0-beta.2"
+  "version": "5.12.0-beta.3"
 }