Optimize chat screen navigation view

src/js/worklets/chat/messages.js

@@ -0,0 +1,65 @@
+import { useDerivedValue, withTiming, interpolate, useAnimatedScrollHandler, runOnJS } from 'react-native-reanimated';
+
+export function navigationHeaderOpacity(distanceFromListTop, isAllLoaded, isCalculationsComplete, startPosition) {
+  return useDerivedValue(function () {
+    'worklet';
+    const isCalculationsCompleteValue = isCalculationsComplete.value;
+    if (distanceFromListTop.value < startPosition && isAllLoaded.value) {
+      return isCalculationsCompleteValue ? withTiming(0) : 0;
+    } else {
+      return isCalculationsCompleteValue ? withTiming(1) : 1;
+    }
+  });
+}
+
+export function navigationHeaderPosition(distanceFromListTop, isAllLoaded, topBarHeight, startPosition) {
+  return useDerivedValue(function () {
+    'worklet';
+    return distanceFromListTop.value < startPosition && isAllLoaded.value ? withTiming(topBarHeight) : withTiming(0);
+  });
+}
+
+export function interpolateNavigationViewOpacity(props) {
+  return useDerivedValue(function () {
+    'worklet';
+    const {
+      'all-loaded?': isAllLoaded,
+      'end-position': endPosition,
+      'start-position': startPosition,
+      'distance-from-list-top': distanceFromListTop,
+    } = props;
+    if (isAllLoaded.value) {
+      return interpolate(distanceFromListTop.value, [startPosition, endPosition], [0, 1], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+    } else {
+      return 1;
+    }
+  });
+}
+
+export function messagesListOnScroll(distanceFromListTop, callback) {
+  return function (event) {
+    'worklet';
+    const currentY = event.contentOffset.y;
+    const layoutHeight = event.layoutMeasurement.height;
+    const contentSizeY = event.contentSize.height - layoutHeight;
+    distanceFromListTop.value = contentSizeY - currentY;
+    runOnJS(callback)(currentY, layoutHeight);
+  };
+}
+
+export function placeholderOpacity(isCalculationsComplete) {
+  return useDerivedValue(function () {
+    'worklet';
+    return isCalculationsComplete.value ? 0 : 1;
+  });
+}
+
+export function placeholderZIndex(isCalculationsComplete) {
+  return useDerivedValue(function () {
+    'worklet';
+    return isCalculationsComplete.value ? 0 : 2;
+  });
+}

src/mocks/js_dependencies.cljs

@@ -432,7 +432,8 @@
     "../src/js/worklets/record_audio.js"             #js {}
     "../src/js/worklets/scroll_view.js"              #js {}
     "../src/js/worklets/onboarding_carousel.js"      #js {}
-    "../src/js/worklets/lightbox.js"                 #js {}
+    "../src/js/worklets/chat/lightbox.js"            #js {}
+    "../src/js/worklets/chat/messages.js"            #js {}
     "../src/js/worklets/parallax.js"                 #js {}
     "../src/js/worklets/identifiers_highlighting.js" #js {}
     "./fleets.js"                                    default-fleets

src/quo/components/banners/banner/style.cljs

@@ -2,7 +2,6 @@
   (:require
     [quo.foundations.colors :as colors]))
 
-
 (def container
   {:height           40
    :background-color (colors/custom-color :blue 50 20)
@@ -25,4 +24,3 @@
   [hide-pin?]
   {:flex         (if hide-pin? 16 15)
    :margin-right 10})
-

src/react_native/reanimated.cljs

@@ -19,6 +19,7 @@
                      SlideOutUp
                      LinearTransition
                      enableLayoutAnimations
+                     useAnimatedScrollHandler
                      runOnJS)]
     ["react-native-redash" :refer (withPause)]
     [react-native.flat-list :as rn-flat-list]
@@ -55,6 +56,7 @@
 ;; Hooks
 (def use-shared-value useSharedValue)
 (def use-animated-style useAnimatedStyle)
+(def use-animated-scroll-handler useAnimatedScrollHandler)
 
 ;; Animations
 (def with-timing withTiming)

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

