stream-chat-react-native-core 5.27.0-beta.9 → 5.27.1-beta.1

package/src/components/Indicators/EmptyStateIndicator.tsx

@@ -27,7 +27,7 @@ export type EmptyStateProps = {
   listType?: 'channel' | 'message' | 'default';
 };
 
-export const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) => {
+export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
   const {
     theme: {
       colors: { black, grey, grey_gainsboro },
@@ -47,13 +47,13 @@ export const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) =>
             style={[styles.channelTitle, { color: black }, channelTitle]}
             testID='empty-channel-state-title'
           >
-            {t("Let's start chatting!")}
+            {t<string>("Let's start chatting!")}
           </Text>
           <Text
             style={[styles.channelDetails, { color: grey, width: vw(66) }, channelDetails]}
             testID='empty-channel-state-details'
           >
-            {t('How about sending your first message to a friend?')}
+            {t<string>('How about sending your first message to a friend?')}
           </Text>
         </View>
       );

package/src/components/Indicators/LoadingDot.tsx

@@ -18,7 +18,7 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
-export const LoadingDot: React.FC<Props> = (props) => {
+export const LoadingDot = (props: Props) => {
   const { diameter = 4, duration = 1500, offset = 0, style } = props;
   const halfDuration = duration / 2;
   const startingOffset = halfDuration - offset;

package/src/components/Indicators/LoadingDots.tsx

@@ -13,7 +13,7 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
-export const LoadingDots: React.FC<Props> = (props) => {
+export const LoadingDots = (props: Props) => {
   const { diameter = 4, duration = 1500, numberOfDots = 3, spacing: spacingProp, style } = props;
 
   const {

package/src/components/Indicators/LoadingErrorIndicator.tsx

@@ -27,7 +27,7 @@ type LoadingErrorWrapperProps = {
   onPress?: () => void;
 };
 
-const LoadingErrorWrapper: React.FC<LoadingErrorWrapperProps> = (props) => {
+const LoadingErrorWrapper = (props: React.PropsWithChildren<LoadingErrorWrapperProps>) => {
   const { children, onPress, text } = props;
 
   const {
@@ -54,7 +54,7 @@ export type LoadingErrorProps = {
   retry?: () => void;
 };
 
-export const LoadingErrorIndicator: React.FC<LoadingErrorProps> = (props) => {
+export const LoadingErrorIndicator = (props: LoadingErrorProps) => {
   const { listType, retry = () => null } = props;
 
   const {

package/src/components/Indicators/LoadingIndicator.tsx

@@ -18,7 +18,9 @@ const styles = StyleSheet.create({
   },
 });
 
-const LoadingIndicatorWrapper: React.FC<{ text: string }> = ({ text }) => {
+type LoadingIndicatorWrapperProps = { text: string };
+
+const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
   const {
     theme: {
       colors: { black, white_snow },
@@ -44,7 +46,7 @@ export type LoadingProps = {
 /**
  * UI Component for LoadingIndicator
  */
-export const LoadingIndicator: React.FC<LoadingProps> = (props) => {
+export const LoadingIndicator = (props: LoadingProps) => {
   const { listType, loadingText } = props;
 
   const { t } = useTranslationContext();

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -8,12 +8,12 @@ import {
   KeyboardAvoidingViewProps,
   KeyboardEvent,
   KeyboardEventListener,
+  KeyboardMetrics,
   LayoutAnimation,
   LayoutChangeEvent,
   LayoutRectangle,
   NativeEventSubscription,
   Platform,
-  ScreenRect,
   StatusBar,
   StyleSheet,
   View,
@@ -56,7 +56,7 @@ export class KeyboardCompatibleView extends React.Component<
     this.viewRef = React.createRef();
   }
 
-  _relativeKeyboardHeight(keyboardFrame: ScreenRect) {
+  _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics) {
     const frame = this._frame;
     if (!frame || !keyboardFrame) {
       return 0;
@@ -188,7 +188,10 @@ export class KeyboardCompatibleView extends React.Component<
     // Following if-else condition to avoid deprecated warning coming RN 0.65
     if (this._appStateSubscription?.remove) {
       this._appStateSubscription?.remove();
-    } else {
+    }
+    // @ts-ignore
+    else if (AppState.removeEventListener) {
+      // @ts-ignore
       AppState.removeEventListener('change', this._handleAppStateChange);
     }
     this.unsetKeyboardListeners();

package/src/components/KeyboardCompatibleView/KeyboardCompatibleViewFC.tsx

@@ -7,11 +7,11 @@ import {
   KeyboardAvoidingViewProps,
   KeyboardEvent,
   KeyboardEventListener,
+  KeyboardMetrics,
   LayoutAnimation,
   LayoutChangeEvent,
   LayoutRectangle,
   Platform,
-  ScreenRect,
   StyleSheet,
   View,
 } from 'react-native';
@@ -24,7 +24,7 @@ import { KeyboardProvider } from '../../contexts/keyboardContext/KeyboardContext
  *
  * Following piece of code has been mostly copied from KeyboardAvoidingView component, with few additional tweaks.
  */
-export const KeyboardCompatibleView: React.FC<KeyboardAvoidingViewProps> = ({
+export const KeyboardCompatibleView = ({
   behavior = Platform.OS === 'ios' ? 'padding' : 'position',
   children,
   contentContainerStyle,
@@ -32,7 +32,7 @@ export const KeyboardCompatibleView: React.FC<KeyboardAvoidingViewProps> = ({
   keyboardVerticalOffset = Platform.OS === 'ios' ? 86.5 : -300,
   style,
   ...props
-}) => {
+}: KeyboardAvoidingViewProps) => {
   const frame = useRef<LayoutRectangle>();
   const initialFrameHeight = useRef(0);
   const keyboardEvent = useRef<KeyboardEvent>();
@@ -92,11 +92,20 @@ export const KeyboardCompatibleView: React.FC<KeyboardAvoidingViewProps> = ({
       });
     };
 
-    AppState.addEventListener('change', handleAppStateChange);
+    const subscription = AppState.addEventListener('change', handleAppStateChange);
     setKeyboardListeners();
 
     return () => {
-      AppState.removeEventListener('change', handleAppStateChange);
+      // Following if-else condition to avoid deprecated warning coming RN 0.65
+      if (subscription?.remove) {
+        subscription?.remove();
+      }
+      // @ts-ignore
+      else if (AppState.removeEventListener) {
+        // @ts-ignore
+        AppState.removeEventListener('change', handleAppStateChange);
+      }
+
       unsetKeyboardListeners();
     };
   }, []);
@@ -130,7 +139,7 @@ export const KeyboardCompatibleView: React.FC<KeyboardAvoidingViewProps> = ({
     updateBottomIfNecessary();
   };
 
-  const relativeKeyboardHeight = (keyboardFrame: ScreenRect) => {
+  const relativeKeyboardHeight = (keyboardFrame: KeyboardMetrics) => {
     if (!frame.current || !keyboardFrame) {
       return 0;
     }

package/src/components/Message/Message.tsx

@@ -236,9 +236,10 @@ const MessageWithContext = <
   const isMessageTypeDeleted = props.message.type === 'deleted';
 
   const {
-    sendReaction,
     channel,
+    chatContext,
     deleteMessage: deleteMessageFromContext,
+    deleteReaction,
     disabled,
     dismissKeyboard,
     dismissKeyboardOnMessageTouch,
@@ -258,29 +259,29 @@ const MessageWithContext = <
     handleReaction: handleReactionProp,
     handleRetry,
     handleThreadReply,
-    chatContext,
+    isTargetedMessage,
     lastReceivedId,
     members,
     message,
     messageActions: messageActionsProp = defaultMessageActions,
+    MessageBounce,
     messageContentOrder: messageContentOrderProp,
     messagesContext,
-    MessageBounce,
     MessageSimple,
     onLongPress: onLongPressProp,
     onLongPressMessage: onLongPressMessageProp,
     onPress: onPressProp,
-    onPressMessage: onPressMessageProp,
     onPressIn: onPressInProp,
     onPressInMessage: onPressInMessageProp,
+    onPressMessage: onPressMessageProp,
     onThreadSelect,
     openThread,
     OverlayReactionList,
     preventPress,
     removeMessage,
-    deleteReaction,
     retrySendMessage,
     selectReaction,
+    sendReaction,
     setData,
     setEditingState,
     setOverlay,
@@ -291,7 +292,6 @@ const MessageWithContext = <
     style,
     supportedReactions,
     t,
-    isTargetedMessage,
     threadList = false,
     updateMessage,
   } = props;

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { LayoutChangeEvent, StyleSheet, TouchableOpacity, View } from 'react-native';
+import {
+  AnimatableNumericValue,
+  LayoutChangeEvent,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
 import { MessageTextContainer } from './MessageTextContainer';
 
@@ -260,7 +266,7 @@ const MessageContentWithContext = <
   };
 
   const getBorderRadiusFromTheme = () => {
-    const bordersFromTheme: Record<string, number | undefined> = {
+    const bordersFromTheme: Record<string, AnimatableNumericValue | undefined> = {
       borderBottomLeftRadius,
       borderBottomRightRadius,
       borderRadius,

package/src/components/Message/MessageSimple/MessageError.tsx

@@ -8,7 +8,7 @@ export type MessageErrorProps = {
   style?: StyleProp<ViewStyle>;
 };
 
-export const MessageError: React.FC<MessageErrorProps> = ({ style }) => {
+export const MessageError = ({ style }: MessageErrorProps) => {
   const {
     theme: {
       colors: { accent_red },

package/src/components/Message/MessageSimple/MessageFooter.tsx

@@ -91,7 +91,7 @@ const MessageFooterWithContext = <
               ]}
               testID='only-visible-to-you'
             >
-              {t('Only visible to you')}
+              {t<string>('Only visible to you')}
             </Text>
           </>
         )}
@@ -104,7 +104,7 @@ const MessageFooterWithContext = <
             metaText,
           ]}
         >
-          {formattedDate}
+          {formattedDate.toString()}
         </Text>
       </View>
     );
@@ -129,7 +129,7 @@ const MessageFooterWithContext = <
               deletedMetaText,
             ]}
           >
-            {t('Only visible to you')}
+            {t<string>('Only visible to you')}
           </Text>
         </>
       ) : null}
@@ -137,7 +137,9 @@ const MessageFooterWithContext = <
         <Text style={[{ color: grey }, messageUser]}>{message.user.name}</Text>
       ) : null}
       {showMessageStatus && <MessageStatus />}
-      <Text style={[{ color: grey, textAlign: alignment }, metaText]}>{formattedDate}</Text>
+      <Text style={[{ color: grey, textAlign: alignment }, metaText]}>
+        {formattedDate.toString()}
+      </Text>
     </View>
   );
 };

package/src/components/Message/MessageSimple/MessagePinnedHeader.tsx

@@ -55,8 +55,8 @@ const MessagePinnedHeaderWithContext = <
     >
       <PinHeader pathFill={grey} />
       <Text style={[{ color: grey }, styles.label, label]}>
-        {t('Pinned by')}{' '}
-        {message?.pinned_by?.id === client?.user?.id ? t('You') : message?.pinned_by?.name}
+        {t<string>('Pinned by')}{' '}
+        {message?.pinned_by?.id === client?.user?.id ? t<string>('You') : message?.pinned_by?.name}
       </Text>
     </View>
   );

package/src/components/Message/MessageSimple/MessageReplies.tsx

@@ -148,8 +148,8 @@ const MessageRepliesWithContext = <
       >
         <Text style={[styles.messageRepliesText, { color: accent_blue }, messageRepliesText]}>
           {message.reply_count === 1
-            ? t('1 Thread Reply')
-            : t('{{ replyCount }} Thread Replies', {
+            ? t<string>('1 Thread Reply')
+            : t<string>('{{ replyCount }} Thread Replies', {
                 replyCount: message.reply_count,
               })}
         </Text>

package/src/components/Message/MessageSimple/ReactionList.tsx

@@ -42,13 +42,13 @@ export type MessageReactions = {
   supportedReactions?: ReactionData[];
 };
 
-const Icon: React.FC<
-  Pick<IconProps, 'pathFill' | 'style'> & {
-    size: number;
-    supportedReactions: ReactionData[];
-    type: string;
-  }
-> = ({ pathFill, size, style, supportedReactions, type }) => {
+type Props = Pick<IconProps, 'pathFill' | 'style'> & {
+  size: number;
+  supportedReactions: ReactionData[];
+  type: string;
+};
+
+const Icon = ({ pathFill, size, style, supportedReactions, type }: Props) => {
   const ReactionIcon =
     supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;
 

package/src/components/Message/MessageSimple/__tests__/MessageAvatar.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { cleanup, render, waitFor } from '@testing-library/react-native';
+import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -19,32 +19,32 @@ describe('MessageAvatar', () => {
     const message = generateMessage({
       user: { ...staticUser, image: undefined },
     });
-    const { getByTestId, queryAllByTestId, rerender, toJSON } = render(
+    render(
       <ThemeProvider style={defaultTheme}>
         <MessageAvatar alignment='right' groupStyles={['bottom']} message={message} />
       </ThemeProvider>,
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-avatar')).toBeTruthy();
+      expect(screen.getByTestId('message-avatar')).toBeTruthy();
     });
 
-    rerender(
+    screen.rerender(
       <ThemeProvider style={defaultTheme}>
         <MessageAvatar alignment='right' groupStyles={[]} message={message} />
       </ThemeProvider>,
     );
 
     await waitFor(() => {
-      expect(getByTestId('spacer')).toBeTruthy();
-      expect(queryAllByTestId('avatar-image')).toHaveLength(0);
+      expect(screen.getByTestId('spacer')).toBeTruthy();
+      expect(screen.queryAllByTestId('avatar-image')).toHaveLength(0);
     });
 
     const staticMessage = generateStaticMessage('hi', {
       user: staticUser,
     });
 
-    rerender(
+    screen.rerender(
       <ThemeProvider style={defaultTheme}>
         <MessageAvatar
           alignment='left'
@@ -56,9 +56,9 @@ describe('MessageAvatar', () => {
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-avatar')).toBeTruthy();
-      expect(getByTestId('avatar-image')).toBeTruthy();
-      expect(toJSON()).toMatchSnapshot();
+      expect(screen.getByTestId('message-avatar')).toBeTruthy();
+      expect(screen.getByTestId('avatar-image')).toBeTruthy();
+      expect(screen.toJSON()).toMatchSnapshot();
     });
   });
 });

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 
-import { cleanup, render, waitFor } from '@testing-library/react-native';
+import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
 
@@ -58,10 +58,10 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = renderMessage({ message });
+    renderMessage({ message });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
     });
   });
 
@@ -69,13 +69,13 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = renderMessage({
+    renderMessage({
       message: { ...message, type: 'error' },
     });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-error')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-error')).toBeTruthy();
     });
   });
 
@@ -83,13 +83,13 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = renderMessage({
+    renderMessage({
       message: { ...message, status: 'failed' },
     });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-error')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-error')).toBeTruthy();
     });
   });
 
@@ -97,13 +97,13 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = renderMessage({
+    renderMessage({
       message: { ...message, type: 'deleted' },
     });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-deleted')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-deleted')).toBeTruthy();
     });
   });
 
@@ -113,7 +113,7 @@ describe('MessageContent', () => {
 
     const ContextMessageHeader = (props) => <View {...props} testID='message-header' />;
 
-    const { getByTestId } = render(
+    render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} MessageHeader={ContextMessageHeader}>
@@ -124,8 +124,8 @@ describe('MessageContent', () => {
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-header')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-header')).toBeTruthy();
     });
   });
 
@@ -135,7 +135,7 @@ describe('MessageContent', () => {
 
     const ContextMessageFooter = (props) => <View {...props} testID='message-footer' />;
 
-    const { getByTestId } = render(
+    render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} MessageFooter={ContextMessageFooter}>
@@ -146,8 +146,8 @@ describe('MessageContent', () => {
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-footer')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-footer')).toBeTruthy();
     });
   });
 
