feat: add in-app notification, refactor toast (#15642)

doc/component-tests-overview.md

@@ -23,13 +23,13 @@ setups and runs the test suite once.
 setups and runs the test suite and watches for code changes will then retrigger the test suite.
 
 ## Writing Tests
-New test files will need their namespace added to either the file "src/quo2/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadowcljs config discussed below.
+New test files will need their namespace added to either the file "src/quo2/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadow-cljs config discussed below.
 
 
 ### Best practices
 For the moment we will keep best practices for tests in our other guidelines document:
 
-To that point these guidelines will follow the conventions of Jest and React Native Testing Library recomendations and Status mobile will just stack their preferences on top.
+To that point these guidelines will follow the conventions of Jest and React Native Testing Library recommendations and Status mobile will just stack their preferences on top.
 
 ### Utilities
 There is a file of utility functions defined in "src/test_helpers/component.cljs" and "src/test_helpers/component.clj". It will be great to use these utilities and to add any common testing tools to these files as it should make writing tests easier and faster.

src/quo/previews/bottom_sheet.cljs

@@ -72,6 +72,6 @@
       :flex             1}
      [rn/flat-list
       {:flex                         1
-       :keyboardShouldPersistTaps :always
+       :keyboard-should-persist-taps :always
        :header                       [cool-preview]
        :key-fn                       str}]]))

src/quo/previews/button.cljs

@@ -80,6 +80,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/quo/previews/header.cljs

@@ -45,7 +45,7 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :data                         all-props
      :render-fn                    render-item
      :key-fn                       str}]])

src/quo/previews/lists.cljs

@@ -114,7 +114,7 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :data                         all-props
      :render-fn                    render-item

src/quo/previews/text.cljs

@@ -92,7 +92,7 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :data                         all-props
      :render-fn                    render-item

src/quo/previews/text_input.cljs

@@ -84,7 +84,7 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :data                         all-props
      :render-fn                    render-item

src/quo/previews/tooltip.cljs

@@ -32,7 +32,7 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :data                         all-props
      :render-fn                    render-item
      :key-fn                       str}]])

src/quo2/components/notifications/notification/component_spec.cljs

@@ -0,0 +1,38 @@
+(ns quo2.components.notifications.notification.component-spec
+  (:require
+    [quo2.components.markdown.text :as text]
+    [quo2.components.notifications.notification.view :as notification]
+    [test-helpers.component :as h]))
+
+(h/describe "notification"
+  (h/test "empty notification"
+    (h/render [notification/notification {}])
+    (h/is-null (h/query-by-label-text :notification-avatar))
+    (h/is-null (h/query-by-label-text :notification-header))
+    (h/is-null (h/query-by-label-text :notification-body)))
+  (h/test "notification with title and text"
+    (h/render [notification/notification
+               {:title        "title"
+                :title-weight :medium
+                :text         "text"}])
+    (-> (h/expect (h/get-by-label-text :notification-header))
+        (.toHaveTextContent "title"))
+    (-> (h/expect (h/get-by-label-text :notification-body))
+        (.toHaveTextContent "text")))
+  (h/test "notification with custom input"
+    (h/render [notification/notification
+               {:header [text/text {:accessibility-label :header} "custom header"]
+                :avatar [text/text {:accessibility-label :avatar} "custom avatar"]
+                :body   [text/text {:accessibility-label :body} "custom body"]}])
+    (h/is-truthy (h/get-by-label-text :notification-avatar))
+    (h/is-truthy (h/get-by-label-text :notification-header))
+    (h/is-truthy (h/get-by-label-text :notification-body))
+    (h/is-truthy (h/get-by-label-text :avatar))
+    (h/is-truthy (h/get-by-label-text :header))
+    (h/is-truthy (h/get-by-label-text :body))
+    (-> (h/expect (h/get-by-label-text :notification-header))
+        (.toHaveTextContent "custom header"))
+    (-> (h/expect (h/get-by-label-text :notification-avatar))
+        (.toHaveTextContent "custom avatar"))
+    (-> (h/expect (h/get-by-label-text :notification-body))
+        (.toHaveTextContent "custom body"))))