@@ -197,21 +197,15 @@
 
 (defn init-subs
   []
-  (let [chat-screen-loaded? (rf/sub [:shell/chat-screen-loaded?])]
-    (merge
-     {:chat-screen-loaded? chat-screen-loaded?
-      :link-previews?      false}
-     (when chat-screen-loaded?
-       (let [chat-input (rf/sub [:chats/current-chat-input])]
-         {:images               (seq (rf/sub [:chats/sending-image]))
-          :link-previews?       (rf/sub [:chats/link-previews?])
-          :audio                (rf/sub [:chats/sending-audio])
-          :reply                (rf/sub [:chats/reply-message])
-          :edit                 (rf/sub [:chats/edit-message])
-          :input-with-mentions  (rf/sub [:chat/input-with-mentions])
-          :input-text           (:input-text chat-input)
-          :input-content-height (:input-content-height chat-input)
-          :chat-screen-loaded?  chat-screen-loaded?})))))
+  (let [chat-input (rf/sub [:chats/current-chat-input])]
+    {:images               (seq (rf/sub [:chats/sending-image]))
+     :link-previews?       (rf/sub [:chats/link-previews?])
+     :audio                (rf/sub [:chats/sending-audio])
+     :reply                (rf/sub [:chats/reply-message])
+     :edit                 (rf/sub [:chats/edit-message])
+     :input-with-mentions  (rf/sub [:chat/input-with-mentions])
+     :input-text           (:input-text chat-input)
+     :input-content-height (:input-content-height chat-input)}))
 
 (defn init-animations
   [{:keys [input-text images link-previews? reply audio]}

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

@@ -23,7 +23,10 @@
     [status-im2.contexts.chat.composer.style :as style]
     [status-im2.contexts.chat.composer.sub-view :as sub-view]
     [status-im2.contexts.chat.composer.utils :as utils]
-    [utils.i18n :as i18n]))
+    [status-im2.contexts.chat.messages.contact-requests.bottom-drawer.view :as
+     contact-requests.bottom-drawer]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
 
 (defn sheet-component
   [{:keys [insets
@@ -35,8 +38,7 @@
            background-y
            theme
            messages-list-on-layout-finished?]} props state]
-  (let [{:keys [chat-screen-loaded?]
-         :as   subscriptions}    (utils/init-subs)
+  (let [subscriptions            (utils/init-subs)
         content-height           (reagent/atom (or (:input-content-height ; Actual text height
                                                     subscriptions)
                                                    constants/input-height))
@@ -80,12 +82,11 @@
     (effects/link-previews props state animations subscriptions)
     (effects/use-images props state animations subscriptions)
     [:<>
-     (when chat-screen-loaded?
-       [mentions/view props state animations max-height cursor-pos
-        (:images subscriptions)
-        (:link-previews? subscriptions)
-        (:reply subscriptions)
-        (:edit subscriptions)])
+     [mentions/view props state animations max-height cursor-pos
+      (:images subscriptions)
+      (:link-previews? subscriptions)
+      (:reply subscriptions)
+      (:edit subscriptions)]
      [rn/view
       {:style style/composer-sheet-and-jump-to-container}
       [sub-view/shell-button state scroll-to-bottom-fn show-floating-scroll-down-button?]
@@ -96,12 +97,11 @@
         {:style     (style/sheet-container insets state animations theme)
          :on-layout #(handler/layout % state blur-height)}
         [sub-view/bar]
-        (when chat-screen-loaded?
-          [:<>
-           [reply/view state (:input-ref props)]
-           [edit/view
-            {:text-value (:text-value state)
-             :input-ref  (:input-ref props)}]])
+        [:<>
+         [reply/view state (:input-ref props)]
+         [edit/view
+          {:text-value (:text-value state)
+           :input-ref  (:input-ref props)}]]
         [reanimated/touchable-opacity
          {:active-opacity      1
           :on-press            (fn []
@@ -140,15 +140,14 @@
                                       :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]])
+        [:<>
+         [gradients/view props state animations show-bottom-gradient?]
+         [link-preview/view]
+         [images/images-list]]
         [:f> actions/view props state animations window-height insets scroll-to-bottom-fn
          subscriptions]]]]]))
 
-(defn composer
+(defn f-composer
   [{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?
            messages-list-on-layout-finished?]}]
   (let [window-height (:height (rn/get-window))
@@ -177,3 +176,15 @@
        :focused?      (:focused? state)
        :theme         theme}]
      [:f> sheet-component extra-params props state]]))
+
+(defn composer
+  [props]
+  (let [{:keys [chat-id
+                contact-request-state
+                group-chat
+                able-to-send-message?]
+         :as   chat} (rf/sub [:chats/current-chat-chat-view])]
+    (when (seq chat)
+      (if able-to-send-message?
+        [:f> f-composer props]
+        [contact-requests.bottom-drawer/view chat-id contact-request-state group-chat]))))

src/status_im2/contexts/chat/lightbox/utils.cljs

@@ -13,7 +13,7 @@
     [status-im2.contexts.chat.lightbox.constants :as constants]
     [status-im2.contexts.chat.lightbox.top-view :as top-view]
     [utils.re-frame :as rf]
