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