src/quo2/components/notifications/notification/style.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.notifications.notification.style
+  (:require
+    [quo2.foundations.colors :as colors]
+    [quo2.foundations.shadows :as shadows]))
+
+(def box-container
+  {:margin-horizontal 8
+   :border-radius     16
+   :overflow          :hidden})
+
+(def blur-container
+  {:height           "100%"
+   :width            "100%"
+   :position         :absolute
+   :padding-vertical 8
+   :padding-left     10
+   :padding-right    8
+   :background-color :transparent})
+
+(defn content-container
+  [override-theme]
+  (merge
+   (:shadow-1 shadows/normal-scale)
+   {:background-color   (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
+    :flex-direction     :row
+    :padding-vertical   8
+    :padding-horizontal 12}))
+
+(def right-side-container {:flex 1})
+
+(defn title
+  [override-theme]
+  {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
+
+(defn text
+  [override-theme]
+  {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
+
+(def avatar-container {:margin-right 8 :margin-top 4})

src/quo2/components/notifications/notification/view.cljs

@@ -0,0 +1,74 @@
+(ns quo2.components.notifications.notification.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.notifications.notification.style :as style]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]))
+
+(defn header-container
+  [& children]
+  [into
+   [rn/view {:accessibility-label :notification-header}] children])
+
+(defn body-container
+  [& children]
+  [into [rn/view {:accessibility-label :notification-body}] children])
+
+(defn avatar-container
+  [& children]
+  [into
+   [rn/view
+    {:style               style/avatar-container
+     :accessibility-label :notification-avatar}]
+   children])
+
+(defn title
+  ([text weight] (title text weight nil))
+  ([text weight override-theme]
+   [text/text
+    {:size                :paragraph-1
+     :weight              (or weight :semi-bold)
+     :style               (style/title override-theme)
+     :accessibility-label :notification-title}
+    text]))
+
+(defn message
+  [text override-theme]
+  [text/text
+   {:size                :paragraph-2
+    :style               (style/text override-theme)
+    :accessibility-label :notification-content}
+   text])
+
+(defn- notification-container
+  [{:keys [avatar header body container-style override-theme]}]
+  [rn/view
+   {:style (merge style/box-container container-style)}
+   [blur/view
+    {:style         style/blur-container
+     :blur-amount   13
+     :blur-radius   10
+     :blur-type     :transparent
+     :overlay-color :transparent}]
+   [rn/view
+    {:style (style/content-container override-theme)}
+    avatar
+    [rn/view
+     {:style style/right-side-container}
+     header
+     body]]])
+
+(defn notification
+  [{title-text :title :keys [avatar header title-weight text body container-style override-theme]}]
+  (let [header (or header
+                   (when title-text
+                     [title title-text title-weight override-theme]))
+        header (when header [header-container header])
+        body   (or body (when text [message text override-theme]))
+        body   (when body [body-container body])
+        avatar (when avatar [avatar-container avatar])]
+    [notification-container
+     {:avatar          avatar
+      :header          header
+      :body            body
+      :container-style container-style
+      :override-theme  override-theme}]))

src/quo2/components/notifications/toast.cljs

@@ -1,122 +0,0 @@
-(ns quo2.components.notifications.toast
-  (:require [quo2.components.icon :as icon]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.notifications.count-down-circle :as count-down-circle]
-            [quo2.foundations.colors :as colors]
-            [quo2.foundations.shadows :as shadows]
-            [quo2.theme :as theme]
-            [utils.i18n :as i18n]
-            [react-native.blur :as blur]
-            [react-native.core :as rn]))
-
-(def ^:private themes
-  {:container        {:dark  {:background-color colors/white-opa-70}
-                      :light {:background-color colors/neutral-80-opa-70}}
-   :title            {:dark  {:color colors/neutral-100}
-                      :light {:color colors/white}}
-   :text             {:dark  {:color colors/neutral-100}
-                      :light {:color colors/white}}
-   :icon             {:dark  {:color colors/neutral-100}
-                      :light {:color colors/white}}
-   :action-container {:dark  {:background-color colors/neutral-80-opa-5}
-                      :light {:background-color colors/white-opa-5}}})
-
-(defn- merge-theme-style
-  [component-key styles override-theme]
-  (merge (get-in themes [component-key (or override-theme (theme/get-theme))]) styles))
-
-(defn toast-action-container
-  [{:keys [on-press style]} & children]
-  [rn/touchable-highlight
-   {:on-press       on-press
-    :underlay-color :transparent}
-   [into
-    [rn/view
-     {:style (merge
-              {:flex-direction     :row
-               :padding-vertical   3
-               :padding-horizontal 8
-               :align-items        :center
-               :border-radius      8
-               :background-color   (get-in themes
-                                           [:action-container (theme/get-theme)
-                                            :background-color])}
-              style)}]
-    children]])
-
-(defn toast-undo-action
-  [duration on-press override-theme]
-  [toast-action-container
-   {:on-press on-press :accessibility-label :toast-undo-action}
-   [rn/view {:style {:margin-right 5}}
-    [count-down-circle/circle-timer {:duration duration}]]
-   [text/text
-    {:size :paragraph-2 :weight :medium :style (merge-theme-style :text {} override-theme)}
-    [i18n/label :t/undo]]])
-
-(defn- toast-container
-  [{:keys [left title text right container-style override-theme]}]
-  [rn/view
-   {:style (merge {:margin-horizontal 12
-                   :border-radius     12
-                   :overflow          :hidden}
-                  container-style)}
-   [blur/view
-    {:style         {:height           "100%"
-                     :width            "100%"
-                     :position         :absolute
-                     :padding-vertical 8
-                     :padding-left     10
-                     :padding-right    8
-                     :background-color :transparent}
-     :blur-amount   13
-     :blur-radius   10
-     :blur-type     :transparent
-     :overlay-color :transparent}]
-   [rn/view
-    {:style (merge-theme-style :container
-                               (merge
-                                (:shadow-1 shadows/normal-scale)
-                                {:flex-direction   :row
-                                 :justify-content  :space-between
-                                 :padding-vertical 8
-                                 :padding-left     10
-                                 :padding-right    8
-                                 :border-radius    12})
-                               override-theme)}
-    [rn/view {:style {:padding 2}} left]
-    [rn/view {:style {:padding 4 :flex 1}}
-     (when title
-       [text/text
-        {:size                :paragraph-1
-         :weight              :semi-bold
-         :style               (merge-theme-style :title {} override-theme)
-         :accessibility-label :toast-title}
-        title])
-     (when text
-       [text/text
-        {:size                :paragraph-2
-         :weight              :medium
-         :style               (merge-theme-style :text {} override-theme)
-         :accessibility-label :toast-content}
-        text])]
-    (when right right)]])
-
-(defn toast
-  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style
-           override-theme]}]
-  [toast-container
-   {:left            (when icon
-                       [icon/icon icon
-                        {:container-style {:width 20 :height 20}
-                         :color           (or icon-color
-                                              (get-in themes
-                                                      [:icon (or override-theme (theme/get-theme))
-                                                       :color]))}])
-    :title           title
-    :text            text
-    :right           (if undo-duration
-                       [toast-undo-action undo-duration undo-on-press override-theme]
-                       action)
-    :container-style container-style
-    :override-theme  override-theme}])

