[#16066] bottom sheet height (#16285)

Author: ulisesmac

src/quo2/components/drawers/documentation_drawers/view.cljs

@@ -26,15 +26,17 @@
       :style               {:color (colors/theme-colors colors/neutral-100
                                                         colors/white
                                                         (when shell? :dark))}
-      :weight              :semi-bold} title]
+      :weight              :semi-bold}
+     title]
     [rn/view {:style style/content :accessibility-label :documentation-drawer-content}
      content]
     (when show-button?
       [button/button
-       (merge {:size                24
-               :type                (if shell? :blur-bg-outline :outline)
-               :on-press            on-press-button
-               :accessibility-label :documentation-drawer-button
-               :after               button-icon}
-              (when shell? {:override-theme :dark})) button-label])]])
+       (cond-> {:size                24
+                :type                (if shell? :blur-bg-outline :outline)
+                :on-press            on-press-button
+                :accessibility-label :documentation-drawer-button
+                :after               button-icon}
+         shell? (assoc :override-theme :dark))
+       button-label])]])
 

src/status_im2/common/bottom_sheet/style.cljs

@@ -16,7 +16,8 @@
 (defn sheet
   [{:keys [top bottom]} window-height override-theme padding-bottom-override shell?]
   {:position                :absolute
-   :max-height              (- window-height top 20)
+   :max-height              (cond-> window-height
+                              platform/ios? (- top))
    :z-index                 1
    :bottom                  0
    :left                    0

src/status_im2/common/bottom_sheet/view.cljs

@@ -1,14 +1,14 @@
 (ns status-im2.common.bottom-sheet.view
-  (:require [utils.re-frame :as rf]
-            [react-native.core :as rn]
+  (:require [oops.core :as oops]
             [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]
-            [status-im2.common.bottom-sheet.style :as style]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]
             [react-native.gesture :as gesture]
-            [oops.core :as oops]
             [react-native.hooks :as hooks]
-            [react-native.blur :as blur]
-            [reagent.core :as reagent]))
+            [react-native.reanimated :as reanimated]
+            [reagent.core :as reagent]
+            [status-im2.common.bottom-sheet.style :as style]
+            [utils.re-frame :as rf]))
 
 (def duration 450)
 (def timing-options #js {:duration duration})
@@ -62,12 +62,15 @@
             translate-y             (reanimated/use-shared-value window-height)
             sheet-gesture           (get-sheet-gesture translate-y bg-opacity window-height on-close)]
         (rn/use-effect
-         #(if hide? (hide translate-y bg-opacity window-height on-close) (show translate-y bg-opacity))
+         #(if hide?
+            (hide translate-y bg-opacity window-height on-close)
+            (show translate-y bg-opacity))
          [hide?])
-        (hooks/use-back-handler #(do (when (fn? on-close)
-                                       (on-close))
-                                     (rf/dispatch [:hide-bottom-sheet])
-                                     true))
+        (hooks/use-back-handler (fn []
+                                  (when (fn? on-close)
+                                    (on-close))
+                                  (rf/dispatch [:hide-bottom-sheet])
+                                  true))
         [rn/view {:style {:flex 1}}
          ;; backdrop
          [rn/touchable-without-feedback {:on-press #(rf/dispatch [:hide-bottom-sheet])}
@@ -86,8 +89,8 @@
                                      padding-bottom-override
                                      shell?))
             :on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))}
-           (when shell? [blur/ios-view {:style style/shell-bg}])
-
+           (when shell?
+             [blur/ios-view {:style style/shell-bg}])
            (when selected-item
              [rn/view
               [rn/view {:style (style/selected-item override-theme window-height @sheet-height insets)}

src/status_im2/contexts/onboarding/profiles/view.cljs

@@ -33,7 +33,9 @@
 
 (defn show-new-account-options
   []
-  (rf/dispatch [:show-bottom-sheet {:content new-account-options}]))
+  (rf/dispatch [:show-bottom-sheet
+                {:content new-account-options
+                 :shell?  true}]))
 
 (defn delete-profile-confirmation
   [key-uid context]

src/status_im2/navigation/view.cljs

@@ -82,9 +82,7 @@
          {:style                    {:position :relative :flex 1}
           :keyboard-vertical-offset (- (max 20 (:bottom insets)))}
          (when sheet
-           [:f>
-            bottom-sheet/f-view
-            {:insets insets :hide? hide?}
+           [:f> bottom-sheet/f-view {:insets insets :hide? hide?}
             sheet])]]))))
 
 (def toasts (reagent/reactify-component toasts/toasts))