Clauxx comments

src/status_im2/contexts/chat/composer/effects.cljs

@@ -106,12 +106,17 @@
 (defn use-edit
   [{:keys [input-ref]}
    {:keys [text-value saved-cursor-position]}
-   {:keys [edit]}]
+   {:keys [edit]}
+   message-list-rendered?]
   (rn/use-effect
    (fn []
      (let [edit-text        (get-in edit [:content :text])
            text-value-count (count @text-value)]
-       (when (and edit @input-ref)
+       (when (and edit @input-ref @message-list-rendered?)
+         ;; A small setTimeout is necessary to ensure the statement is enqueued and will get executed
+         ;; ASAP.
+         ;; https://github.com/software-mansion/react-native-screens/issues/472
+         (js/setTimeout #(.focus ^js @input-ref) 250)
          (.setNativeProps ^js @input-ref (clj->js {:text edit-text}))
          (reset! text-value edit-text)
          (reset! saved-cursor-position (if (zero? text-value-count)
@@ -122,7 +127,8 @@
 (defn use-reply
   [_
    {:keys [container-opacity]}
-   {:keys [reply]}]
+   {:keys [reply]}
+   message-list-rendered?]
   (rn/use-effect
    (fn []
      (when reply

src/status_im2/contexts/chat/composer/view.cljs

@@ -33,7 +33,8 @@
            blur-height
            opacity
            background-y
-           theme]} props state]
+           theme
+           message-list-rendered?]} props state]
   (let [{:keys [chat-screen-loaded?]
          :as   subscriptions}    (utils/init-subs)
         content-height           (reagent/atom (or (:input-content-height ; Actual text height
@@ -73,8 +74,8 @@
                         animations
                         dimensions
                         subscriptions)
-    (effects/use-edit props state subscriptions)
-    (effects/use-reply props animations subscriptions)
+    (effects/use-edit props state subscriptions message-list-rendered?)
+    (effects/use-reply props animations subscriptions message-list-rendered?)
     (effects/update-input-mention props state subscriptions)
     (effects/edit-mentions props state subscriptions)
     (effects/link-previews props state animations subscriptions)
@@ -147,7 +148,7 @@
          subscriptions]]]]]))
 
 (defn composer
-  [{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?]}]
+  [{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button? message-list-rendered?]}]
   (let [window-height (:height (rn/get-window))
         theme         (quo.theme/use-theme-value)
         opacity       (reanimated/use-shared-value 0)
@@ -161,7 +162,8 @@
                        :blur-height                       blur-height
                        :opacity                           opacity
                        :background-y                      background-y
-                       :theme                             theme}
+                       :theme                             theme
+                       :message-list-rendered?            message-list-rendered?}
         props         (utils/init-non-reactive-state)
         state         (utils/init-reactive-state)]
     [rn/view (when platform/ios? {:style {:z-index 1}})

src/status_im2/contexts/chat/messages/list/view.cljs

@@ -298,7 +298,7 @@
 
 (defn f-messages-list-content
   [{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown? inner-state-atoms
-           big-name-visible? animate-topbar-opacity? composer-active?
+           big-name-visible? animate-topbar-opacity? composer-active? message-list-rendered?
            on-end-reached? animate-topbar-name?]}]
   (rn/use-effect (fn []
                    (if (and (not @on-end-reached?)
@@ -412,6 +412,7 @@
        ;;TODO(rasom) https://github.com/facebook/react-native/issues/30034
        :inverted                          (when platform/ios? true)
        :on-layout                         (fn [e]
+                                            (reset! message-list-rendered? true)
                                             (let [layout-height (oops/oget e
                                                                            "nativeEvent.layout.height")]
                                               (reset! messages-view-height layout-height)))

src/status_im2/contexts/chat/messages/view.cljs

@@ -15,7 +15,7 @@
 
 (defn f-chat
   [{:keys [show-floating-scroll-down-button? animate-topbar-name?
-           big-name-visible? animate-topbar-opacity? on-end-reached?]
+           big-name-visible? animate-topbar-opacity? on-end-reached? message-list-rendered?]
     :as   inner-state-atoms}]
   (let [insets                   (safe-area/get-insets)
         scroll-y                 (reanimated/use-shared-value 0)
@@ -64,7 +64,8 @@
        :big-name-visible?       big-name-visible?
        :animate-topbar-opacity? animate-topbar-opacity?
        :composer-active?        focused?
-       :on-end-reached?         on-end-reached?}]
+       :on-end-reached?         on-end-reached?
+       :message-list-rendered?  message-list-rendered?}]
 
      [messages.navigation/navigation-view
       {:scroll-y                scroll-y
@@ -86,7 +87,8 @@
          [:f> composer.view/composer
           {:insets                            insets
            :scroll-to-bottom-fn               list.view/scroll-to-bottom
-           :show-floating-scroll-down-button? show-floating-scroll-down-button?}]
+           :show-floating-scroll-down-button? show-floating-scroll-down-button?
+           :message-list-rendered?            message-list-rendered?}]
          [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat]))]))
 
 (defn chat
@@ -99,5 +101,6 @@
          :animate-topbar-name?              (reagent/atom false)
          :big-name-visible?                 (reagent/atom :initial-render)
          :animate-topbar-opacity?           (reagent/atom false)
-         :on-end-reached?                   (reagent/atom false)}]
+         :on-end-reached?                   (reagent/atom false)
+         :message-list-rendered?            (reagent/atom false)}]
     [:f> f-chat inner-state-atoms]))