diff --git a/src/js/worklets/chat/messenger/messages.js b/src/js/worklets/chat/messenger/messages.js index 5aa0cb5ed8..7f23555b63 100644 --- a/src/js/worklets/chat/messenger/messages.js +++ b/src/js/worklets/chat/messenger/messages.js @@ -1,4 +1,5 @@ -import { withTiming, runOnJS } from 'react-native-reanimated'; +import { useAnimatedReaction, withTiming, runOnJS } from 'react-native-reanimated'; +import { useState } from "react" export function messagesListOnScroll(distanceFromListTop, chatListScrollY, callback) { return function (event) { @@ -12,3 +13,17 @@ export function messagesListOnScroll(distanceFromListTop, chatListScrollY, callb runOnJS(callback)(layoutHeight, newDistance); }; } + +export function useMessagesScrolledToThreshold(distanceFromListTop, threshold) { + const [scrolledToThreshold, setScrolledToThreshold] = useState(false) + + useAnimatedReaction(function () { + return distanceFromListTop.value <= threshold; + }, function (current) { + if(current !== scrolledToThreshold) { + runOnJS(setScrolledToThreshold)(current) + } + }, [scrolledToThreshold]) + + return scrolledToThreshold +} diff --git a/src/js/worklets/chat/messenger/navigation.js b/src/js/worklets/chat/messenger/navigation.js index 8df1ced52e..f2031e4f3a 100644 --- a/src/js/worklets/chat/messenger/navigation.js +++ b/src/js/worklets/chat/messenger/navigation.js @@ -19,6 +19,13 @@ export function navigationHeaderPosition(distanceFromListTop, isAllLoaded, topBa }); } +export function navigationButtonsCompleteOpacity(isCalculationComplete) { + return useDerivedValue(function () { + 'worklet' + return isCalculationComplete.value ? withTiming(1) : 0 + }) +} + export function interpolateNavigationViewOpacity(props) { return useDerivedValue(function () { 'worklet'; diff --git a/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs b/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs index 682f821061..f28e04c7a5 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs @@ -32,6 +32,12 @@ :height top-bar-height :align-items :center}) +(defn button-animation-container + [opacity-value] + (reanimated/apply-animations-to-style + {:opacity opacity-value} + {})) + ;;;; Content (defn header-content-container diff --git a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs index 10197c47a8..c78c67d535 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs @@ -15,6 +15,7 @@ [status-im.contexts.chat.messenger.messages.pin.banner.view :as pin.banner] [utils.i18n :as i18n] [utils.re-frame :as rf] + [utils.worklets.chat.messenger.messages :as messages.worklets] [utils.worklets.chat.messenger.navigation :as worklets])) (defn f-header-content-container @@ -103,15 +104,22 @@ :banner-opacity banner-opacity :top-offset navigation-view-height}]])) -(defn f-view +(defn view [{:keys [distance-from-list-top chat-screen-layout-calculations-complete?]}] (let [{:keys [chat-id chat-type] :as chat} (rf/sub [:chats/current-chat-chat-view]) all-loaded? (reanimated/use-shared-value false) all-loaded-sub (rf/sub [:chats/all-loaded? chat-id]) top-insets (safe-area/get-top) top-bar-height messages.constants/top-bar-height - navigation-view-height (+ top-bar-height top-insets)] - (reanimated/set-shared-value all-loaded? all-loaded-sub) + navigation-view-height (+ top-bar-height top-insets) + navigation-buttons-opacity (worklets/navigation-buttons-complete-opacity + chat-screen-layout-calculations-complete?) + reached-threshold? (messages.worklets/use-messages-scrolled-to-threshold + distance-from-list-top + top-bar-height) + button-background (if reached-threshold? :photo :blur)] + (rn/use-effect (fn [] (reanimated/set-shared-value all-loaded? all-loaded-sub)) + [all-loaded-sub]) [rn/view {:style (style/navigation-view navigation-view-height messages.constants/pinned-banner-height)} [:f> f-animated-background-and-pinned-banner @@ -120,27 +128,29 @@ :distance-from-list-top distance-from-list-top :all-loaded? all-loaded?}] [rn/view {:style (style/header-container top-insets top-bar-height)} - [quo/button - {:icon-only? true - :type :grey - :background :blur - :size 32 - :accessibility-label :back-button - :on-press #(rf/dispatch [:navigate-back])} - (if (= chat-type constants/community-chat-type) :i/arrow-left :i/close)] + [reanimated/view {:style (style/button-animation-container navigation-buttons-opacity)} + [quo/button + {:icon-only? true + :type :grey + :background button-background + :size 32 + :accessibility-label :back-button + :on-press #(rf/dispatch [:navigate-back])} + (if (= chat-type constants/community-chat-type) :i/arrow-left :i/close)]] [:f> f-header-content-container {:chat chat :distance-from-list-top distance-from-list-top :all-loaded? all-loaded? :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?}] - [quo/button - {:icon-only? true - :type :grey - :background :blur - :size 32 - :accessibility-label :options-button - :on-press (fn [] - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch [:show-bottom-sheet - {:content (fn [] [actions/chat-actions chat true])}]))} - :i/options]]])) + [reanimated/view {:style (style/button-animation-container navigation-buttons-opacity)} + [quo/button + {:icon-only? true + :type :grey + :background button-background + :size 32 + :accessibility-label :options-button + :on-press (fn [] + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch [:show-bottom-sheet + {:content (fn [] [actions/chat-actions chat true])}]))} + :i/options]]]])) diff --git a/src/status_im/contexts/chat/messenger/messages/view.cljs b/src/status_im/contexts/chat/messenger/messages/view.cljs index fc430260ee..b25eecda3c 100644 --- a/src/status_im/contexts/chat/messenger/messages/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/view.cljs @@ -24,7 +24,7 @@ [rn/keyboard-avoiding-view {:style style/keyboard-avoiding-container :keyboard-vertical-offset (- (:bottom insets))} - [:f> messages.navigation/f-view + [messages.navigation/view {:distance-from-list-top distance-from-list-top :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?}] [:f> list.view/f-messages-list-content diff --git a/src/utils/worklets/chat/messenger/messages.cljs b/src/utils/worklets/chat/messenger/messages.cljs index a9b26b1528..6b91c55402 100644 --- a/src/utils/worklets/chat/messenger/messages.cljs +++ b/src/utils/worklets/chat/messenger/messages.cljs @@ -5,3 +5,9 @@ (defn messages-list-on-scroll [distance-from-list-top chat-list-scroll-y callback] (.messagesListOnScroll ^js worklets distance-from-list-top chat-list-scroll-y callback)) + +(defn use-messages-scrolled-to-threshold + [distance-from-list-top threshold] + (.useMessagesScrolledToThreshold ^js worklets + distance-from-list-top + threshold)) diff --git a/src/utils/worklets/chat/messenger/navigation.cljs b/src/utils/worklets/chat/messenger/navigation.cljs index 60b1d4f087..7fcf4f97bd 100644 --- a/src/utils/worklets/chat/messenger/navigation.cljs +++ b/src/utils/worklets/chat/messenger/navigation.cljs @@ -18,6 +18,10 @@ top-bar-height start-position)) +(defn navigation-buttons-complete-opacity + [chat-screen-layout-calculations-complete?] + (.navigationButtonsCompleteOpacity ^js worklets chat-screen-layout-calculations-complete?)) + (defn interpolate-navigation-view-opacity [props] (.interpolateNavigationViewOpacity ^js worklets (clj->js props)))