@@ -155,15 +155,15 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId, queryAllByTestId } = renderMessage({
+    renderMessage({
       message,
       MessageFooter: null,
     });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-status-time')).toBeTruthy();
-      expect(queryAllByTestId('message-footer')).toHaveLength(0);
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-status-time')).toBeTruthy();
+      expect(screen.queryAllByTestId('message-footer')).toHaveLength(0);
     });
   });
 
@@ -177,11 +177,11 @@ describe('MessageContent', () => {
       user,
     });
 
-    const { getByTestId } = renderMessage({ message });
+    renderMessage({ message });
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('gallery-container')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('gallery-container')).toBeTruthy();
     });
   });
 
@@ -196,13 +196,13 @@ describe('MessageContent', () => {
       user,
     });
 
-    const { getByTestId, queryAllByA11yLabel, queryAllByTestId } = renderMessage({ message });
+    renderMessage({ message });
 
-    const fileAttachments = queryAllByTestId('file-attachment');
-    const audioAttachments = queryAllByA11yLabel('audio-attachment-preview');
+    const fileAttachments = screen.queryAllByTestId('file-attachment');
+    const audioAttachments = screen.queryAllByLabelText('audio-attachment-preview');
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
       expect(fileAttachments).toHaveLength(1);
       expect(audioAttachments).toHaveLength(1);
     });