src/quo2/components/notifications/toast/style.cljs

@@ -0,0 +1,55 @@
+(ns quo2.components.notifications.toast.style
+  (:require
+    [quo2.foundations.colors :as colors]
+    [quo2.foundations.shadows :as shadows]))
+
+(def box-container
+  {:margin-horizontal 12
+   :border-radius     12
+   :overflow          :hidden})
+
+(def blur-container
+  {:height           "100%"
+   :width            "100%"
+   :position         :absolute
+   :padding-vertical 8
+   :padding-left     10
+   :padding-right    8
+   :background-color :transparent})
+
+(defn content-container
+  [override-theme]
+  (merge
+   (:shadow-1 shadows/normal-scale)
+   {:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
+    :flex-direction   :row
+    :justify-content  :space-between
+    :padding-vertical 8
+    :padding-left     10
+    :padding-right    8
+    :border-radius    12}))
+
+(defn title
+  [override-theme]
+  {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
+
+(defn text
+  [override-theme]
+  {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
+
+(defn icon
+  [override-theme]
+  {:color           (colors/theme-colors colors/white colors/neutral-100 override-theme)
+   :container-style {:width 20 :height 20}})
+
+(def left-side-container {:padding 2})
+(def right-side-container {:padding 4 :flex 1})
+
+(defn action-container
+  [override-theme]
+  {:background-color   (colors/theme-colors colors/white-opa-5 colors/neutral-80-opa-5 override-theme)
+   :flex-direction     :row
+   :padding-vertical   3
+   :padding-horizontal 8
+   :align-items        :center
+   :border-radius      8})

src/quo2/components/notifications/toast/view.cljs

@@ -0,0 +1,76 @@
+(ns quo2.components.notifications.toast.view
+  (:require [quo2.components.icon :as icon]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.notifications.count-down-circle :as count-down-circle]
+            [quo2.components.notifications.toast.style :as style]
+            [quo2.theme :as theme]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]
+            [utils.i18n :as i18n]))
+
+(defn toast-action-container
+  [{:keys [on-press style]} & children]
+  [rn/touchable-highlight
+   {:on-press       on-press
+    :underlay-color :transparent}
+   [into
+    [rn/view
+     {:style (merge (style/action-container (theme/get-theme)) style)}]
+    children]])
+
+(defn toast-undo-action
+  [duration on-press override-theme]
+  [toast-action-container
+   {:on-press on-press :accessibility-label :toast-undo-action}
+   [rn/view {:style {:margin-right 5}}
+    [count-down-circle/circle-timer {:duration duration}]]
+   [text/text
+    {:size :paragraph-2 :weight :medium :style (style/text override-theme)}
+    [i18n/label :t/undo]]])
+
+(defn- toast-container
+  [{:keys [left title text right container-style override-theme]}]
+  [rn/view
+   {:style (merge style/box-container container-style)}
+   [blur/view
+    {:style         style/blur-container
+     :blur-amount   13
+     :blur-radius   10
+     :blur-type     :transparent
+     :overlay-color :transparent}]
+   [rn/view
+    {:style (style/content-container override-theme)}
+    [rn/view {:style style/left-side-container} left]
+    [rn/view {:style style/right-side-container}
+     (when title
+       [text/text
+        {:size                :paragraph-1
+         :weight              :semi-bold
+         :style               (style/title override-theme)
+         :accessibility-label :toast-title}
+        title])
+     (when text
+       [text/text
+        {:size                :paragraph-2
+         :weight              :medium
+         :style               (style/text override-theme)
+         :accessibility-label :toast-content}
+        text])]
+    (when right right)]])
+
+(defn toast
+  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style
+           override-theme]}]
+  [toast-container
+   {:left            (when icon
+                       [icon/icon icon
+                        (cond-> (style/icon override-theme)
+                          icon-color
+                          (assoc :color icon-color))])
+    :title           title
+    :text            text
+    :right           (if undo-duration
+                       [toast-undo-action undo-duration undo-on-press override-theme]
+                       action)
+    :container-style container-style
+    :override-theme  override-theme}])

