status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix Chat input overlaps the last message on IPhone 14 (#17113)

This commit is contained in:
Parvesh Monu 2023-08-30 14:35:14 +05:30 committed by GitHub
parent 551ac22085
commit 5dc874a4cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 74 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/status_im2/contexts/chat/messages/list/style.cljs
View File

@ -6,7 +6,6 @@
(defonce ^:const cover-height 168) (defonce ^:const cover-height 168)
(defonce ^:const overscroll-cover-height 2000) (defonce ^:const overscroll-cover-height 2000)
(defonce ^:const header-avatar-top-offset -36) (defonce ^:const header-avatar-top-offset -36)
(defonce ^:const messages-list-bottom-offset 16)
(defn keyboard-avoiding-container (defn keyboard-avoiding-container
[{:keys [top]}] [{:keys [top]}]

149
src/status_im2/contexts/chat/messages/list/view.cljs
View File

@ -35,16 +35,11 @@
(defn list-key-fn [{:keys [message-id value]}] (or message-id value)) (defn list-key-fn [{:keys [message-id value]}] (or message-id value))
(defn list-ref [ref] (reset! messages-list-ref ref)) (defn list-ref [ref] (reset! messages-list-ref ref))
(defn scroll-to-offset
[position]
(some-> ^js @messages-list-ref
(.scrollToOffset #js
{:offset position
:animated true})))
(defn scroll-to-bottom (defn scroll-to-bottom
[] []
(scroll-to-offset (- 0 style/messages-list-bottom-offset))) (some-> ^js @messages-list-ref
(.scrollToOffset #js
{:animated true})))
(defn on-scroll (defn on-scroll
[evt] [evt]
@ -129,14 +124,11 @@
[insets able-to-send-message?] [insets able-to-send-message?]
[rn/view [rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-95) {:background-color (colors/theme-colors colors/white colors/neutral-95)
:margin-bottom (when platform/ios? (- style/overscroll-cover-height))
:height (+ (if able-to-send-message? :height (+ (if able-to-send-message?
(+ composer.constants/composer-default-height (+ composer.constants/composer-default-height
jump-to.constants/floating-shell-button-height jump-to.constants/floating-shell-button-height
(:bottom insets)) (:bottom insets))
(- 70 (:bottom insets))) (- 70 (:bottom insets))))}])
(when platform/ios?
(- style/overscroll-cover-height (:top insets))))}])
(defn f-list-footer-avatar (defn f-list-footer-avatar
[{:keys [scroll-y display-name online? profile-picture]}] [{:keys [scroll-y display-name online? profile-picture]}]
@ -282,70 +274,77 @@
all-loaded? (rf/sub [:chats/all-loaded? (:chat-id chat)])] all-loaded? (rf/sub [:chats/all-loaded? (:chat-id chat)])]
[rn/view {:style {:flex 1}} [rn/view {:style {:flex 1}}
[rn/flat-list [rn/flat-list
{:key-fn list-key-fn {:key-fn list-key-fn
:ref list-ref :ref list-ref
:header [:<> :header [:<>
[list-header insets (:able-to-send-message? context)] [list-header insets (:able-to-send-message? context)]
(when (= (:chat-type chat) constants/private-group-chat-type) (when (= (:chat-type chat) constants/private-group-chat-type)
[list-group-chat-header chat])] [list-group-chat-header chat])]
:footer [list-footer :footer [list-footer
{:chat chat {:chat chat
:scroll-y scroll-y :scroll-y scroll-y
:cover-bg-color cover-bg-color :cover-bg-color cover-bg-color
:on-layout footer-on-layout}] :on-layout footer-on-layout}]
:data messages :data messages
:render-data {:context context :render-data {:context context
:keyboard-shown? keyboard-shown? :keyboard-shown? keyboard-shown?
:insets insets} :insets insets}
:render-fn render-fn :render-fn render-fn
:on-viewable-items-changed on-viewable-items-changed :on-viewable-items-changed on-viewable-items-changed
:on-content-size-change (fn [_ y] :on-content-size-change (fn [_ y]
;; NOTE(alwx): here we set the initial value of `scroll-y` ;; NOTE(alwx): here we set the initial value of `scroll-y`
;; which is needed because by default the chat is scrolled to the ;; which is needed because by default the chat is scrolled to
;; bottom ;; the
;; and no initial `on-scroll` event is getting triggered ;; bottom
(let [scroll-y-shared (reanimated/get-shared-value scroll-y) ;; and no initial `on-scroll` event is getting triggered
content-height-shared (reanimated/get-shared-value (let [scroll-y-shared (reanimated/get-shared-value
content-height)] scroll-y)
(when (or (= scroll-y-shared 0) content-height-shared (reanimated/get-shared-value
(> (Math/abs (- content-height-shared y)) content-height)]
min-message-height)) (when (or (= scroll-y-shared 0)
(reanimated/set-shared-value scroll-y (> (Math/abs (- content-height-shared y))
(- y min-message-height))
window-height (reanimated/set-shared-value scroll-y
(- (when keyboard-shown? (- y
keyboard-height)))) window-height
(reanimated/set-shared-value content-height y)))) (- (when keyboard-shown?
:on-end-reached #(list-on-end-reached scroll-y) keyboard-height))))
:on-scroll-to-index-failed identity (reanimated/set-shared-value content-height y))))
:scroll-indicator-insets {:top (if (:able-to-send-message? context) :on-end-reached #(list-on-end-reached scroll-y)
(- composer.constants/composer-default-height 16) :on-scroll-to-index-failed identity
0)} :scroll-indicator-insets {:top (if (:able-to-send-message? context)
(- composer.constants/composer-default-height 16)
:keyboard-dismiss-mode :interactive 0)}
:keyboard-should-persist-taps :always :keyboard-dismiss-mode :interactive
:on-scroll-begin-drag rn/dismiss-keyboard! :keyboard-should-persist-taps :always
:on-momentum-scroll-begin state/start-scrolling :on-scroll-begin-drag rn/dismiss-keyboard!
:on-momentum-scroll-end state/stop-scrolling :on-momentum-scroll-begin state/start-scrolling
:scroll-event-throttle 16 :on-momentum-scroll-end state/stop-scrolling
:on-scroll (fn [event] :scroll-event-throttle 16
(scroll-handler event scroll-y) :on-scroll (fn [event]
(when on-scroll (scroll-handler event scroll-y)
(on-scroll event))) (when on-scroll
:style (add-inverted-y-android (on-scroll event)))
{:background-color (if all-loaded? :style (add-inverted-y-android
(colors/theme-colors {:background-color (if all-loaded?
(colors/custom-color cover-bg-color 50 20) (colors/theme-colors
(colors/custom-color cover-bg-color 50 40)) (colors/custom-color cover-bg-color
(colors/theme-colors 50
colors/white 20)
colors/neutral-95))}) (colors/custom-color cover-bg-color
50
40))
(colors/theme-colors
colors/white
colors/neutral-95))})
;;TODO(rasom) https://github.com/facebook/react-native/issues/30034 ;;TODO(rasom) https://github.com/facebook/react-native/issues/30034
:inverted (when platform/ios? true) :inverted (when platform/ios? true)
:on-layout (fn [e] :on-layout (fn [e]
(let [layout-height (oops/oget e "nativeEvent.layout.height")] (let [layout-height (oops/oget e
(reset! messages-view-height layout-height))) "nativeEvent.layout.height")]
:scroll-enabled (not recording?)}]])) (reset! messages-view-height layout-height)))
:scroll-enabled (not recording?)
:content-inset-adjustment-behavior :never}]]))
(defn message-list-content-view (defn message-list-content-view
[props] [props]