stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  AccessibilityInfo,
   AppState,
   AppStateStatus,
   Dimensions,
@@ -39,7 +40,7 @@ export class KeyboardCompatibleView extends React.Component<
     KeyboardAvoidingViewProps,
     'behavior' | 'enabled' | 'keyboardVerticalOffset'
   > = {
-    behavior: Platform.OS === 'ios' ? 'padding' : 'position',
+    behavior: 'padding',
     enabled: true,
     keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageComposer height
   };
@@ -62,35 +63,40 @@ export class KeyboardCompatibleView extends React.Component<
     this.viewRef = React.createRef();
   }
 
-  _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics) {
+  async _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics): Promise<number> {
     const frame = this._frame;
-    /**
-     * With iOS 14 & Reduce Motion > Prefer Cross-Fade Transitions enabled, the keyboard position
-     * height is reported differently (0 instead of Y position value) which caused the view to take full height
-     * of the screen.
-     */
-    if (!frame || !keyboardFrame || keyboardFrame.screenY === 0) {
+    if (!frame || !keyboardFrame) {
+      return 0;
+    }
+
+    if (
+      Platform.OS === 'ios' &&
+      keyboardFrame.screenY === 0 &&
+      (await AccessibilityInfo.prefersCrossFadeTransitions())
+    ) {
       return 0;
     }
 
     const keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset ?? 0);
-    const relativeHeight = frame.y + frame.height - keyboardY;
 
-    /**
-     * When the StatusBar is translucent there is an issue
-     * where the relative keyboard height is returned incorrectly
-     * instead of 0 when closed.
-     */
+    if (this.props.behavior === 'height') {
+      return Math.max(this.state.bottom + frame.y + frame.height - keyboardY, 0);
+    }
+
+    // Calculate the displacement needed for the view such that it
+    // no longer overlaps with the keyboard
+    const relativeHeight = Math.max(frame.y + frame.height - keyboardY, 0);
+
     if (Platform.OS === 'android') {
       const barHeights = Dimensions.get('screen').height - Dimensions.get('window').height;
-      if (relativeHeight <= Math.max(barHeights, StatusBar.currentHeight ?? 0)) {
+      const systemInsetFloor = Math.max(barHeights, StatusBar.currentHeight ?? 0);
+
+      if (relativeHeight <= systemInsetFloor) {
         return 0;
       }
     }
 
-    // Calculate the displacement needed for the view such that it
-    // no longer overlaps with the keyboard
-    return Math.max(relativeHeight, 0);
+    return relativeHeight;
   }
 
   _onKeyboardChange: KeyboardEventListener = (event) => {
@@ -98,7 +104,12 @@ export class KeyboardCompatibleView extends React.Component<
     this._updateBottomIfNecessary();
   };
 
-  _onLayout: (event: LayoutChangeEvent) => void = (event) => {
+  _onKeyboardHide: KeyboardEventListener = () => {
+    this._keyboardEvent = null;
+    this._updateBottomIfNecessary();
+  };
+
+  _onLayout: (event: LayoutChangeEvent) => void = async (event) => {
     event.persist();
 
     const oldFrame = this._frame;
@@ -110,7 +121,7 @@ export class KeyboardCompatibleView extends React.Component<
 
     // update bottom height for the first time or when the height is changed
     if (!oldFrame || oldFrame.height !== this._frame.height) {
-      this._updateBottomIfNecessary();
+      await this._updateBottomIfNecessary();
     }
 
     if (this.props.onLayout) {
@@ -127,14 +138,14 @@ export class KeyboardCompatibleView extends React.Component<
     }
   };
 
-  _updateBottomIfNecessary = () => {
+  _updateBottomIfNecessary = async () => {
     if (this._keyboardEvent == null) {
       this._setBottom(0);
       return;
     }
 
     const { duration, easing, endCoordinates } = this._keyboardEvent;
-    const height = this._relativeKeyboardHeight(endCoordinates);
+    const height = await this._relativeKeyboardHeight(endCoordinates);
 
     if (this._bottom === height) {
       return;
@@ -142,7 +153,8 @@ export class KeyboardCompatibleView extends React.Component<
 
     this._setBottom(height);
 
-    if (duration && easing) {
+    const enabled = this.props.enabled ?? true;
+    if (enabled && duration && easing) {
       LayoutAnimation.configureNext({
         // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
         duration: duration > 10 ? duration : 10,
@@ -169,11 +181,12 @@ export class KeyboardCompatibleView extends React.Component<
   setKeyboardListeners = () => {
     if (Platform.OS === 'ios') {
       this._subscriptions = [
-        Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
+        Keyboard.addListener('keyboardWillHide', this._onKeyboardHide),
+        Keyboard.addListener('keyboardWillShow', this._onKeyboardChange),
       ];
     } else {
       this._subscriptions = [
-        Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
+        Keyboard.addListener('keyboardDidHide', this._onKeyboardHide),
         Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
       ];
     }
@@ -218,6 +231,11 @@ export class KeyboardCompatibleView extends React.Component<
   }
 
   componentDidMount() {
+    if (!Keyboard.isVisible()) {
+      this._keyboardEvent = null;
+      this._setBottom(0);
+    }
+
     this._appStateSubscription = AppState.addEventListener('change', this._handleAppStateChange);
     this.setKeyboardListeners();
   }

package/src/components/KeyboardCompatibleView/KeyboardControllerAvoidingView.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 
 import {
   Keyboard,
-  Platform,
   KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps,
 } from 'react-native';
 
@@ -51,12 +50,7 @@ export const KeyboardCompatibleView = (props: KeyboardCompatibleViewProps) => {
       </KeyboardProvider>
     );
   }
-  const compatibleBehavior =
-    behavior === 'translate-with-padding'
-      ? Platform.OS === 'ios'
-        ? 'padding'
-        : 'position'
-      : behavior;
+  const compatibleBehavior = behavior === 'translate-with-padding' ? 'padding' : behavior;
 
   return (
     <KeyboardCompatibleViewDefault behavior={compatibleBehavior} {...rest}>

package/src/components/Message/Message.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   GestureResponderEvent,
+  I18nManager,
   StyleProp,
   StyleSheet,
-  useWindowDimensions,
   View,
   ViewStyle,
 } from 'react-native';
@@ -54,6 +54,7 @@ import { isVideoPlayerAvailable, NativeHandlers } from '../../native';
 import {
   closeOverlay,
   openOverlay,
+  Rect,
   setOverlayBottomH,
   setOverlayMessageH,
   setOverlayTopH,
@@ -254,7 +255,6 @@ export type MessagePropsWithContext = Pick<
  * each individual Message component.
  */
 const MessageWithContext = (props: MessagePropsWithContext) => {
-  const [isErrorInMessage, setIsErrorInMessage] = useState(false);
   const [showMessageReactions, setShowMessageReactions] = useState<boolean>(false);
   const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
@@ -332,16 +332,18 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const isMessageTypeDeleted = message.type === 'deleted';
   const { client } = chatContext;
 
-  const [rect, setRect] = useState<{ w: number; h: number; x: number; y: number } | undefined>(
-    undefined,
-  );
-  const { width: screenW } = useWindowDimensions();
+  const rectRef = useRef<Rect>(undefined);
+  const bubbleRect = useRef<Rect>(undefined);
+  const contextMenuAnchorRef = useRef<View>(null);
 
   const showMessageOverlay = useStableCallback(async () => {
     dismissKeyboard();
     try {
       const layout = await measureInWindow(messageWrapperRef, insets);
-      setRect(layout);
+      const bubbleLayout = await measureInWindow(contextMenuAnchorRef, insets).catch(() => layout);
+
+      rectRef.current = layout;
+      bubbleRect.current = bubbleLayout;
       setOverlayMessageH(layout);
       openOverlay({ id: messageOverlayId, messageId: message.id });
     } catch (e) {
@@ -395,7 +397,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     }
     const quotedMessage = message.quoted_message;
     if (error) {
-      setIsErrorInMessage(true);
       /**
        * If its a Blocked message, we don't do anything as per specs.
        */
@@ -421,6 +422,11 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       : isMyMessage
         ? 'right'
         : 'left';
+  const overlayItemAlignment = I18nManager.isRTL
+    ? alignment === 'right'
+      ? 'left'
+      : 'right'
+    : alignment;
 
   /**
    * attachments contain files/images or other attachments
@@ -638,7 +644,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           deleteMessage,
           dismissOverlay,
           editMessage,
-          error: isErrorInMessage,
+          error: errorOrFailed,
           flagMessage,
           isMyMessage,
           isThreadMessage,
@@ -698,6 +704,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     actionsEnabled,
     alignment,
     channel,
+    contextMenuAnchorRef,
     deliveredToCount,
     dismissOverlay,
     files: attachments.files,
@@ -815,6 +822,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const styles = useStyles({
     highlightedMessage: (isTargetedMessage || message.pinned) && !isMessageTypeDeleted,
   });
+  const rect = rectRef.current;
+  const overlayItemsAnchorRect = bubbleRect.current ?? rect;
 
   if (!(isMessageTypeDeleted || messageContentOrder.length)) {
     return null;
@@ -841,7 +850,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
         ) : null}
         {/*TODO: V9: Find a way to separate these in a dedicated file*/}
         <Portal hostName={overlayActive && rect ? 'top-item' : undefined}>
-          {overlayActive && rect ? (
+          {overlayActive && rect && overlayItemsAnchorRect ? (
             <View
               onLayout={(e) => {
                 const { width: w, height: h } = e.nativeEvent.layout;
@@ -849,7 +858,10 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                 setOverlayTopH({
                   h,
                   w,
-                  x: isMyMessage ? screenW - rect.x - w : rect.x,
+                  x:
+                    overlayItemAlignment === 'right'
+                      ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
+                      : overlayItemsAnchorRect.x,
                   y: rect.y - h,
                 });
               }}
@@ -865,7 +877,9 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           hostName={overlayActive ? 'message-overlay' : undefined}
           style={overlayActive && rect ? { width: rect.w } : undefined}
         >
-          <MessageItemView ref={messageWrapperRef} />
+          <View ref={messageWrapperRef}>
+            <MessageItemView />
+          </View>
         </Portal>
         {showMessageReactions ? (
           <BottomSheetModal
@@ -883,14 +897,17 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           </BottomSheetModal>
         ) : null}
         <Portal hostName={overlayActive && rect ? 'bottom-item' : undefined}>
-          {overlayActive && rect ? (
+          {overlayActive && rect && overlayItemsAnchorRect ? (
             <View
               onLayout={(e) => {
                 const { width: w, height: h } = e.nativeEvent.layout;
                 setOverlayBottomH({
                   h,
                   w,
-                  x: isMyMessage ? screenW - rect.x - w : rect.x,
+                  x:
+                    overlayItemAlignment === 'right'
+                      ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
+                      : overlayItemsAnchorRect.x,
                   y: rect.y + rect.h,
                 });
               }}

package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { Pin } from '../../../../icons/Pin';
+import { Pin } from '../../../../icons/pin';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 

package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { Bookmark } from '../../../../icons/Bookmark';
+import { Bookmark } from '../../../../icons/save';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 

package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx

@@ -13,7 +13,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useThreadContext } from '../../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
-import { ArrowUpRight } from '../../../../icons/ArrowUpRight';
+import { ArrowUpRight } from '../../../../icons/arrow-up-right';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';