src/quo2/core.cljs

@@ -31,13 +31,14 @@
     quo2.components.info.info-message
     quo2.components.info.information-box
     quo2.components.inputs.input.view
-    quo2.components.inputs.title-input.view
     quo2.components.inputs.profile-input.view
-    quo2.components.links.url-preview.view
+    quo2.components.inputs.title-input.view
     quo2.components.links.url-preview-list.view
+    quo2.components.links.url-preview.view
     quo2.components.list-items.channel
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list
+    quo2.components.list-items.user-list
     quo2.components.loaders.skeleton
     quo2.components.markdown.text
     quo2.components.messages.author.view
@@ -49,7 +50,9 @@
     quo2.components.notifications.count-down-circle
     quo2.components.notifications.info-count
     quo2.components.notifications.notification-dot
-    quo2.components.notifications.toast
+    quo2.components.notifications.notification.view
+    quo2.components.notifications.toast.view
+    quo2.components.onboarding.small-option-card.view
     quo2.components.password.tips.view
     quo2.components.profile.profile-card.view
     quo2.components.profile.select-profile.view
@@ -63,20 +66,17 @@
     quo2.components.settings.privacy-option
     quo2.components.share.qr-code.view
     quo2.components.share.share-qr-code.view
-    quo2.components.onboarding.small-option-card.view
-    quo2.components.tabs.segmented-tab
     quo2.components.tabs.account-selector
+    quo2.components.tabs.segmented-tab
     quo2.components.tabs.tabs
     quo2.components.tags.context-tag.view
-    quo2.components.tags.status-tags
     quo2.components.tags.permission-tag
+    quo2.components.tags.status-tags
     quo2.components.tags.tag
     quo2.components.tags.tags
     quo2.components.tags.token-tag