-    [utils.worklets.lightbox :as worklet]))
+    [utils.worklets.chat.lightbox :as worklet]))
 
 (defn clear-timers
   [timers]

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

@@ -0,0 +1,16 @@
+(ns status-im2.contexts.chat.messages.constants)
+
+;;;; Navigation
+(def ^:const top-bar-height 56)
+(def ^:const pinned-banner-height 40)
+(def ^:const header-container-top-margin 48)
+(def ^:const header-container-radius 20)
+(def ^:const header-animation-distance 20)
+(def ^:const content-animation-start-position 110)
+;; Note - We should also consider height of bio for banner animation starting position
+;; Todo - Should be updated once New-profile implemation is complete
+(def ^:const pinned-banner-animation-start-position 148)
+
+(def ^:const default-extrapolation-option
+  {:extrapolateLeft  "clamp"
+   :extrapolateRight "clamp"})

src/status_im2/contexts/chat/messages/contact_requests/bottom_drawer/style.cljs

@@ -0,0 +1,7 @@
+(ns status-im2.contexts.chat.messages.contact-requests.bottom-drawer.style)
+
+(def container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0})

src/status_im2/contexts/chat/messages/contact_requests/bottom_drawer.cljs → src/status_im2/contexts/chat/messages/contact_requests/bottom_drawer/view.cljs

@@ -1,8 +1,9 @@
-(ns status-im2.contexts.chat.messages.contact-requests.bottom-drawer
+(ns status-im2.contexts.chat.messages.contact-requests.bottom-drawer.view
   (:require
     [quo.core :as quo]
     [react-native.core :as rn]
     [status-im2.constants :as constants]
+    [status-im2.contexts.chat.messages.contact-requests.bottom-drawer.style :as style]
     [status-im2.contexts.shell.jump-to.constants :as jump-to.constants]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -11,7 +12,7 @@
   [contact-id contact-request-state group-chat]
   (let [customization-color (rf/sub [:profile/customization-color])
         [primary-name _]    (rf/sub [:contacts/contact-two-names-by-identity contact-id])]
-    [rn/view
+    [rn/view {:style style/container}
      [quo/permission-context
       [quo/button
        {:type      :ghost

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

@@ -1,56 +1,46 @@
 (ns status-im2.contexts.chat.messages.list.style
   (:require
     [quo.foundations.colors :as colors]
-    [react-native.reanimated :as reanimated]))
-
-(defonce ^:const cover-height 168)
-(defonce ^:const overscroll-cover-height 2000)
-(defonce ^:const header-avatar-top-offset -36)
+    [react-native.reanimated :as reanimated]
+    [status-im2.contexts.chat.messages.constants :as messages.constants]))
 
 (def keyboard-avoiding-container
-  {:flex 1})
+  {:flex    1
+   :z-index 2})
 
 (def list-container
   {:padding-vertical 16})
 
-(defn header-container
-  [show? theme]
-  {:display          (if show? :flex :none)
-   :background-color (colors/theme-colors colors/white colors/neutral-100 theme)
-   :top              (- overscroll-cover-height)
-   :margin-bottom    (- overscroll-cover-height)})
-
-(defn header-cover
-  [cover-bg-color theme]
-  {:flex             1
-   :height           (+ overscroll-cover-height cover-height)
-   :background-color (colors/theme-colors
-                      (colors/custom-color cover-bg-color 50 20)
-                      (colors/custom-color cover-bg-color 50 40)
-                      theme)})
+(defn background-container
+  [background-color background-opacity top-margin]
+  (reanimated/apply-animations-to-style
+   {:opacity background-opacity}
+   {:background-color background-color
+    :position         :absolute
+    :top              0
+    :left             0
+    :right            0
+    :height           (+ top-margin messages.constants/header-container-radius)}))
 
 (defn header-bottom-part
-  [animation theme]
+  [border-radius theme top-margin]
   (reanimated/apply-animations-to-style
-   {:border-top-right-radius animation
-    :border-top-left-radius  animation}
-   {:top              -16
-    :margin-bottom    -16
-    :padding-bottom   24
-    :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}))
-
-(def header-avatar
-  {:top               header-avatar-top-offset
-   :margin-horizontal 20
-   :margin-bottom     header-avatar-top-offset})
+   {:border-top-left-radius  border-radius
+    :border-top-right-radius border-radius}
+   {:background-color   (colors/theme-colors colors/white colors/neutral-95 theme)
+    :padding-horizontal 20
+    :margin-top         top-margin}))
 
 (defn header-image
-  [scale-animation side-animation bottom-animation]
+  [scale top left theme]
   (reanimated/apply-animations-to-style
-   {:transform [{:scale scale-animation}
-                {:translate-x side-animation}
-                {:translate-y bottom-animation}]}
-   {:align-items :flex-start}))
+   {:transform [{:scale scale}]
+    :top       top
+    :left      left}
+   {:position      :absolute
+    :border-width  4
+    :border-radius 50
+    :border-color  (colors/theme-colors colors/white colors/neutral-95 theme)}))
 
 (def bio
   {:margin-top 8})