Skip to content

Commit

Permalink
Handle edge cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibrkhalil
ibrkhalil committed Oct 28, 2023
1 parent e20046f commit 4db4106
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 57 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"react-native-image-crop-picker": "git+https://github.com/status-im/react-native-image-crop-picker.git#refs/tags/v0.36.2-status.0",
"react-native-image-resizer": "^1.2.3",
"react-native-image-viewing": "git+https://github.com/status-im/react-native-image-viewing.git#refs/tags/v0.2.1.status",
"react-native-intersection-observer": "^0.2.0",
"react-native-keychain": "git+https://github.com/status-im/react-native-keychain.git#refs/tags/v.3.0.0-5-status",
"react-native-languages": "^3.0.2",
"react-native-linear-gradient": "^2.8.0",
Expand Down
13 changes: 13 additions & 0 deletions src/react_native/react_native_intersection_observer.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
(ns react-native.react-native-intersection-observer
(:require
["react-native-intersection-observer" :as rnio]
[react-native.flat-list :refer [base-list-props]]
[reagent.core :as reagent]))

(def view (reagent/adapt-react-class rnio/InView))
(def flat-list-comp (reagent/adapt-react-class rnio/IOFlatList))

(defn flat-list
[props]
[flat-list-comp (base-list-props props)])

70 changes: 38 additions & 32 deletions src/status_im2/contexts/chat/messages/list/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
[react-native.core :as rn]
[react-native.hooks :as hooks]
[react-native.platform :as platform]
[react-native.react-native-intersection-observer :as rnio]
[react-native.reanimated :as reanimated]
[status-im.ui.screens.chat.group :as chat.group]
[status-im.ui.screens.chat.message.gap :as message.gap]
Expand Down Expand Up @@ -193,7 +194,7 @@

(defn f-list-footer
[{:keys [chat scroll-y cover-bg-color on-layout theme messages-view-height
messages-view-header-height]}]
messages-view-header-height big-name-visible?]}]
(let [{:keys [chat-id chat-name emoji chat-type
group-chat]} chat
all-loaded? (rf/sub [:chats/all-loaded? chat-id])
Expand Down Expand Up @@ -226,9 +227,11 @@
:display-name display-name
:online? online?
:profile-picture photo-path}])]
[rn/view
{:style {:flex-direction :row
:margin-top (if group-chat 54 12)}}
[rnio/view
{:onChange (fn [view-visible?]
(reset! big-name-visible? view-visible?))
:style {:flex-direction :row
:margin-top (if group-chat 54 12)}}
[quo/text
{:weight :semi-bold
:size :heading-1
Expand Down Expand Up @@ -274,36 +277,41 @@
[message/message message-data context keyboard-shown?])]))

(defn scroll-handler
[event scroll-y animate-topbar-name?]
[event scroll-y animate-topbar-name? more-than-two-messages? big-name-visible? keyboard-shown? timeout]
(let [content-size-y (- (oops/oget event "nativeEvent.contentSize.height")
(oops/oget event "nativeEvent.layoutMeasurement.height"))
current-y (oops/oget event "nativeEvent.contentOffset.y")]
(when (pos? (- content-size-y current-y))
(if
(< scroll-y-middle-big-name (- content-size-y current-y))
(reset! animate-topbar-name? true)
(reset! animate-topbar-name? false))
(reanimated/set-shared-value scroll-y (- content-size-y current-y)))))
(when-not timeout
(timeout #(if
(and
(not @big-name-visible?)
more-than-two-messages?
keyboard-shown?)
(reset! animate-topbar-name? true)
(reset! animate-topbar-name? false))))
(reanimated/set-shared-value scroll-y (- content-size-y current-y))))