@@ -225,7 +225,7 @@ describe('MessageContent', () => {
       return <MessageContent {...props} />;
     };
 
-    const { getByTestId } = render(
+    render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} MessageContent={MessageContentWithMockedMessageContentWidth}>
@@ -236,8 +236,8 @@ describe('MessageContent', () => {
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('reaction-list')).toBeTruthy();
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('reaction-list')).toBeTruthy();
     });
   });
 });

package/src/components/Message/MessageSimple/__tests__/MessagePinnedHeader.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { cleanup, render, waitFor } from '@testing-library/react-native';
+import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -19,17 +19,17 @@ describe('MessagePinnedHeader', () => {
     const message = generateMessage({
       user: { ...staticUser, image: undefined },
     });
-    const { getByTestId, rerender, toJSON } = render(
+    render(
       <ThemeProvider style={defaultTheme}>
         <MessagePinnedHeader alignment='right' message={message} />
       </ThemeProvider>,
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-pinned')).toBeTruthy();
+      expect(screen.getByTestId('message-pinned')).toBeTruthy();
     });
 
-    rerender(
+    screen.rerender(
       <ThemeProvider style={defaultTheme}>
         <MessagePinnedHeader alignment='right' message={message} />
       </ThemeProvider>,
@@ -39,15 +39,15 @@ describe('MessagePinnedHeader', () => {
       user: staticUser,
     });
 
-    rerender(
+    screen.rerender(
       <ThemeProvider style={defaultTheme}>
         <MessagePinnedHeader alignment='left' message={staticMessage} />
       </ThemeProvider>,
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-pinned')).toBeTruthy();
-      expect(toJSON()).toMatchSnapshot();
+      expect(screen.getByTestId('message-pinned')).toBeTruthy();
+      expect(screen.toJSON()).toMatchSnapshot();
     });
   });
 });