From 11c798817ee90ef5d469000870f4dbfef893cb0c Mon Sep 17 00:00:00 2001 From: John Ngei Date: Wed, 9 Aug 2023 00:19:01 +0300 Subject: [PATCH] show continue button background on scroll This pr. add blur background on continue button on create profile screen should the button container cover the profile color picker when the keyboard is shown * show button background on scroll * fix show button on scroll different platforms * fix: button container loading * fix: button container background delay --- ios/Podfile.lock | 4 +- .../onboarding/create_profile/style.cljs | 18 ++-- .../onboarding/create_profile/view.cljs | 94 +++++++++++++------ 3 files changed, 79 insertions(+), 37 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index bc40f0a98a..aca4065432 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -707,7 +707,7 @@ SPEC CHECKSUMS: FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991 FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 - glog: 166d178815c300e8126de9a7900101814eb16253 + glog: d93527a855523adb8c113837db4be68fb00e230d HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352 Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8 libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef @@ -772,7 +772,7 @@ SPEC CHECKSUMS: RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467 RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071 - RNReanimated: 3e375fc41870cc66c5152a38514c450f7adbc3e1 + RNReanimated: d0db0ee059c33381bca787a2193c27e52750ccaf RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8 RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9 diff --git a/src/status_im2/contexts/onboarding/create_profile/style.cljs b/src/status_im2/contexts/onboarding/create_profile/style.cljs index ce5e7ec3e5..a81e361844 100644 --- a/src/status_im2/contexts/onboarding/create_profile/style.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/style.cljs @@ -16,11 +16,16 @@ :align-self :flex-end :height 64}) -(def view-button-container - (merge button-container {:margin-bottom 34})) +(defn view-button-container + [keyboard-shown?] + (merge button-container + (if platform/ios? + {:margin-bottom (if keyboard-shown? 0 34)} + {:margin-bottom (if keyboard-shown? 12 34)}))) (def blur-button-container - (merge button-container (when platform/android? {:padding-bottom 12}))) + (merge button-container + (when platform/android? {:padding-bottom 12}))) (def page-container {:position :absolute @@ -44,13 +49,10 @@ :margin-bottom 16}) (def content-container - {:flex 1 - :padding-horizontal 20}) + {:padding-horizontal 20}) (def input-container - {:flex 1 - :align-items :flex-start - :margin-bottom 24}) + {:align-items :flex-start}) (def profile-input-container {:flex-direction :row diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs index efba9e236d..64853cd975 100644 --- a/src/status_im2/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs @@ -6,6 +6,7 @@ [utils.i18n :as i18n] [react-native.core :as rn] [react-native.safe-area :as safe-area] + [react-native.hooks :as hooks] [reagent.core :as reagent] [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar] [status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu] @@ -30,6 +31,8 @@ (defn has-special-characters [s] (not (re-find status-regex s))) (def min-length 5) (defn length-not-valid [s] (< (count (string/trim (str s))) min-length)) +(def scroll-view-height (reagent/atom 0)) +(def content-container-height (reagent/atom 0)) (defn validation-message [s] @@ -46,35 +49,62 @@ (has-emojis s) (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)}) :else nil)) + +(defn show-button-background + [keyboard-height keyboard-shown] + (let [button-container-height 64 + keyboard-view-height (+ keyboard-height button-container-height)] + (when keyboard-shown + (cond + platform/android? + (< (- @scroll-view-height button-container-height) @content-container-height) + + platform/ios? + (< (- @scroll-view-height keyboard-view-height) @content-container-height) + + :else + false)))) + + (defn button-container - [keyboard-shown? children] - [rn/view {:style {:margin-top :auto}} - (if keyboard-shown? - [blur/ios-view - {:blur-amount 34 - :blur-type :transparent - :overlay-color :transparent - :background-color (if platform/android? colors/neutral-100 colors/neutral-80-opa-1-blur) - :style style/blur-button-container} - children] - [rn/view {:style style/view-button-container} - children])]) + [show-keyboard? keyboard-shown show-background? keyboard-height children] + (let [height (reagent/atom 0)] + (reset! height (if show-keyboard? (if keyboard-shown keyboard-height 0) 0)) + [rn/view {:style {:margin-top :auto}} + (cond + (and (> @height 0) show-background?) + [blur/ios-view + (when keyboard-shown + {:blur-amount 34 + :blur-type :transparent + :overlay-color :transparent + :background-color (if platform/android? colors/neutral-100 colors/neutral-80-opa-1-blur) + :style style/blur-button-container}) + children] + + (and (> @height 0) (not show-background?)) + [rn/view {:style (style/view-button-container true)} + children] + + (not show-keyboard?) + [rn/view {:style (style/view-button-container false)} + children])])) (defn- f-page [{:keys [onboarding-profile-data navigation-bar-top]}] - (reagent/with-let [keyboard-shown? (reagent/atom false) + (reagent/with-let [show-keyboard? (reagent/atom false) show-listener (oops/ocall rn/keyboard "addListener" (if platform/android? "keyboardDidShow" "keyboardWillShow") - #(reset! keyboard-shown? true)) + #(reset! show-keyboard? true)) hide-listener (oops/ocall rn/keyboard "addListener" (if platform/android? "keyboardDidHide" "keyboardWillHide") - #(reset! keyboard-shown? false)) + #(reset! show-keyboard? false)) {:keys [image-path display-name color]} onboarding-profile-data full-name (reagent/atom display-name) validation-msg (reagent/atom (validation-message @@ -88,22 +118,31 @@ profile-pic (reagent/atom image-path) on-change-profile-pic #(reset! profile-pic %) on-change #(reset! custom-color %)] - (let [name-too-short? (length-not-valid @full-name) - valid-name? (and (not @validation-msg) (not name-too-short?)) - info-message (if @validation-msg - @validation-msg - (i18n/label :t/minimum-characters - {:min-chars min-length})) - info-type (cond @validation-msg :error - name-too-short? :default - :else :success)] + (let [name-too-short? (length-not-valid @full-name) + valid-name? (and (not @validation-msg) (not name-too-short?)) + info-message (if @validation-msg + @validation-msg + (i18n/label :t/minimum-characters + {:min-chars min-length})) + info-type (cond @validation-msg :error + name-too-short? :default + :else :success) + {:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard) + show-background? (show-button-background keyboard-height + keyboard-shown)] [rn/view {:style style/page-container} [navigation-bar/navigation-bar {:stack-id :new-to-status :top navigation-bar-top}] [rn/scroll-view - {:content-container-style {:flexGrow 1}} - [rn/view {:style style/page-container} + {:on-layout (fn [event] + (let [height (oops/oget event "nativeEvent.layout.height")] + (reset! scroll-view-height height))) + :content-container-style {:flexGrow 1}} + [rn/view + {:on-layout (fn [event] + (let [height (oops/oget event "nativeEvent.layout.height")] + (reset! content-container-height height)))} [rn/view {:style style/content-container} [quo/text @@ -153,6 +192,7 @@ :default-selected? :blue :selected @custom-color :on-change on-change}]]]]] + [rn/keyboard-avoiding-view {:style {:position :absolute :top 0 @@ -160,7 +200,7 @@ :left 0 :right 0} :pointer-events :box-none} - [button-container @keyboard-shown? + [button-container @show-keyboard? keyboard-shown show-background? keyboard-height [quo/button {:accessibility-label :submit-create-profile-button :type :primary