test

src/react_native/reanimated.cljs

@@ -1,5 +1,6 @@
 (ns react-native.reanimated
   (:require ["react-native" :as rn]
+            ["@react-native-community/blur" :as blur]
             ["react-native-linear-gradient" :default LinearGradient]
             ["react-native-reanimated" :default reanimated :refer
              (useSharedValue useAnimatedStyle
@@ -27,6 +28,7 @@
 (def view (reagent/adapt-react-class (.-View reanimated)))
 (def image (reagent/adapt-react-class (.-Image reanimated)))
 (def touchable-opacity (create-animated-component (.-TouchableOpacity ^js rn)))
+(def blur-view (create-animated-component (.-BlurView ^js blur)))
 
 (def linear-gradient (create-animated-component LinearGradient))
 

src/status_im2/contexts/shell/animation.cljs

@@ -10,7 +10,7 @@
 (def selected-stack-id (atom nil))
 (def screen-height (atom nil))
 (def home-stack-state (atom shell.constants/close-with-animation))
-(def pass-through? (atom false)) ;; TODO - Use dynamic pass-through for transparent bottom tabs
+(def pass-through? (atom true)) ;; TODO - Use dynamic pass-through for transparent bottom tabs
 (def shared-values-atom (atom nil))
 
 ;; Reagent atoms used for lazily loading home screen tabs

src/status_im2/contexts/shell/bottom_tabs.cljs

@@ -1,6 +1,8 @@
 (ns status-im2.contexts.shell.bottom-tabs
   (:require [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]
             [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]
             [status-im2.contexts.shell.animation :as animation]
             [status-im2.contexts.shell.constants :as shell.constants]
@@ -17,6 +19,23 @@
     :on-press            #(animation/bottom-tab-on-press stack-id)
     :accessibility-label (str (name stack-id) "-tab")}])
 
+(defn tabs [shared-values]
+  [rn/view {:style (styles/bottom-tabs)}
+   [bottom-tab :i/communities :communities-stack shared-values]
+   [bottom-tab :i/messages :chats-stack shared-values]
+   [bottom-tab :i/wallet :wallet-stack shared-values]
+   [bottom-tab :i/browser :browser-stack shared-values]])
+
+(defn blur-view [shared-values]
+  [reanimated/blur-view
+   {:style {:height   120
+            :position :absolute
+            :width    "1%"
+            :bottom   1.5}
+    :blur-amount   25
+    :blur-type     :dark
+    :overlay-color colors/neutral-100-opa-70}])
+
 (defn bottom-tabs
   []
   [:f>
@@ -28,8 +47,5 @@
                            original-style)]
        (animation/load-stack @animation/selected-stack-id)
        [reanimated/view {:style animated-style}
-        [rn/view {:style (styles/bottom-tabs)}
-         [bottom-tab :i/communities :communities-stack shared-values]
-         [bottom-tab :i/messages :chats-stack shared-values]
-         [bottom-tab :i/wallet :wallet-stack shared-values]
-         [bottom-tab :i/browser :browser-stack shared-values]]]))])
+        [blur-view shared-values]
+        [tabs shared-values]]))])

src/status_im2/contexts/shell/style.cljs

@@ -7,15 +7,15 @@
 ;; Bottom Tabs
 (defn bottom-tabs-container
   [pass-through?]
-  {:background-color    (if pass-through? colors/neutral-100-opa-70 colors/neutral-100)
+  {:background-color    (if pass-through? :transparent colors/neutral-100)
    :flex                1
    :align-items         :center
-   :flex-direction      :column
    :height              (shell.constants/bottom-tabs-container-height)
    :position            :absolute
    :bottom              -1
    :right               0
    :left                0
+   :overflow            :hidden
    :accessibility-label :bottom-tabs-container})
 
 (defn bottom-tabs
@@ -26,6 +26,8 @@
    :flex                1
    :accessibility-label :bottom-tabs})
 
+;; (defn bottom-tabs-blur-overlay
+
 ;; Home Stack
 (defn home-stack
   []