fix android composer background shadow not visible when image is atta…

…ched (#19492)

src/js/worklets/chat/messenger/composer.js

@@ -1,4 +1,4 @@
-import { useDerivedValue, withTiming } from 'react-native-reanimated';
+import { useDerivedValue, withTiming, withDelay } from 'react-native-reanimated';
 
 export function scrollDownButtonOpacity(chatListScrollY, isComposerFocused, windowHeight) {
   return useDerivedValue(function () {
@@ -24,3 +24,26 @@ export function jumpToButtonPosition(scrollDownButtonOpacity, isComposerFocused)
     return withTiming(scrollDownButtonOpacity.value == 1 || isComposerFocused.value ? 35 : 0);
   });
 }
+
+export function composerContainerOpacity(isComposerFocused, isEmptyInput, emptyOpacity) {
+  return useDerivedValue(function () {
+    'worklet';
+    return isEmptyInput.value && !isComposerFocused.value
+      ? withDelay(300, withTiming(emptyOpacity, { duration: 0 }))
+      : 1;
+  });
+}
+
+export function blurContainerElevation(isComposerFocused, isEmptyInput) {
+  return useDerivedValue(function () {
+    'worklet';
+    return isEmptyInput.value && !isComposerFocused.value ? 10 : 0;
+  });
+}
+
+export function composerElevation(isComposerFocused, isEmptyInput) {
+  return useDerivedValue(function () {
+    'worklet';
+    return isEmptyInput.value && !isComposerFocused.value ? 0 : 10;
+  });
+}

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

@@ -17,16 +17,14 @@
 (defn send-message
   "Minimize composer, animate-out background overlay, clear input and flush state"
   [{:keys [sending-images? sending-links?]}
-   {:keys [text-value focused? maximized?]}
-   {:keys [height saved-height last-height opacity background-y container-opacity]}
+   {:keys [text-value maximized?]}
+   {:keys [height saved-height last-height opacity background-y]}
    window-height
    edit]
   (reanimated/animate height comp-constants/input-height)
   (reanimated/set-shared-value saved-height comp-constants/input-height)
   (reanimated/set-shared-value last-height comp-constants/input-height)
   (reanimated/animate opacity 0)
-  (when-not @focused?
-    (js/setTimeout #(reanimated/animate container-opacity comp-constants/empty-opacity) 300))
   (js/setTimeout #(reanimated/set-shared-value background-y
                                                (- window-height))
                  300)
@@ -84,8 +82,7 @@
 
 (defn audio-button
   [{:keys [record-reset-fn input-ref]}
-   {:keys [record-permission? recording? gesture-enabled? focused?]}
-   {:keys [container-opacity]}]
+   {:keys [record-permission? recording? gesture-enabled? focused?]}]
   (let [audio (rf/sub [:chats/sending-audio])]
     [rn/view
      {:style          (style/record-audio-container)
@@ -97,8 +94,7 @@
        :on-start-recording                 (fn []
                                              (rf/dispatch [:chat.ui/set-recording true])
                                              (reset! recording? true)
-                                             (reset! gesture-enabled? false)
-                                             (reanimated/animate container-opacity 1))
+                                             (reset! gesture-enabled? false))
        :audio-file                         audio
        :on-lock                            (fn []
                                              (rf/dispatch [:chat.ui/set-recording false]))
@@ -110,9 +106,7 @@
                                              (reset! recording? false)
                                              (reset! gesture-enabled? true)
                                              (rf/dispatch [:chat/send-audio file-path duration])
-                                             (if-not @focused?
-                                               (reanimated/animate container-opacity
-                                                                   comp-constants/empty-opacity)
+                                             (when @focused?
                                                (js/setTimeout #(when @input-ref (.focus ^js @input-ref))
                                                               300))
                                              (rf/dispatch [:chat.ui/set-input-audio nil]))
@@ -121,9 +115,7 @@
                                                (rf/dispatch [:chat.ui/set-recording false])
                                                (reset! recording? false)
                                                (reset! gesture-enabled? true)
-                                               (if-not @focused?
-                                                 (reanimated/animate container-opacity
-                                                                     comp-constants/empty-opacity)
+                                               (when @focused?
                                                  (js/setTimeout #(when @input-ref
                                                                    (.focus ^js @input-ref))
                                                                 300))

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

@@ -70,19 +70,17 @@
 
 (defn audio-effect
   [{:keys [recording? gesture-enabled?]}
-   {:keys [container-opacity]}
    audio]
   (when (and audio (not @recording?))
     (reset! recording? true)
-    (reset! gesture-enabled? false)
-    (reanimated/animate container-opacity 1)))
+    (reset! gesture-enabled? false)))
 
 (defn empty-effect
-  [{:keys [focused?]}
-   {:keys [container-opacity]}
+  [{:keys [empty-input?]}
    {:keys [input-text images link-previews? reply audio]}]
-  (when (and (not @focused?) (utils/empty-input? input-text images link-previews? reply audio))
-    (reanimated/animate-delay container-opacity constants/empty-opacity 200)))
+  (reanimated/set-shared-value
+   empty-input?
+   (utils/empty-input? input-text images link-previews? reply audio)))
 
 (defn component-will-unmount
   [{:keys [keyboard-show-listener keyboard-hide-listener keyboard-frame-listener]}]
@@ -100,8 +98,8 @@
      (kb-default-height-effect state)
      (background-effect state animations dimensions chat-input)
      (link-preview-effect state)
-     (audio-effect state animations audio)
-     (empty-effect state animations subscriptions)
+     (audio-effect state audio)
+     (empty-effect animations subscriptions)
      (kb/add-kb-listeners props state animations dimensions)
      #(component-will-unmount props))
    [max-height])
@@ -160,13 +158,10 @@
 
 (defn use-reply
   [{:keys [input-ref]}
-   {:keys [container-opacity]}
    {:keys [reply]}
    chat-screen-layout-calculations-complete?]
   (rn/use-effect
    (fn []
-     (when reply
-       (reanimated/animate container-opacity 1))
      (when (and reply @input-ref (reanimated/get-shared-value chat-screen-layout-calculations-complete?))
        (js/setTimeout #(.focus ^js @input-ref) 600)))
    [(:message-id reply)]))
@@ -203,12 +198,10 @@
 (defn use-images
   [{:keys [sending-images? input-ref]}
    {:keys [text-value maximized?]}
-   {:keys [container-opacity height saved-height]}
+   {:keys [height saved-height]}
    {:keys [images]}]
   (rn/use-effect
    (fn []
-     (when images
-       (reanimated/animate container-opacity 1))
      (when (and (not @sending-images?) (seq images) @input-ref)
        (.focus ^js @input-ref))
      (if-not @maximized?

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

@@ -57,7 +57,7 @@
 (defn drag-gesture
   [{:keys [input-ref] :as props}
    {:keys [gesture-enabled?] :as state}
-   {:keys [height saved-height last-height opacity background-y container-opacity] :as animations}
+   {:keys [height saved-height last-height opacity background-y] :as animations}
    {:keys [max-height lines] :as dimensions}
    keyboard-shown]
   (let [expanding?       (atom true)
@@ -68,7 +68,6 @@
                             (if-not keyboard-shown
                               (do ; focus and end
                                 (when (< (oops/oget event "velocityY") constants/velocity-threshold)
-                                  (reanimated/set-shared-value container-opacity 1)
                                   (reanimated/set-shared-value last-height max-height)
                                   (maximize state animations dimensions))
                                 (when @input-ref

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

@@ -16,8 +16,8 @@
 (defn focus
   "Animate to the `saved-height`, display background-overlay if needed, and set cursor position"
   [{:keys [input-ref] :as props}
-   {:keys [text-value focused? lock-selection? saved-cursor-position composer-focused? maximized?]}
-   {:keys [height saved-height last-height opacity background-y container-opacity]
+   {:keys [text-value focused? lock-selection? saved-cursor-position maximized?]}
+   {:keys [height saved-height last-height opacity background-y composer-focused?]
     :as   animations}
    {:keys [max-height] :as dimensions}]
   (reanimated/set-shared-value composer-focused? true)
@@ -27,7 +27,6 @@
         new-height        (min max-height last-height-value)]
     (reanimated/animate height new-height)
     (reanimated/set-shared-value saved-height new-height)
-    (reanimated/animate container-opacity 1)
     (when (> last-height-value (* constants/background-threshold max-height))
       (reset! maximized? true)
       (reanimated/animate opacity 1)
@@ -42,10 +41,9 @@
 (defn blur
   "Save the current height, minimize the composer, animate-out the background, and save cursor position"
   [{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index
-           maximized? recording? composer-focused?]}
-   {:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]}
-   {:keys [content-height max-height window-height]}
-   {:keys [images link-previews? reply]}]
+           maximized? recording?]}
+   {:keys [height saved-height last-height gradient-opacity opacity background-y composer-focused?]}
+   {:keys [content-height max-height window-height]}]
   (when-not @recording?
     (let [lines         (utils/calc-lines (- @content-height constants/extra-content-offset))
           min-height    (utils/get-min-height lines)
@@ -62,8 +60,6 @@
       (reanimated/set-shared-value saved-height min-height)
       (reanimated/animate opacity 0)
       (js/setTimeout #(reanimated/set-shared-value background-y (- window-height)) 300)
-      (when (utils/empty-input? @text-value images link-previews? reply nil)
-        (reanimated/animate container-opacity constants/empty-opacity))
       (reanimated/animate gradient-opacity 0)
       (reset! lock-selection? true)
       (reset! saved-cursor-position @cursor-position)
@@ -164,8 +160,3 @@
       (let [{:keys [start end text-input-handle]} @selection-event]
         (selection/update-selection text-input-handle start end)
         (reset! selection-event nil)))))
-
-(defn layout
-  [event state blur-height]
-  (when (utils/update-blur-height? event state blur-height)
-    (reanimated/set-shared-value blur-height (oops/oget event "nativeEvent.layout.height"))))

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

@@ -10,13 +10,12 @@
 (def border-top-radius 20)
 
 (defn shadow
-  [focused? theme]
-  (if platform/ios?
+  [theme]
+  (when platform/ios?
     {:shadow-radius  20
      :shadow-opacity (colors/theme-colors 0.1 0.7 theme)
      :shadow-color   colors/neutral-100
-     :shadow-offset  {:width 0 :height (colors/theme-colors -4 -8 theme)}}
-    {:elevation (if @focused? 10 0)}))
+     :shadow-offset  {:width 0 :height (colors/theme-colors -4 -8 theme)}}))
 
 (def composer-sheet-and-jump-to-container
   {:position :absolute
@@ -25,17 +24,18 @@
    :right    0})
 
 (defn sheet-container
-  [insets {:keys [focused?]} {:keys [container-opacity]} theme]
+  [insets {:keys [container-opacity composer-elevation]} theme]
   (reanimated/apply-animations-to-style
-   {:opacity container-opacity}
+   {:opacity   container-opacity
+    :elevation composer-elevation}
    (merge
     {:border-top-left-radius  border-top-radius
      :border-top-right-radius border-top-radius
      :padding-horizontal      20
      :background-color        (colors/theme-colors colors/white colors/neutral-95 theme)
      :z-index                 3
      :padding-bottom          (:bottom insets)}
-    (shadow focused? theme))))
+    (shadow theme))))
 
 (def bar-container
   {:height          constants/bar-container-height
@@ -95,17 +95,16 @@
     :background-color colors/neutral-95-opa-70}))
 
 (defn blur-container
-  [height focused?]
-  (reanimated/apply-animations-to-style
-   {:height height}
+  [composer-default-height {:keys [blur-container-elevation]}]
+  [{:elevation blur-container-elevation}
    {:position                :absolute
-    :elevation               (if-not @focused? 10 0)
     :left                    0
     :right                   0
     :bottom                  0
+    :height                  composer-default-height
     :border-top-right-radius border-top-radius
     :border-top-left-radius  border-top-radius
-    :overflow                :hidden}))
+    :overflow                :hidden}])
 
 (defn blur-view
   [theme]

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

@@ -1,7 +1,6 @@
 (ns status-im.contexts.chat.messenger.composer.sub-view
   (:require
     [quo.core :as quo]
-    [react-native.blur :as blur]
     [react-native.core :as rn]
     [react-native.reanimated :as reanimated]
     [status-im.contexts.chat.messenger.composer.style :as style]
@@ -14,15 +13,6 @@
   [rn/view {:style style/bar-container}
    [rn/view {:style (style/bar theme)}]])
 
-(defn f-blur-view
-  [{:keys [layout-height focused? theme]}]
-  [reanimated/view {:style (style/blur-container layout-height focused?)}
-   [blur/view (style/blur-view theme)]])
-
-(defn blur-view
-  [props]
-  [:f> f-blur-view props])
-
 (defn- f-shell-button
   [{:keys [composer-focused?]} chat-list-scroll-y window-height]
   (let [customization-color        (rf/sub [:profile/customization-color])
@@ -52,5 +42,5 @@
       scroll-down-button-opacity]]))
 
 (defn shell-button
-  [state chat-list-scroll-y window-height]
-  [:f> f-shell-button state chat-list-scroll-y window-height])
+  [shared-values chat-list-scroll-y window-height]
+  [:f> f-shell-button shared-values chat-list-scroll-y window-height])