-    quo2.components.text-combinations.title.view
+    quo2.components.text-combinations.title.view))
-    quo2.components.list-items.user-list))
 
-(def toast quo2.components.notifications.toast/toast)
 (def button quo2.components.buttons.button/button)
 (def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button)
 (def text quo2.components.markdown.text/text)
@@ -163,6 +163,8 @@
 (def info-count quo2.components.notifications.info-count/info-count)
 (def notification-dot quo2.components.notifications.notification-dot/notification-dot)
 (def count-down-circle quo2.components.notifications.count-down-circle/circle-timer)
+(def notification quo2.components.notifications.notification.view/notification)
+(def toast quo2.components.notifications.toast.view/toast)
 
 ;;;; PASSWORD
 (def tips quo2.components.password.tips.view/view)

src/quo2/core_spec.cljs

@@ -16,6 +16,7 @@
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
     [quo2.components.markdown.--tests--.text-component-spec]
+    [quo2.components.notifications.notification.component-spec]
     [quo2.components.onboarding.small-option-card.component-spec]
     [quo2.components.password.tips.component-spec]
     [quo2.components.profile.select-profile.component-spec]

src/status_im/ui/screens/chat/components/input.cljs

@@ -331,7 +331,7 @@
          [rn/view
           {:style {:height height}}
           [list/flat-list
-           {:keyboardShouldPersistTaps :always
+           {:keyboard-should-persist-taps :always
             :footer                       [rn/view {:style {:height 8}}]
             :header                       [rn/view {:style {:height 8}}]
             :data                         suggestions

src/status_im/ui/screens/contacts_list/views.cljs

@@ -70,4 +70,4 @@
       :render-fn                    contacts-list-item
       :default-separator?           true
       :enableEmptySections          true
-      :keyboardShouldPersistTaps :always}]))
+      :keyboard-should-persist-taps :always}]))

src/status_im/ui/screens/currency_settings/views.cljs

@@ -50,4 +50,4 @@
         :key-fn                       :code
         :render-data                  currency-id
         :render-fn                    render-currency
-        :keyboardShouldPersistTaps :always}]]]))
+        :keyboard-should-persist-taps :always}]]]))

src/status_im/ui/screens/ens/views.cljs

@@ -223,7 +223,7 @@
        ;;NOTE required so that switching custom-domain
        ;;works on first tap and persists keyboard
        ;;instead of dismissing keyboard and requiring two taps
