diff --git a/src/status_im2/contexts/chat/composer/effects.cljs b/src/status_im2/contexts/chat/composer/effects.cljs index 6e4e815570..ccf66f56f2 100644 --- a/src/status_im2/contexts/chat/composer/effects.cljs +++ b/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 diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs index 9058053e34..cd66c4de9b 100644 --- a/src/status_im2/contexts/chat/composer/view.cljs +++ b/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}}) diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index 5311f563db..639e54935d 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/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))) diff --git a/src/status_im2/contexts/chat/messages/view.cljs b/src/status_im2/contexts/chat/messages/view.cljs index b6c29ea0df..2324d98e1c 100644 --- a/src/status_im2/contexts/chat/messages/view.cljs +++ b/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]))