Fix Emoji picker's position changes on decreasing the screen size

src/components/EmojiPicker/EmojiPicker.js

@@ -29,26 +29,12 @@ const EmojiPicker = forwardRef((props, ref) => {
     });
     const [reportAction, setReportAction] = useState({});
     const emojiPopoverAnchorOrigin = useRef(DEFAULT_ANCHOR_ORIGIN);
+    const emojiPopoverAnchorRef = useRef(null);
     const emojiPopoverAnchor = useRef(null);
     const onModalHide = useRef(() => {});
     const onEmojiSelected = useRef(() => {});
     const emojiSearchInput = useRef();
 
-    useEffect(() => {
-        if (isEmojiPickerVisible) {
-            Keyboard.dismiss();
-        }
-
-        const emojiPopoverDimensionListener = Dimensions.addEventListener('change', () => {
-            calculateAnchorPosition(emojiPopoverAnchor.current).then((value) => {
-                setEmojiPopoverAnchorPosition(value);
-            });
-        });
-        return () => {
-            emojiPopoverDimensionListener.remove();
-        };
-    }, [isEmojiPickerVisible]);
-
     /**
      * Show the emoji picker menu.
      *
@@ -62,7 +48,8 @@ const EmojiPicker = forwardRef((props, ref) => {
     const showEmojiPicker = (onModalHideValue, onEmojiSelectedValue, emojiPopoverAnchorValue, anchorOrigin, onWillShow = () => {}, reportActionValue) => {
         onModalHide.current = onModalHideValue;
         onEmojiSelected.current = onEmojiSelectedValue;
-        emojiPopoverAnchor.current = emojiPopoverAnchorValue;
+        emojiPopoverAnchorRef.current = emojiPopoverAnchorValue;
+        emojiPopoverAnchor.current = emojiPopoverAnchorValue.current;
 
         if (emojiPopoverAnchor.current) {
             // Drop focus to avoid blue focus ring.
@@ -87,6 +74,7 @@ const EmojiPicker = forwardRef((props, ref) => {
         if (isNavigating) {
             onModalHide.current = () => {};
         }
+        emojiPopoverAnchorRef.current = null;
         emojiPopoverAnchor.current = null;
         setIsEmojiPickerVisible(false);
     };
@@ -132,6 +120,33 @@ const EmojiPicker = forwardRef((props, ref) => {
 
     useImperativeHandle(ref, () => ({showEmojiPicker, isActiveReportAction, hideEmojiPicker, isEmojiPickerVisible}));
 
+    useEffect(() => {
+        if (isEmojiPickerVisible) {
+            Keyboard.dismiss();
+        }
+
+        const emojiPopoverDimensionListener = Dimensions.addEventListener('change', () => {
+            if (!isEmojiPickerVisible) {
+                return;
+            }
+
+            if (!emojiPopoverAnchorRef.current || !emojiPopoverAnchorRef.current.current) {
+                // In small screen width, the window size change might be due to keyboard open/hide, we should avoid hide EmojiPicker in those cases
+                if (!props.isSmallScreenWidth) {
+                    hideEmojiPicker();
+                }
+                return;
+            }
+
+            calculateAnchorPosition(emojiPopoverAnchor.current).then((value) => {
+                setEmojiPopoverAnchorPosition(value);
+            });
+        });
+        return () => {
+            emojiPopoverDimensionListener.remove();
+        };
+    }, [isEmojiPickerVisible, props.isSmallScreenWidth]);
+
     // There is no way to disable animations, and they are really laggy, because there are so many
     // emojis. The best alternative is to set it to 1ms so it just "pops" in and out
     return (

src/components/EmojiPicker/EmojiPickerButton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
@@ -26,11 +26,12 @@ const defaultProps = {
 };
 
 function EmojiPickerButton(props) {
-    let emojiPopoverAnchor = null;
+    const emojiPopoverAnchor = useRef(null);
+
     return (
         <Tooltip text={props.translate('reportActionCompose.emoji')}>
             <PressableWithoutFeedback
-                ref={(el) => (emojiPopoverAnchor = el)}
+                ref={emojiPopoverAnchor}
                 style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]}
                 disabled={props.isDisabled}
                 onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor)}

src/components/Reactions/AddReactionBubble.js

@@ -63,7 +63,7 @@ function AddReactionBubble(props) {
                 (emojiCode, emojiObject) => {
                     props.onSelectEmoji(emojiObject);
                 },
-                refParam || ref.current,
+                refParam || ref,
                 anchorOrigin,
                 props.onWillShowPicker,
                 props.reportAction,

src/components/Reactions/MiniQuickEmojiReactions.js

@@ -63,7 +63,7 @@ function MiniQuickEmojiReactions(props) {
             (emojiCode, emojiObject) => {
                 props.onEmojiSelected(emojiObject);
             },
-            ref.current,
+            ref,
             undefined,
             () => {},
             props.reportAction,

src/components/Reactions/QuickEmojiReactions/index.js

@@ -17,7 +17,7 @@ const propTypes = {
 
 function QuickEmojiReactions(props) {
     const onPressOpenPicker = (openPicker) => {
-        openPicker(contextMenuRef.current.contentRef.current, {
+        openPicker(contextMenuRef.current.contentRef, {
             horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
             vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
         });

src/components/Reactions/QuickEmojiReactions/index.native.js

@@ -23,7 +23,7 @@ function QuickEmojiReactions(props) {
             // As the menu which includes the button to open the emoji picker
             // gets closed, before the picker actually opens, we pass the composer
             // ref as anchor for the emoji picker popover.
-            openPicker(ReportActionComposeFocusManager.composerRef.current);
+            openPicker(ReportActionComposeFocusManager.composerRef);
         });
     };