-       :keyboardShouldPersistTaps :always}
+       :keyboard-should-persist-taps :always}
       [react/view {:style {:flex 1}}
        [react/view
         {:style {:flex            1

src/status_im/ui/screens/group/views.cljs

@@ -80,7 +80,7 @@
     :key-fn                       :public-key
     :render-data                  render-data
     :render-fn                    render-fn
-    :keyboardShouldPersistTaps :always}])
+    :keyboard-should-persist-taps :always}])
 
 (defn no-contacts
   [{:keys [no-contacts]}]

src/status_im/ui/screens/multiaccounts/login/views.cljs

@@ -58,7 +58,7 @@
             banner-hidden                                              [:keycard/banner-hidden]]
     [react/keyboard-avoiding-view {:style ast/multiaccounts-view}
      [react/scroll-view
-      {:keyboardShouldPersistTaps :always
+      {:keyboard-should-persist-taps :always
        :style                        styles/login-view}
       [react/view styles/login-badge-container
        [multiaccount-login-badge multiaccount]

src/status_im2/common/toasts/view.cljs

@@ -28,8 +28,10 @@
 
 (defn toast
   [id]
-  (let [toast-opts (rf/sub [:toasts/toast id])]
+  (let [{:keys [type] :as toast-opts} (rf/sub [:toasts/toast id])]
-    [quo/toast toast-opts]))
+    (if (= type :notification)
+      [quo/notification toast-opts]
+      [quo/toast toast-opts])))
 
 (defn container
   [id]
@@ -81,7 +83,7 @@
            (rn/use-unmount on-dismissed)
            [gesture/gesture-detector {:gesture pan}
             [reanimated/view
-             {;; TODO: this will eanble layout animation at runtime and causing flicker on android
+             {;; TODO: this will enable layout animation at runtime and causing flicker on android
               ;; we need to resolve this and re-enable layout animation
               ;; issue at https://github.com/status-im/status-mobile/issues/14752
               ;; :entering slide-in-up-animation

src/status_im2/contexts/chat/messages/composer/mentions/view.cljs

@@ -29,7 +29,7 @@
                   :elevation  5
                   :max-height (/ max-y 2)})}
         [rn/flat-list
-         {:keyboardShouldPersistTaps :always
+         {:keyboard-should-persist-taps :always
           :data                         (vals suggestions)
           :key-fn                       :key
           :render-fn                    mention-item

src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs

@@ -47,6 +47,6 @@
   [rn/view {:flex 1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs

@@ -50,6 +50,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs

@@ -49,6 +49,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs

@@ -54,6 +54,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs

@@ -81,6 +81,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs

@@ -52,6 +52,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/banners/banner.cljs

@@ -41,6 +41,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs

@@ -60,6 +60,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/buttons/button.cljs

@@ -94,6 +94,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs

@@ -50,6 +50,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/code/snippet.cljs

@@ -118,6 +118,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/colors/color_picker.cljs

@@ -1,9 +1,9 @@
 (ns status-im2.contexts.quo-preview.colors.color-picker
-  (:require [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [reagent.core :as reagent]
-            [quo2.core :as quo]
             [react-native.blur :as blur]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
@@ -40,7 +40,7 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])
 

src/status_im2/contexts/quo_preview/community/community_card_view.cljs

@@ -62,7 +62,7 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])
 

src/status_im2/contexts/quo_preview/community/community_list_view.cljs

@@ -64,6 +64,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs

@@ -64,6 +64,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/community/discover_card.cljs

@@ -37,6 +37,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/counter/counter.cljs

@@ -40,6 +40,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/dividers/date.cljs

@@ -28,6 +28,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/dividers/divider_label.cljs

@@ -49,6 +49,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/dividers/new_messages.cljs

@@ -57,6 +57,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs

@@ -74,6 +74,6 @@
    [rn/flat-list
     {:flex                         1
      :nestedScrollEnabled          true
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       (fn [_ index] (str "actions-drawers-" index))}]])

src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs

@@ -69,6 +69,6 @@
    [rn/flat-list
     {:flex                         1
      :nestedScrollEnabled          true
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       :id}]])

src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs

@@ -81,6 +81,6 @@
     {:flex                         1
      :flex-grow                    1
      :nestedScrollEnabled          true
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/info/info_message.cljs

@@ -48,6 +48,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/info/information_box.cljs

@@ -52,6 +52,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/inputs/input.cljs

@@ -104,6 +104,6 @@
             :flex             1}}
    [rn/flat-list
     {:style                        {:flex 1}
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/list_items/channel.cljs

@@ -75,6 +75,6 @@
      :flex             1}
     [rn/flat-list
      {:flex                         1
-      :keyboardShouldPersistTaps :always
+      :keyboard-should-persist-taps :always
       :header                       [cool-preview]
       :key-fn                       str}]]])

src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs

@@ -70,6 +70,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/list_items/user_list.cljs

@@ -68,6 +68,6 @@
      :flex             1}
     [rn/flat-list
      {:flex                         1
-      :keyboardShouldPersistTaps :always
+      :keyboard-should-persist-taps :always
       :header                       [cool-preview]
       :key-fn                       str}]]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -37,12 +37,14 @@
     [status-im2.contexts.quo-preview.foundations.shadows :as shadows]
     [status-im2.contexts.quo-preview.info.info-message :as info-message]
     [status-im2.contexts.quo-preview.info.information-box :as information-box]