(defn f-messages-list-content
[{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown? inner-state-atoms
animate-topbar-name?]}]
animate-topbar-name? big-name-visible?]}]
(let [theme (quo.theme/use-theme-value)
{window-height :height} (rn/get-window)
{:keys [keyboard-height]} (hooks/use-keyboard)
context (rf/sub [:chats/current-chat-message-list-view-context])
messages (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)])
recording? (rf/sub [:chats/recording?])
all-loaded? (rf/sub [:chats/all-loaded? (:chat-id chat)])
less-than-two-messages? (<= 2 (count messages))
more-than-two-messages? (<= 2 (count messages))
{:keys [show-floating-scroll-down-button?
messages-view-height
messages-view-header-height]} inner-state-atoms]
[rn/view {:style {:flex 1}}
[rn/flat-list
{:key-fn list-key-fn
[rnio/flat-list
{:rootMargin {:bottom -35}
:key-fn list-key-fn
:ref list-ref
:bounces false
:deceleration-rate "fast"
:header [:<>
[list-header insets (:able-to-send-message? context) theme]
(when (= (:chat-type chat) constants/private-group-chat-type)
Expand All @@ -317,7 +325,8 @@
%
messages-view-header-height)
:messages-view-header-height messages-view-header-height
:messages-view-height messages-view-height}]
:messages-view-height messages-view-height
:big-name-visible? big-name-visible?}]
:data messages
:render-data {:theme theme
:context context
Expand All @@ -326,21 +335,10 @@
:render-fn render-fn
:on-viewable-items-changed on-viewable-items-changed
:on-content-size-change (fn [_ y]
(if (or
(and keyboard-shown?
less-than-two-messages?
(> scroll-y-values-small-name-big-name-touching
(reanimated/get-shared-value scroll-y))
(< content-height-with-two-messages
(reanimated/get-shared-value content-height)))
(< scroll-y-middle-big-name
(reanimated/get-shared-value scroll-y)))
(reset! animate-topbar-name? true)
(reset! animate-topbar-name? false))
;; NOTE(alwx): here we set the initial value of `scroll-y`
;; which is needed because by default the chat is
;; scrolled to the bottom and no initial `on-scroll`
;; event is getting triggered
;; NOTE(alwx): here we set the initial value of
;; `scroll-y` which is needed because by default the
;; chat is scrolled to the bottom and no initial
;; `on-scroll` event is getting triggered
(let [scroll-y-shared (reanimated/get-shared-value
scroll-y)
content-height-shared (reanimated/get-shared-value
Expand All @@ -366,7 +364,15 @@
:on-momentum-scroll-end state/stop-scrolling
:scroll-event-throttle 16
:on-scroll (fn [event]
(scroll-handler event scroll-y animate-topbar-name?)

(let [timeout #(js/setTimeout % 250)]
(scroll-handler event
scroll-y
animate-topbar-name?
more-than-two-messages?
big-name-visible?
keyboard-shown?
timeout))
(on-scroll event show-floating-scroll-down-button?))
:style (add-inverted-y-android
{:background-color (if all-loaded?
Expand Down
41 changes: 23 additions & 18 deletions src/status_im2/contexts/chat/messages/navigation/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,37 @@

(defn f-view
[{:keys [theme scroll-y chat chat-screen-loaded? all-loaded? display-name online? photo-path
back-icon animate-topbar-name? keyboard-shown?]}]
back-icon animate-topbar-name? keyboard-shown? big-name-visible?]}]
(let [{:keys [group-chat chat-id]} chat
opacity-animation (reanimated/interpolate scroll-y
[title-opacity-interpolation-start
title-opacity-interpolation-end]
[0 1]
{:extrapolateLeft "clamp"
:extrapolateRight "extend"})
opacity-animation (reanimated/use-shared-value 0)
banner-opacity-animation (reanimated/interpolate scroll-y
[(+ style/navigation-bar-height 150)
(+ style/navigation-bar-height 200)]
[0 1]
{:extrapolateLeft "clamp"
:extrapolateRight "clamp"})
translate-animation (reanimated/use-shared-value title-opacity-interpolation-start)
title-opacity-animation (reanimated/use-shared-value 0)]
(rn/use-effect (fn []
(if (or (and keyboard-shown?
(neg? (reanimated/get-shared-value scroll-y)))
@animate-topbar-name?)
(do (reanimated/animate title-opacity-animation 1)
(reanimated/animate opacity-animation 1)
(reanimated/animate translate-animation 0))
(do (reanimated/animate title-opacity-animation 0)
(reanimated/animate translate-animation title-opacity-interpolation-start))))
[@animate-topbar-name?])
title-opacity-animation (reanimated/use-shared-value 0)
messages (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)])
more-than-two-messages? (<= 2 (count messages))]
(rn/use-effect
(fn []
(if (or (and more-than-two-messages?
(< title-opacity-interpolation-start (reanimated/get-shared-value scroll-y))
keyboard-shown?)
@animate-topbar-name?
(not @big-name-visible?)
(and (neg? (reanimated/get-shared-value scroll-y))
more-than-two-messages?
keyboard-shown?))
(do
(reanimated/animate title-opacity-animation 1)
(reanimated/animate opacity-animation 1)
(reanimated/animate translate-animation 0))
(do (reanimated/animate title-opacity-animation 0)
(reanimated/animate opacity-animation 0)
(reanimated/animate translate-animation title-opacity-interpolation-start))))
[@animate-topbar-name? @big-name-visible? keyboard-shown?])
[rn/view {:style (style/navigation-view chat-screen-loaded?)}
[reanimated/view
{:style (style/animated-background-view all-loaded? opacity-animation nil)}]
Expand Down
16 changes: 10 additions & 6 deletions src/status_im2/contexts/chat/messages/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
[utils.re-frame :as rf]))

(defn f-chat
[{:keys [extra-keyboard-height show-floating-scroll-down-button? animate-topbar-name?]
[{:keys [extra-keyboard-height show-floating-scroll-down-button? animate-topbar-name?
big-name-visible?]
:as inner-state-atoms}]
(let [insets (safe-area/get-insets)
scroll-y (reanimated/use-shared-value 0)
Expand Down Expand Up @@ -58,8 +59,8 @@
(- (reanimated/get-shared-value scroll-y)
@extra-keyboard-height))))
[keyboard-shown keyboard-height])
;; Note - Don't pass `behavior :height` to keyboard avoiding view,
;; It breaks composer - https://github.com/status-im/status-mobile/issues/16595
;; Note - Don't pass `behavior :height` to keyboard avoiding view,. It breaks composer -
;; https://github.com/status-im/status-mobile/issues/16595
[rn/keyboard-avoiding-view
{:style (style/keyboard-avoiding-container insets)
:keyboard-vertical-offset (- (:bottom insets))}
Expand All @@ -72,7 +73,8 @@
:cover-bg-color :turquoise
:keyboard-shown? keyboard-shown
:inner-state-atoms inner-state-atoms
:animate-topbar-name? animate-topbar-name?}]
:animate-topbar-name? animate-topbar-name?
:big-name-visible? big-name-visible?}]

[messages.navigation/navigation-view
{:scroll-y scroll-y
Expand All @@ -84,7 +86,8 @@
:display-name display-name
:online? online?
:photo-path photo-path
:keyboard-shown? keyboard-shown}]
:keyboard-shown? keyboard-shown
:big-name-visible? big-name-visible?}]

(when (seq chat)
(if able-to-send-message?
Expand All @@ -101,5 +104,6 @@
:show-floating-scroll-down-button? (reagent/atom false)
:messages-view-height (reagent/atom 0)
:messages-view-header-height (reagent/atom 0)
:animate-topbar-name? (reagent/atom false)}]
:animate-topbar-name? (reagent/atom false)
:big-name-visible? (reagent/atom false)}]
[:f> f-chat inner-state-atoms]))
9 changes: 8 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7008,7 +7008,7 @@ lodash.union@^4.6.0:
resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
integrity sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=

lodash@4.17.x, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
lodash@4.17.x, lodash@^4.0.0, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
Expand Down Expand Up @@ -8875,6 +8875,13 @@ react-native-image-resizer@^1.2.3:
version "0.2.1"
resolved "git+https://github.com/status-im/react-native-image-viewing.git#94af89356f2e4e08f462370c77e4778d7626ce2f"

react-native-intersection-observer@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/react-native-intersection-observer/-/react-native-intersection-observer-0.2.0.tgz#15a07cf2adbab6cd9821986168d5484405674ad9"
integrity sha512-h48i7AjYl1BLkfTupiJqv7dLUdLmxBIf4AxlrzvUvy5PLr3bnEFGTAMjaeUUcQklkdKSHRqIXP8wz1ex49my4g==
dependencies:
lodash "^4.0.0"

"react-native-keychain@git+https://github.com/status-im/react-native-keychain.git#refs/tags/v.3.0.0-5-status":
version "3.0.0-rc.3"
resolved "git+https://github.com/status-im/react-native-keychain.git#9b0d9b283116947cf125e12b6d1d17203604f0d9"
Expand Down

0 comments on commit 4db4106

Please sign in to comment.