lint

src/status_im/contexts/chat/messenger/composer/handlers.cljs

@@ -127,8 +127,9 @@
 (defn change-text
   "Update `text-value`, update cursor selection, find links, find mentions"
   [text
-   {:keys [input-ref record-reset-fn]}
+   {:keys [input-ref record-reset-fn] :as props}
-   {:keys [text-value cursor-position recording?]}]
+   {:keys [text-value cursor-position recording?]}
+   scroll-to-end]
   (reset! text-value text)
   (reagent/next-tick #(when @input-ref
                         (.setNativeProps ^js @input-ref
@@ -140,6 +141,8 @@
   (rf/dispatch [:chat.ui/set-chat-input-text text])
   (debounce/debounce-and-dispatch [:link-preview/unfurl-urls text]
                                   constants/unfurl-debounce-ms)
+  (when (string/ends-with? text (with-out-str (newline)))
+    (scroll-to-end props))
   (if (string/ends-with? text "@")
     (rf/dispatch [:mention/on-change-text text])
     (debounce/debounce-and-dispatch [:mention/on-change-text text] 300)))

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

@@ -69,17 +69,11 @@
    :min-height constants/input-height})
 
 (defn input-text
-  [{:keys [saved-emoji-kb-extra-height]}
+  [{:keys [maximized?]}
-   {:keys [focused? maximized?]}
+   {:keys [theme]}]
-   {:keys [max-height theme]}]
   (assoc typography/paragraph-1
          :color               (colors/theme-colors :black :white theme)
          :text-align-vertical :top
-         :position            (if @saved-emoji-kb-extra-height :relative :absolute)
-         :top                 0
-         :left                0
-         :right               (when (or focused? platform/ios?) 0)
-         :max-height          max-height
          :padding-bottom      (when @maximized? 0)))
 
 (defn background

src/status_im/contexts/chat/messenger/composer/utils.cljs

@@ -175,7 +175,8 @@
    :record-reset-fn             (atom nil)
    :scroll-y                    (atom 0)
    :selection-event             (atom nil)
-   :selection-manager           (rn/selectable-text-input-manager)})
+   :selection-manager           (rn/selectable-text-input-manager)
+   :composer-scrollview-ref     (atom nil)})
 
 (defn init-reactive-state
   []

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

@@ -68,7 +68,14 @@
         ;; Cursor position, needed to determine where to display the mentions view
         cursor-pos               (utils/cursor-y-position-relative-to-container
                                   props
-                                  state)]
+                                  state)
+        scroll-to-end            (fn []
+                                   ;; Needs to be queued, Otherwise might not be called on the right
+                                   ;; time.
+                                   (js/setTimeout #(when @(:composer-scrollview-ref props)
+                                                     (.scrollToEnd @(:composer-scrollview-ref props)))
+                                                  50))
+        chat-screen-loaded?      (rf/sub [:shell/chat-screen-loaded?])]
     (effects/did-mount props)
     (effects/initialize props
                         state
@@ -90,8 +97,7 @@
       {:style style/composer-sheet-and-jump-to-container}
       [sub-view/shell-button state chat-list-scroll-y window-height]
       [gesture/gesture-detector
-       {:gesture
+       {:gesture (drag-gesture/drag-gesture props state animations dimensions keyboard-shown)}
-        (drag-gesture/drag-gesture props state animations dimensions keyboard-shown)}
        [reanimated/view
         {:style     (style/sheet-container insets state animations theme)
          :on-layout #(handler/layout % state blur-height)}
@@ -112,36 +118,43 @@
           {:ref        #(reset! (:selectable-input-ref props) %)
            :menu-items @(:menu-items state)
            :style      (style/input-view state)}
-          [rn/text-input
+          ;; https://github.com/facebook/react-native/issues/39660
-           {:ref                      #(reset! (:input-ref props) %)
+          [rn/scroll-view
-            :default-value            @(:text-value state)
+           {:on-scroll                       #(handler/scroll % props state animations dimensions)
-            :on-focus                 #(handler/focus props state animations dimensions)
+            :keyboard-should-persist-taps    :handled
-            :on-blur                  #(handler/blur state animations dimensions subscriptions)
+            :scroll-event-throttle           64
-            :on-content-size-change   #(handler/content-size-change %
+            :ref                             #(reset! (:composer-scrollview-ref props) %)
-                                                                    state
+            :shows-vertical-scroll-indicator false}
-                                                                    animations
+           [rn/text-input
-                                                                    dimensions
+            {:ref                      #(reset! (:input-ref props) %)
-                                                                    (or keyboard-shown
+             :default-value            @(:text-value state)
-                                                                        (:edit subscriptions)))
+             :on-focus                 #(handler/focus props state animations dimensions)
-            :on-scroll                #(handler/scroll % props state animations dimensions)
+             :on-blur                  #(handler/blur state animations dimensions subscriptions)
-            :on-change-text           #(handler/change-text % props state)
+             :on-change-text           #(handler/change-text % props state scroll-to-end)
-            :on-selection-change      #(handler/selection-change % props state)
+             :on-selection-change      #(handler/selection-change % props state)
-            :on-selection             #(selection/on-selection % props state)
+             :on-content-size-change   #(handler/content-size-change %1
-            :keyboard-appearance      (quo.theme/theme-value :light :dark)
+                                                                     state
-            :max-font-size-multiplier 1
+                                                                     animations
-            :multiline                true
+                                                                     dimensions
-            :placeholder              (i18n/label :t/type-something)
+                                                                     (or keyboard-shown
-            :placeholder-text-color   (colors/theme-colors colors/neutral-40 colors/neutral-50)
+                                                                         (:edit subscriptions)))
-            :style                    (style/input-text props
+             :on-selection             #(selection/on-selection % props state)
-                                                        state
+             :keyboard-appearance      (quo.theme/theme-value :light :dark)
-                                                        {:max-height max-height
+             :max-font-size-multiplier 1
-                                                         :theme      theme})
+             :multiline                true
-            :max-length               constants/max-text-size
+             :scroll-enabled           false
-            :accessibility-label      :chat-message-input}]]]
+             :placeholder              (i18n/label :t/type-something)
-        [:<>
+             :placeholder-text-color   (colors/theme-colors colors/neutral-40 colors/neutral-50)
-         [gradients/view props state animations show-bottom-gradient?]
+             :style                    (style/input-text state
-         [link-preview/view]
+                                                         {:max-height max-height
-         [images/images-list]]
+                                                          :theme      theme})
+             :max-length               constants/max-text-size
+             :accessibility-label      :chat-message-input}]]]]
+        (when chat-screen-loaded?
+          [:<>
+           [gradients/view props state animations show-bottom-gradient?]
+           [link-preview/view]
+           [images/images-list]])
         [:f> actions/view props state animations window-height insets subscriptions]]]]]))
 
 (defn f-composer