+    [status-im2.contexts.quo-preview.inputs.input :as input]
     [status-im2.contexts.quo-preview.inputs.profile-input :as profile-input]
     [status-im2.contexts.quo-preview.inputs.title-input :as title-input]
     [status-im2.contexts.quo-preview.links.url-preview :as url-preview]
     [status-im2.contexts.quo-preview.links.url-preview-list :as url-preview-list]
     [status-im2.contexts.quo-preview.list-items.channel :as channel]
     [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
+    [status-im2.contexts.quo-preview.list-items.user-list :as user-list]
     [status-im2.contexts.quo-preview.markdown.text :as text]
     [status-im2.contexts.quo-preview.messages.author :as messages-author]
     [status-im2.contexts.quo-preview.messages.gap :as messages-gap]
@@ -52,6 +54,7 @@
     [status-im2.contexts.quo-preview.navigation.page-nav :as page-nav]
     [status-im2.contexts.quo-preview.navigation.top-nav :as top-nav]
     [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs]
+    [status-im2.contexts.quo-preview.notifications.notification :as notification]
     [status-im2.contexts.quo-preview.notifications.toast :as toast]
     [status-im2.contexts.quo-preview.onboarding.small-option-card :as small-option-card]
     [status-im2.contexts.quo-preview.password.tips :as tips]
@@ -78,12 +81,10 @@
     [status-im2.contexts.quo-preview.tags.tags :as tags]
     [status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
     [status-im2.contexts.quo-preview.title.title :as title]
-    [status-im2.contexts.quo-preview.inputs.input :as input]
     [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price]
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
-    [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
+    [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]))
-    [status-im2.contexts.quo-preview.list-items.user-list :as user-list]))
 
 (def screens-categories
   {:foundations           [{:name      :shadows
@@ -226,7 +227,10 @@
                             :component activity-logs/preview-activity-logs}
                            {:name      :toast
                             :insets    {:top false}
-                            :component toast/preview-toasts}]
+                            :component toast/preview-toasts}
+                           {:name      :notification
+                            :insets    {:top false}
+                            :component notification/preview-notification}]
    :onboarding            [{:name      :small-option-card
                             :insets    {:top false}
                             :component small-option-card/preview-small-option-card}]

src/status_im2/contexts/quo_preview/markdown/text.cljs

@@ -49,6 +49,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/messages/author.cljs

@@ -63,6 +63,6 @@
      :flex             1}
     [rn/flat-list
      {:flex                         1
-      :keyboardShouldPersistTaps :always
+      :keyboard-should-persist-taps :always
       :header                       [cool-preview]
       :key-fn                       str}]]])

src/status_im2/contexts/quo_preview/messages/system_message.cljs

@@ -76,4 +76,4 @@
     {:flex                         1
      :header                       [preview]
      :key-fn                       str
-     :keyboardShouldPersistTaps :always}]])
+     :keyboard-should-persist-taps :always}]])

src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs

@@ -77,6 +77,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs

@@ -65,6 +65,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/navigation/page_nav.cljs

@@ -127,6 +127,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [@trackable-cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/navigation/top_nav.cljs

@@ -52,6 +52,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs

@@ -191,4 +191,4 @@
     {:flex                         1
      :header                       [preview]
      :key-fn                       str
-     :keyboardShouldPersistTaps :always}]])
+     :keyboard-should-persist-taps :always}]])

src/status_im2/contexts/quo_preview/notifications/notification.cljs

