diff --git a/src/status_im/ui/components/bottom_sheet/styles.cljs b/src/status_im/ui/components/bottom_sheet/styles.cljs index 8bec3227b95d..2c3dca0a4bdd 100644 --- a/src/status_im/ui/components/bottom_sheet/styles.cljs +++ b/src/status_im/ui/components/bottom_sheet/styles.cljs @@ -26,6 +26,12 @@ :opacity opacity-value :background-color colors/black-transparent-40}) +(defn container-height [content-height] + (+ content-height + border-radius + bottom-padding + top-padding)) + (defn content-container [bottom-value] {:background-color colors/white diff --git a/src/status_im/ui/components/bottom_sheet/view.cljs b/src/status_im/ui/components/bottom_sheet/view.cljs index b428444da944..8247ba5208e2 100644 --- a/src/status_im/ui/components/bottom_sheet/view.cljs +++ b/src/status_im/ui/components/bottom_sheet/view.cljs @@ -16,7 +16,8 @@ (defn- animate [{:keys [opacity new-opacity-value bottom new-bottom-value - duration callback] :as opts}] + duration callback] + :as opts}] (animation/start (animation/parallel [(animation/timing opacity @@ -26,8 +27,7 @@ (animation/spring bottom {:toValue new-bottom-value :duration duration - :tension 40 - :friction 6 + :bounciness 1 :useNativeDriver true})]) (when (fn? callback) callback))) @@ -66,8 +66,10 @@ react/pan-responder (clj->js {:onMoveShouldSetPanResponder (fn [_ state] - (or (< 10 (js/Math.abs (.-dx state))) - (< 5 (js/Math.abs (.-dy state))))) + true + ;; (or (< 10 (js/Math.abs (.-dx state))) + ;; (< 5 (js/Math.abs (.-dy state)))) + ) :onPanResponderMove (on-move opts) :onPanResponderRelease (on-release opts) :onPanResponderTerminate (on-release opts)}))) @@ -107,8 +109,8 @@ internal-visible (reagent/atom false) external-visible (reagent/atom false)] (fn [{:keys [content on-cancel disable-drag? show?] - :or {on-cancel #(re-frame/dispatch [:bottom-sheet/hide])} - :as opts}] + :or {on-cancel #(re-frame/dispatch [:bottom-sheet/hide])} + :as opts}] (let [close-sheet (fn [] (on-close {:opacity-value opacity-value :bottom-value bottom-value @@ -127,30 +129,28 @@ [react/keyboard-avoiding-view {:pointer-events "box-none" :style styles/sheet-wrapper} - [react/animated-view (merge - {:pointer-events "box-none" - :style (styles/content-container bottom-value)} - (when-not disable-drag? - (pan-handlers - (swipe-pan-responder {:bottom-value bottom-value - :opacity-value opacity-value - :height @content-height - :close-sheet close-sheet})))) - [react/view {:style styles/content-header} - [react/view styles/handle]] - [react/animated-view {:on-layout - (fn [evt] - (let [height (+ (->> evt - .-nativeEvent - .-layout - .-height) - styles/border-radius - styles/bottom-padding - styles/top-padding)] - (reset! content-height height) - (on-open {:bottom-value bottom-value - :opacity-value opacity-value - :height height - :internal-visible internal-visible})))} - [content]]]]]])))) + [react/scroll-view {:style {:height "100%" + :width "100%" + :background-color :transparent}} + [react/animated-view (merge + {:pointer-events "box-none" + :style (styles/content-container bottom-value)} + (when-not disable-drag? + (pan-handlers + (swipe-pan-responder {:bottom-value bottom-value + :opacity-value opacity-value + :height @content-height + :close-sheet close-sheet})))) + [react/view {:style styles/content-header} + [react/view styles/handle]] + [react/animated-view {:on-layout + (fn [evt] + (let [height (styles/container-height + (->> evt .-nativeEvent .-layout .-height))] + (reset! content-height height) + (on-open {:bottom-value bottom-value + :opacity-value opacity-value + :height height + :internal-visible internal-visible})))} + [content]]]]]]]))))