fix(messenger): List of users overlap composer input (#21641)

* Fix mentions overlapped

* Fix rendering blink

src/status_im/contexts/chat/messenger/composer/mentions/style.cljs

@@ -2,23 +2,21 @@
   (:require
     [quo.foundations.colors :as colors]
     [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]
     [status-im.contexts.chat.messenger.composer.constants :as constants]))
 
-(defn shadow
-  [theme]
+(defn- add-shadow
+  [theme styles]
   (if platform/ios?
-    {:shadow-radius  (colors/theme-colors 30 50 theme)
+    (assoc styles
+           :shadow-radius  (colors/theme-colors 30 50 theme)
            :shadow-opacity (colors/theme-colors 0.1 0.7 theme)
            :shadow-color   colors/neutral-100
-     :shadow-offset  {:width 0 :height (colors/theme-colors 8 12 theme)}}
-    {:elevation 10}))
+           :shadow-offset  {:width 0 :height (colors/theme-colors 8 12 theme)})
+    (assoc styles :elevation 10)))
 
-(defn container
-  [opacity top theme]
-  (reanimated/apply-animations-to-style
-   {:opacity opacity}
-   (merge
+(defn inner
+  [top theme]
+  (add-shadow theme
               {:position         :absolute
                :top              (- (+ 8 top))
                :left             8
@@ -26,5 +24,17 @@
                :border-radius    16
                :z-index          4
                :max-height       constants/mentions-max-height
-     :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}
-    (shadow theme))))
+               :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}))
+
+(defn container
+  [opacity top theme]
+  [{:opacity opacity}
+   (add-shadow theme
+               {:position         :absolute
+                :top              (- (+ 8 top))
+                :left             8
+                :right            8
+                :border-radius    16
+                :z-index          4
+                :max-height       constants/mentions-max-height
+                :background-color (colors/theme-colors colors/white colors/neutral-95 theme)})])

src/status_im/contexts/chat/messenger/composer/mentions/view.cljs

@@ -10,11 +10,12 @@
     [status-im.contexts.chat.messenger.messages.constants :as messages.constants]
     [utils.re-frame :as rf]))
 
-(defn mention-item
-  [user]
-  [contact-list-item/contact-list-item
-   {:on-press #(rf/dispatch [:chat.ui/select-mention user])}
-   user])
+(defn- mention-item
+  [[user-key user]]
+  (with-meta
+    [contact-list-item/contact-list-item {:on-press #(rf/dispatch [:chat.ui/select-mention user])}
+     user]
+    {:key user-key}))
 
 (defn view
   [layout-height]
@@ -22,7 +23,8 @@
         suggestions?            (seq suggestions)
         theme                   (quo.theme/use-theme)
         opacity                 (reanimated/use-shared-value (if suggestions? 1 0))
-        [suggestions-state set-suggestions-state] (rn/use-state suggestions)
+        [suggestions-state
+         set-suggestions-state] (rn/use-state suggestions)
         top                     (min constants/mentions-max-height
                                      (* (count suggestions-state) 56)
                                      (- @layout-height
@@ -35,12 +37,9 @@
          (set-suggestions-state suggestions)
          (js/setTimeout #(set-suggestions-state suggestions) 300))
        (reanimated/animate opacity (if suggestions? 1 0)))
-     [suggestions?])
-    [reanimated/view
-     {:style (style/container opacity top theme)}
-     [rn/flat-list
-      {:keyboard-should-persist-taps :always
-       :data                         (vals suggestions-state)
-       :key-fn                       :key
-       :render-fn                    mention-item
-       :accessibility-label          :mentions-list}]]))
+     [suggestions])
+    [reanimated/view {:style (style/container opacity top theme)}
+     [rn/scroll-view
+      {:accessibility-label          :mentions-list
+       :keyboard-should-persist-taps :always}
+      (map mention-item suggestions-state)]]))

src/status_im/contexts/chat/messenger/messages/list/view.cljs

@@ -225,7 +225,8 @@
                                              distance-from-list-top
                                              chat-list-scroll-y
                                              (on-scroll-fn distance-atom layout-height)))
-        :style                             {:background-color (colors/theme-colors colors/white
+        :style                             {:height           "100%"
+                                            :background-color (colors/theme-colors colors/white
                                                                                    colors/neutral-95
                                                                                    theme)}
         :content-container-style           (style/list-paddings add-padding-bottom?)