@@ -0,0 +1,112 @@
+(ns status-im2.contexts.quo-preview.notifications.notification
+  (:require [quo2.components.avatars.user-avatar.view :as user-avatar]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.code.snippet :as snippet]
+            [quo2.components.info.info-message :as info-message]
+            [react-native.core :as rn]
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.code.snippet :as snippet-preview]
+            [utils.re-frame :as rf]))
+
+(defn notification-button
+  ([id opts] (notification-button id id opts))
+  ([text id opts]
+   (let [notification-opts (rf/sub [:toasts/toast id])
+         dismiss!          #(rf/dispatch [:toasts/close id])
+         notification!     #(rf/dispatch [:toasts/upsert (assoc opts :id id)])
+         dismissed?        (not notification-opts)]
+     [rn/view {:style {:margin-bottom 10}}
+      [button/button
+       {:size     32
+        :on-press #(if dismissed? (notification!) (dismiss!))}
+       (if dismissed? text (str "DISMISS " text))]])))
+
+(defn notification-button-0
+  []
+  [notification-button
+   "Notification: empty"
+   {:duration 4000
+    :type     :notification}])
+
+(defn notification-button-1
+  []
+  [notification-button
+   "Notification: with title(header)"
+   {:avatar       [user-avatar/user-avatar
+                   {:full-name           "A Y"
+                    :status-indicator?   true
+                    :online?             true
+                    :size                :small
+                    :customization-color :blue
+                    :ring-background     (resources/get-mock-image :ring)}]
+    :title        "Alisher Yakupov accepted your contact request"
+    :duration     4000
+    :title-weight :medium
+    :type         :notification}])
+
+(defn notification-button-2
+  []
+  [notification-button
+   "with title and body"
+   {:avatar   [user-avatar/user-avatar
+               {:full-name           "A Y"
+                :status-indicator?   true
+                :online?             true
+                :size                :small
+                :customization-color :blue
+                :ring-background     (resources/get-mock-image :ring)}]
+    :title    "Default to semibold title"
+    :text     "The quick brown fox jumped over the lazy dog and ate a potatoe."
+    :duration 4000
+    :type     :notification}])
+
+(defn notification-button-3
+  []
+  [notification-button
+   "with anything as header & body"
+   {:avatar   [user-avatar/user-avatar
+               {:full-name           "A Y"
+                :status-indicator?   true
+                :online?             true
+                :size                :small
+                :customization-color :blue
+                :ring-background     (resources/get-mock-image :ring)}]
+    :header   [rn/view
+               [info-message/info-message
+                {:type :success
+                 :size :tiny
+                 :icon :i/placeholder}
+                "info-message as title"]]
+    :body     [snippet/snippet {:language :clojure :max-lines 15 :syntax true}
+               snippet-preview/clojure-example]
+    :duration 3000
+    :type     :notification}])
+
+(defn preview
+  []
+  (fn []
+    [rn/view
+     [rn/view
+      {:background-color "#508485"
+       :flex-direction   :column
+       :justify-content  :flex-start
+       :height           300}]
+     [into
+      [rn/view
+       {:flex       1
+        :padding    16
+        :margin-top 60}]
+      [^{:key :0} [notification-button-0]
+       ^{:key :1} [notification-button-1]
+       ^{:key :2} [notification-button-2]
+       ^{:key :3} [notification-button-3]]
+     ]]))
+
+(defn preview-notification
+  []
+  [rn/view {:flex 1}
+   [rn/flat-list
+    {:flex                         1
+     :header                       [preview]
+     :key-fn                       str
+     :keyboard-should-persist-taps :always}]])

src/status_im2/contexts/quo_preview/notifications/toast.cljs

@@ -112,4 +112,4 @@
     {:flex                         1
      :header                       [preview]
      :key-fn                       str
-     :keyboardShouldPersistTaps :always}]])
+     :keyboard-should-persist-taps :always}]])

src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs

@@ -53,6 +53,6 @@
             :flex             1}}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/password/tips.cljs

@@ -35,7 +35,7 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])
 

src/status_im2/contexts/quo_preview/profile/profile_card.cljs

@@ -81,6 +81,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/profile/select_profile.cljs

@@ -49,7 +49,7 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])
 

src/status_im2/contexts/quo_preview/reactions/react.cljs

@@ -46,6 +46,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs

@@ -59,6 +59,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/selectors/filter.cljs

@@ -51,6 +51,6 @@
             :flex             1}}
    [rn/flat-list
     {:style                        {:flex 1}
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/selectors/selectors.cljs

@@ -66,6 +66,6 @@
             :flex             1}}
    [rn/flat-list
     {:style                        {:flex 1}
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/settings/accounts.cljs

@@ -46,6 +46,6 @@
   [rn/view {:style {:flex 1}}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/settings/privacy_option.cljs

@@ -96,6 +96,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs

@@ -175,6 +175,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/tabs/account_selector.cljs

@@ -70,6 +70,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs

@@ -56,6 +56,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/tags/context_tags.cljs

@@ -161,6 +161,6 @@
             :flex             1}}
    [rn/flat-list
     {:style                        {:flex 1}
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/tags/permission_tag.cljs

@@ -201,6 +201,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/tags/status_tags.cljs

@@ -64,6 +64,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/tags/tag.cljs

@@ -93,6 +93,6 @@
                        colors/neutral-90)}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/tags/tags.cljs

@@ -110,6 +110,6 @@
                        colors/neutral-90)}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/tags/token_tag.cljs

@@ -73,6 +73,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/wallet/lowest_price.cljs

@@ -55,6 +55,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/wallet/network_breakdown.cljs

@@ -70,6 +70,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])

src/status_im2/contexts/quo_preview/wallet/token_overview.cljs

@@ -69,6 +69,6 @@
     :flex             1}
    [rn/flat-list
     {:flex                         1
-     :keyboardShouldPersistTaps :always
+     :keyboard-should-persist-taps :always
      :header                       [cool-preview]
      :key-fn                       str}]])