cleanup quo2 (#14301)

* cleanup quo2

ios/Podfile.lock

@@ -640,7 +640,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 36ce0530c6d2c3a5a4326885ef4069564887a1db
+  glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c

src/quo2/components/avatars/account_avatar.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.avatars.account-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [status-im.ui.components.icons.icons :as icons]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))
 
 (def icon-color-value
   {:dark (get-in colors/customization [:dark :purple])

src/quo2/components/avatars/channel_avatar.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.avatars.channel-avatar
   (:require [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))
 
 (defn channel-avatar [{:keys [big? locked? emoji-background-color emoji]}]
   (let [lock-exists? (some? locked?)

src/quo2/components/avatars/group_avatar.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.avatars.group-avatar
   (:require [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icon]
-            [quo.react-native :as rn]))
+            [react-native.core :as rn]))
 
 (def sizes
   {:icon {:small 12

src/quo2/components/avatars/icon_avatar.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.avatars.icon-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [status-im.ui.components.icons.icons :as icons]))
 

src/quo2/components/avatars/user_avatar.cljs

@@ -1,10 +1,10 @@
 (ns quo2.components.avatars.user-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]
             [clojure.string :refer [upper-case split blank?]]
-            [quo.theme :refer [dark?]]
+            [quo2.theme :refer [dark?]]
             [status-im.ui.components.fast-image :as fast-image]))
 
 (def sizes {:big {:outer 80

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.avatars.wallet-user-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
             [clojure.string :as clojure-string]))

src/quo2/components/buttons/button.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.buttons.button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
             [reagent.core :as reagent]
             [quo2.components.icon :as quo2.icons]))
 

src/quo2/components/buttons/dynamic_button.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.buttons.dynamic-button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im.i18n.i18n :as i18n]
             [quo2.components.icon :as icon]

src/quo2/components/code/snippet.cljs

@@ -4,8 +4,8 @@
             [cljs-bean.core :as bean]
             [clojure.string :as str]
             [oops.core :as oops]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
             [quo2.components.buttons.button :as button]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]

src/quo2/components/counter/counter.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.counter.counter
-  (:require [quo.theme :as theme]
+  (:require [quo2.theme :as theme]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]))
 

src/quo2/components/dividers/divider_label.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.dividers.divider-label
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.components.markdown.text :as markdown.text]
             [status-im.ui.components.icons.icons :as icons]
             [quo2.foundations.colors :as colors]))

src/quo2/components/dividers/new_messages.cljs

@@ -1,18 +1,16 @@
 (ns quo2.components.dividers.new-messages
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [status-im.i18n.i18n :as i18n]
+            [react-native.linear-gradient :as linear-gradient]))
-            [status-im.ui.components.react :as react]))
 
 (defn new-messages
   "new-messages params - label, color"
-  [{:keys [label color] :or {label (i18n/label :new-messages-header)
+  [{:keys [label color] :or {color :primary}}]
-                             color :primary}}]
   (let [bg-color   (colors/custom-color-by-theme color 50 60 5 5)
         text-color (colors/custom-color-by-theme color 50 60)]
-    [react/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
+    [linear-gradient/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
-                            :start {:x 0 :y 0} :end {:x 0 :y 1}}
+                                      :start {:x 0 :y 0} :end {:x 0 :y 1}}
      [rn/view {:style {:padding-left     60
                        :padding-vertical 12
                        :padding-right    24}}

src/quo2/components/drawers/action_drawers.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.drawers.action-drawers
   (:require  [status-im.ui.components.react :as react]
-             [quo.react-native :as rn]
+             [react-native.core :as rn]
              [quo2.components.markdown.text :as text]
              [quo2.components.icon :as icon]
              [quo2.foundations.colors :as colors]))

src/quo2/components/dropdowns/dropdown.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.dropdowns.dropdown
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo2.reanimated :as reanimated]
+            [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]))
 
 (defn apply-anim [dd-height val]

src/quo2/components/header.cljs

@@ -1,11 +1,10 @@
 (ns quo2.components.header
   (:require [oops.core :refer [oget]]
-            [quo.animated :as animated]
+            [react-native.reanimated :as reanimated]
             [quo2.components.buttons.button :as button]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo.design-system.spacing :as spacing]
+            [react-native.core :as rn]
-            [quo.react-native :as rn]
             [reagent.core :as reagent]))
 
 (def header-height 56)
@@ -61,15 +60,14 @@
       :right           (max (:width left) (:width right))})))
 
 (def header-actions-style
-  (merge
+  {:flex               1
-   {:flex               1
+   :flex-direction     :row
-    :flex-direction     :row
+   :align-items        :center
-    :align-items        :center
+   :justify-content    :center
-    :justify-content    :center}
+   :padding-horizontal 4})
-   (:x-tiny spacing/padding-horizontal)))
 
 (def header-action-placeholder
-  {:width (:base spacing/spacing)})
+  {:width 16})
 
 (def element {:align-items        :center
               :justify-content    :center
@@ -145,9 +143,9 @@
                  border-bottom false}}]
       (let [status-bar-height (get insets :top 0)
             height            (+ header-height status-bar-height)]
-        [animated/view {:style (header-wrapper-style {:height        height
+        [reanimated/view {:style (header-wrapper-style {:height        height
-                                                      :background    background
+                                                        :background    background
-                                                      :border-bottom border-bottom})}
+                                                        :border-bottom border-bottom})}
          [rn/view {:pointer-events :box-none
                    :height         status-bar-height}]
          [rn/view {:style          (merge {:height header-height}

src/quo2/components/info/info_message.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.info.info-message
-  (:require [quo.theme :as theme]
+  (:require [quo2.theme :as theme]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as quo2.icons]))

src/quo2/components/info/information_box.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.info.information-box
-  (:require [quo.theme :as theme]
+  (:require [quo2.theme :as theme]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [clojure.string :as string]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as quo2.icons]

src/quo2/components/list_items/channel.cljs

@@ -1,15 +1,15 @@
 (ns quo2.components.list-items.channel
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.counter.counter :as quo2.counter]
             [quo2.components.icon :as quo2.icons]
             [quo2.components.avatars.channel-avatar :as channel-avatar]
             [quo2.components.markdown.text :as quo2.text]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))
 
 (defn list-item [{:keys [name locked? mentions-count unread-messages?
                          muted? is-active-channel? emoji channel-color]
-                  :or {channel-color colors/primary-50}}]
+                  :or   {channel-color colors/primary-50}}]
   [rn/view {:style (merge {:height          48
                            :display         :flex
                            :border-radius   12
@@ -21,21 +21,19 @@
                            :padding-right   12}
                           (when is-active-channel?
                             {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
-   [rn/view {:display :flex
+   [rn/view {:display         :flex
-             :flex-direction :row
+             :flex-direction  :row
              :justify-content :flex-start
-             :align-items :center}
+             :align-items     :center}
     [channel-avatar/channel-avatar
      {:big?                   true
-      :locked?            locked?
+      :locked?                locked?
       :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
       :emoji                  emoji}]
     [quo2.text/text
-     {:style (merge {:margin-left 12}
+     {:style  (merge {:margin-left 12}
-                    (when
+                     (when (and (not locked?) muted?)
-                     (and (not locked?)
+                       {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
-                          muted?)
-                      {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
       :weight :medium :size :paragraph-1} (str "# " name)]]
    [rn/view {:style {:height 20}}
     (when (and (not locked?)

src/quo2/components/list_items/menu_item.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.list-items.menu-item
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors :refer [theme-colors]]
             [quo2.components.markdown.text :as text]
             [quo2.components.icon :as icons]))

src/quo2/components/list_items/preview_list.cljs

@@ -1,5 +1,6 @@
 (ns quo2.components.list-items.preview-list
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
+            [react-native.hole-view :as hole-view]
             [status-im.i18n.i18n :as i18n]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as quo2.icons]
@@ -42,13 +43,13 @@
 (defn list-item [index type size item list-size margin-left
                  hole-size hole-radius hole-x hole-y border-radius]
   (let [last-item? (= index (- list-size 1))]
-    [rn/hole-view {:style {:margin-left   (if (= index 0) 0 margin-left)}
+    [hole-view/hole-view {:style {:margin-left   (if (= index 0) 0 margin-left)}
-                   :holes (if last-item? []
+                          :holes (if last-item? []
-                              [{:x             hole-x
+                                     [{:x             hole-x
-                                :y             hole-y
+                                       :y             hole-y
-                                :width         hole-size
+                                       :width         hole-size
-                                :height        hole-size
+                                       :height        hole-size
-                                :borderRadius  hole-radius}])}
+                                       :borderRadius  hole-radius}])}
      [avatar item type size border-radius]]))
 
 (defn get-overflow-color [transparent? transparent-color light-color dark-color override-theme]

src/quo2/components/list_items/received_cr_item.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.list-items.received-cr-item
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [status-im.utils.handlers :refer [<sub >evt]]
             [quo2.components.avatars.user-avatar :as user-avatar]

src/quo2/components/markdown/text.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.markdown.text
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
             [quo2.foundations.colors :as colors]
             [quo2.foundations.typography :as typography]
             [reagent.core :as reagent]))

src/quo2/components/messages/gap.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.messages.gap
   (:require
    [oops.core :refer [oget]]
-   [quo.react-native :as rn]
+   [react-native.core :as rn]
-   [quo.theme :as theme]
+   [quo2.theme :as theme]
    [quo2.components.icon :as icon]
    [quo2.components.markdown.text :as text]
    [quo2.foundations.colors :as colors]

src/quo2/components/messages/system_message.cljs

@@ -1,11 +1,11 @@
 (ns quo2.components.messages.system-message
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.theme :as theme]
+            [react-native.reanimated :as reanimated]
+            [quo2.theme :as theme]
             [quo2.components.avatars.icon-avatar :as icon-avatar]
             [quo2.components.avatars.user-avatar :as user-avatar]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo2.reanimated :as ra]
             [status-im.i18n.i18n :as i18n]
             [status-im.utils.core :as utils]))
 
@@ -140,16 +140,16 @@
   [{:keys [type style non-pressable? animate-landing?] :as message}]
   [:f>
    (fn []
-     (let [sv-color (ra/use-shared-value
+     (let [sv-color (reanimated/use-shared-value
                      (get-color :bg (if animate-landing? :landed :default) type))]
        (when animate-landing?
-         (ra/animate-shared-value-with-delay
+         (reanimated/animate-shared-value-with-delay
           sv-color (get-color :bg :default type) 0 :linear 1000))
-       [ra/touchable-opacity
+       [reanimated/touchable-opacity
         {:on-press #(when-not non-pressable?
-                      (ra/set-shared-value
+                      (reanimated/set-shared-value
                        sv-color (get-color :bg :pressed type)))
-         :style    (ra/apply-animations-to-style
+         :style    (reanimated/apply-animations-to-style
                     {:background-color sv-color}
                     (merge
                      {:flex-direction     :row

src/quo2/components/navigation/bottom_nav_tab.cljs

@@ -1,6 +1,7 @@
 (ns quo2.components.navigation.bottom-nav-tab
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo2.reanimated :as reanimated]
+            [react-native.reanimated :as reanimated]
+            [react-native.hole-view :as hole-view]
             [quo2.foundations.colors :as colors]
             [quo2.components.icons.icons :as icons]
             [quo2.components.counter.counter :as counter]))
@@ -44,18 +45,18 @@
          :on-press-out        #(toggle-background-color background-color true pass-through?)
          :accessibility-label accessibility-label}
         [reanimated/view {:style background-animated-style}
-         [rn/hole-view {:style {:padding-left 33
+         [hole-view/hole-view {:style {:padding-left 33
-                                :padding-top  8}
+                                       :padding-top  8}
-                        :key    new-notifications? ;; Key is required to force removal of holes
+                               :key   new-notifications? ;; Key is required to force removal of holes
-                        :holes  (cond
+                               :holes (cond
-                                  (not new-notifications?) ;; No new notifications, remove holes
+                                        (not new-notifications?) ;; No new notifications, remove holes
-                                  []
+                                        []
 
-                                  (= notification-indicator :unread-dot)
+                                        (= notification-indicator :unread-dot)
-                                  [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
+                                        [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
 
-                                  :else
+                                        :else
-                                  [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
+                                        [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
           [reanimated/image
            {:style icon-animated-style
             :source (icons/icon-source (keyword (str icon 24)))}]]

src/quo2/components/navigation/floating_shell_button.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.navigation.floating-shell-button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.components.buttons.dynamic-button :as dynamic-button]))
 
 (defn dynamic-button-view [type dynamic-buttons style]

src/quo2/components/navigation/page_nav.cljs

@@ -1,10 +1,10 @@
 (ns quo2.components.navigation.page-nav
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]
             [status-im.utils.dimensions :as dimensions]
-            [clojure.string :as string]
+            [quo2.components.markdown.text :as text]
-            [quo2.components.markdown.text :as text]))
+            [clojure.string :as string]))
 
 (def ^:private centrify-style
   {:display         :flex

src/quo2/components/navigation/top_nav.cljs

@@ -1,9 +1,10 @@
 (ns quo2.components.navigation.top-nav
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.counter.counter :as counter]
             [quo2.components.buttons.button :as quo2.button]
-            [quo2.components.avatars.user-avatar :as user-avatar]))
+            [quo2.components.avatars.user-avatar :as user-avatar]
+            [react-native.hole-view :as hole-view]))
 
 (defn- get-button-common-props [type]
   (let [default? (= type :default)
@@ -67,16 +68,16 @@
       [base-button :main-icons2/qr-code show-qr :show-qr-button button-common-props]
       [rn/view ;; Keep view instead of "[:<>" to make sure relative
                ;; position is calculated from this view instead of its parent
-       [rn/hole-view {:key    new-notifications? ;; Key is required to force removal of holes
+       [hole-view/hole-view {:key   new-notifications? ;; Key is required to force removal of holes
-                      :holes  (cond
+                             :holes (cond
-                                (not new-notifications?) ;; No new notifications, remove holes
+                                      (not new-notifications?) ;; No new notifications, remove holes
-                                []
+                                      []
 
-                                (= notification-indicator :unread-dot)
+                                      (= notification-indicator :unread-dot)
-                                [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
+                                      [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
 
-                                :else
+                                      :else
-                                [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
+                                      [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
         [base-button :main-icons2/activity-center open-activity-center
          :open-activity-center-button button-common-props]]
        (when new-notifications?

src/quo2/components/notifications/activity_logs.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.notifications.activity-logs
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.components.buttons.button :as button]
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]

src/quo2/components/notifications/info_count.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.notifications.info-count
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.foundations.typography :as typography]))
 

src/quo2/components/notifications/notification_dot.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.notifications.notification-dot
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]))
 
 (defn notification-dot [style]

src/quo2/components/reactions/reaction.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.reactions.reaction
   (:require [quo2.components.markdown.text :as quo2.text]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]))
 

src/quo2/components/selectors/disclaimer.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.selectors.disclaimer
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
             [quo2.components.selectors.selectors :as selectors]))

src/quo2/components/selectors/selectors.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.selectors.selectors
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
             [reagent.core :as reagent]
             [quo2.components.icon :as icons]))
 

src/quo2/components/separator.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.separator
-  (:require [quo.react-native :as react]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as quo2.colors]))
 
 (defn separator [{:keys [style]}]
-  [react/view
+  [rn/view
    {:style
     (merge
      style

src/quo2/components/switcher/switcher_cards.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.switcher.switcher-cards
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [status-im.i18n.i18n :as i18n]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]

src/quo2/components/tabs/account_selector.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.tabs.account-selector
   (:require
-   [quo.theme :as theme]
+   [quo2.theme :as theme]
-   [quo.react-native :as rn]
+   [react-native.core :as rn]
    [quo2.foundations.colors :as colors]
    [quo2.components.markdown.text :as quo2]))
 

src/quo2/components/tabs/segmented_tab.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tabs.segmented-tab
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.tabs.tab :as tab]
             [quo2.foundations.colors :as colors]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))
 
 (def themes {:light {:background-color colors/neutral-20}
              :dark  {:background-color colors/neutral-80}})

src/quo2/components/tabs/tab.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.tabs.tab
   (:require [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
             [status-im.ui.components.icons.icons :as icons]
             [quo2.components.markdown.text :as text]))
 

src/quo2/components/tabs/tabs.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.tabs.tabs
   (:require [oops.core :refer [oget]]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.tabs.tab :as tab]
             [reagent.core :as reagent]
             [status-im.ui.components.react :as react]

src/quo2/components/tags/base_tag.cljs

@@ -1,6 +1,5 @@
 (ns quo2.components.tags.base-tag
-  (:require
+  (:require [react-native.core :as rn]))
-   [quo.react-native :as rn]))
 
 (defn style-container [size disabled border-color border-width background-color label type]
   (merge {:height             size

src/quo2/components/tags/context_tags.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tags.context-tags
   (:require [quo2.foundations.colors :as colors]
-            [quo.theme :as quo.theme]
+            [quo2.theme :as quo2.theme]
             [quo2.components.markdown.text :as text]
             [quo2.components.avatars.group-avatar :as group-avatar]
-            [quo.react-native :as rn]))
+            [react-native.core :as rn]))
 
 (defn padding-left-for-type [type]
   (case type
@@ -15,7 +15,7 @@
 
 (defn base-tag [_ _]
   (fn [{:keys [override-theme style]} & children]
-    (let [theme (or override-theme (quo.theme/get-theme))]
+    (let [theme (or override-theme (quo2.theme/get-theme))]
       (into
        [rn/view
         (merge

src/quo2/components/tags/status_tags.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.tags.status-tags
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.theme :as quo.theme]
+            [quo2.theme :as quo2.theme]
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
@@ -91,5 +91,5 @@
                                   nil)]
       [status-component
        size
-       (or override-theme (quo.theme/get-theme))
+       (or override-theme (quo2.theme/get-theme))
        label])))

src/quo2/components/tags/tag.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.tags.tag
   (:require [quo2.foundations.colors :as colors]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.components.tags.base-tag :as base-tag]))

src/quo2/components/tags/tags.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.tags.tags
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.tags.tag :as tag]))
 
 (defn tags [{:keys [default-active on-change]}]

src/quo2/components/tags/token_tag.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.tags.token-tag
   (:require [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.theme :as theme]
+            [quo2.theme :as theme]
             [quo2.components.markdown.text :as text]
             [quo2.components.icon :as icons]))
 

src/quo2/components/wallet/lowest_price.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.wallet.lowest-price
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [clojure.string :as string]))
 
 (def centrify {:style {:flex-direction  :row

src/quo2/components/wallet/network_amount.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.wallet.network-amount
   (:require [clojure.string :as string]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]

src/quo2/components/wallet/network_breakdown.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.wallet.network-breakdown
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
             [quo2.components.wallet.network-amount :refer [network-amount]]))

src/quo2/components/wallet/token_overview.cljs

@@ -2,7 +2,7 @@
   (:require
    [quo2.foundations.colors :as colors]
    [status-im.i18n.i18n :as i18n]
-   [quo.react-native :as rn]
+   [react-native.core :as rn]
    [clojure.string :as string]
    [status-im.utils.currency :as currencies]
    [status-im.ui.components.icons.icons :as icons]

src/quo2/foundations/colors.cljs

@@ -1,6 +1,6 @@
 (ns quo2.foundations.colors
   (:require [clojure.string :as string]
-            [quo.theme :as theme]))
+            [quo2.theme :as theme]))
 
 (defn alpha [value opacity]
   (when value

src/quo2/screens/avatars/account_avatar.cljs

@@ -1,8 +1,7 @@
 (ns quo2.screens.avatars.account-avatar
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
-            [quo.design-system.colors :as colors]
             [quo2.components.avatars.account-avatar :as quo2]))
 
 (def descriptor [{:label   "Icon"
@@ -40,8 +39,7 @@
         [quo2/account-avatar @state]]])))
 
 (defn preview-account-avatar []
-  [rn/view {:background-color (:preview-background @colors/theme)
+  [rn/view {:flex             1}
-            :flex             1}
    [rn/flat-list {:flex                      1
                   :keyboardShouldPersistTaps :always
                   :header                    [cool-preview]

src/quo2/screens/avatars/channel_avatar.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.channel-avatar
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.avatars.channel-avatar :as quo2]))
 

src/quo2/screens/avatars/group_avatar.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.group-avatar
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.avatars.group-avatar :as quo2]))
 

src/quo2/screens/avatars/icon_avatar.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.icon-avatar
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.avatars.icon-avatar :as quo2]))
 

src/quo2/screens/avatars/user_avatar.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.user-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.components.avatars.user-avatar :as quo2]
             [reagent.core :as reagent]
             [status-im.react-native.resources :as resources]))

src/quo2/screens/avatars/wallet_user_avatar.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.avatars.wallet-user-avatar
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
             [quo2.components.avatars.wallet-user-avatar :as quo2]
             [quo2.foundations.colors :as colors]))

src/quo2/screens/buttons/button.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.buttons.button
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.buttons.button :as quo2]))
 

src/quo2/screens/buttons/dynamic_button.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.buttons.dynamic-button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.buttons.dynamic-button :as quo2]))
 

src/quo2/screens/code/snippet.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.code.snippet
-  (:require [quo.previews.preview :as preview]
+  (:require [quo2.screens.preview :as preview]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.code.snippet :as snippet]
             [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]))

src/quo2/screens/community/community_card_view.cljs

@@ -1,9 +1,8 @@
 (ns quo2.screens.community.community-card-view
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
             [status-im.constants :as constants]
-            [quo.design-system.colors :as quo.colors]
             [quo2.foundations.colors :as colors]
             [quo2.components.community.community-list-view :as community-list-view]
             [quo2.components.community.community-card-view :as community-card-view]
@@ -19,7 +18,6 @@
    :permissions    true
    :cover          (resources/get-image :community-cover)
    :community-icon (resources/get-image :status-logo)
-   :color          (rand-nth quo.colors/chat-colors)
    :tokens         [{:id  1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
    :tags           [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
                     {:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)}

src/quo2/screens/counter/counter.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.counter.counter
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
             [quo2.components.counter.counter :as quo2]
             [quo2.foundations.colors :as colors]))

src/quo2/screens/dividers/divider_label.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.dividers.divider-label
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.dividers.divider-label :as divider-label]))
 

src/quo2/screens/dividers/new_messages.cljs

@@ -1,9 +1,10 @@
 (ns quo2.screens.dividers.new-messages
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
-            [quo2.components.dividers.new-messages :as new-messages]))
+            [quo2.components.dividers.new-messages :as new-messages]
+            [status-im.i18n.i18n :as i18n]))
 
 (def descriptor [{:label   "Label"
                   :key     :label
@@ -36,7 +37,7 @@
                             {:key   :beige
                              :value "Beige"}]}])
 (defn cool-preview []
-  (let [state     (reagent/atom {:label "New messages"
+  (let [state     (reagent/atom {:label (i18n/label :new-messages-header)
                                  :color :primary})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}

src/quo2/screens/drawers/action_drawers.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.drawers.action-drawers
-  (:require [quo.previews.preview :as preview]
+  (:require [quo2.screens.preview :as preview]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.drawers.action-drawers :as quo2]
             [quo2.components.buttons.button :as button]
             [quo2.foundations.colors :as colors]

src/quo2/screens/dropdowns/dropdown.cljs

@@ -1,7 +1,6 @@
 (ns quo2.screens.dropdowns.dropdown
-  (:require [quo.components.text :as text]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
-            [quo.react-native :as rn]
             [quo2.components.dropdowns.dropdown :as quo2]
             [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]))
@@ -64,7 +63,7 @@
         [preview/customizer state descriptor]
         [rn/view {:padding-vertical 60
                   :align-items      :center}
-         [text/text {:color :main} (str "Selected item: " @selected-item)]
+         [rn/text (str "Selected item: " @selected-item)]
          [quo2/dropdown (merge @state {:on-select on-select
                                        :items     items})]]]])))
 

src/quo2/screens/info/info_message.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.info.info-message
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.info.info-message :as quo2]))
 

src/quo2/screens/info/information_box.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.info.information-box
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.info.information-box :as quo2]))
 

src/quo2/screens/list_items/channel.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.list-items.channel
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.list-items.channel :as quo2-channel]))
 

src/quo2/screens/list_items/preview_lists.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.list-items.preview-lists
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [status-im.react-native.resources :as resources]
             [quo2.components.list-items.preview-list :as quo2]))

src/quo2/screens/main.cljs

@@ -1,10 +1,8 @@
 (ns quo2.screens.main
-  (:require [quo.components.safe-area :as safe-area]
+  (:require [react-native.core :as rn]
-            [quo.core :as quo]
+            [react-native.safe-area :as safe-area]
-            [quo.design-system.colors :as quo.colors]
             [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
+            [quo2.theme :as theme]
-            [quo.theme :as theme]
             [quo2.components.markdown.text :as quo2-text]
             [quo2.components.buttons.button :as quo2-button]
             [quo2.screens.avatars.channel-avatar :as channel-avatar]
@@ -187,26 +185,9 @@
 
 (defn theme-switcher []
   [rn/view {:style {:flex-direction   :row
-                    :margin-vertical  8
+                    :margin-vertical  8}}
-                    :border-radius    4
+   [quo2-button/button {:on-press #(theme/set-theme :light)} "Set light theme"]
-                    :background-color (:ui-01 @quo.colors/theme)
+   [quo2-button/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]])
-                    :border-width     1
-                    :border-color     (:ui-02 @quo.colors/theme)}}
-   [rn/touchable-opacity {:style    {:padding         8
-                                     :flex            1
-                                     :justify-content :center
-                                     :align-items     :center}
-                          :on-press #(theme/set-theme :light)}
-    [quo/text "Set light theme"]]
-   [rn/view {:width            1
-             :margin-vertical  4
-             :background-color (:ui-02 @quo.colors/theme)}]
-   [rn/touchable-opacity {:style    {:padding         8
-                                     :flex            1
-                                     :justify-content :center
-                                     :align-items     :center}
-                          :on-press #(theme/set-theme :dark)}
-    [quo/text "Set dark theme"]]])
 
 (defn main-screen []
   (fn []

src/quo2/screens/markdown/text.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.markdown.text
   (:require [quo2.foundations.colors :as colors]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.markdown.text :as quo2]
             [reagent.core :as reagent]))
 

src/quo2/screens/messages/gap.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.messages.gap
   (:require
-   [quo.previews.preview :as preview]
+   [quo2.screens.preview :as preview]
-   [quo.react-native :as rn]
+   [react-native.core :as rn]
    [quo2.components.messages.gap :as gap]
    [reagent.core :as reagent]))
 

src/quo2/screens/messages/system_message.cljs

@@ -1,8 +1,8 @@
 (ns quo2.screens.messages.system-message
   (:require [reagent.core :as reagent]
             [status-im.react-native.resources :as resources]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.components.messages.system-message :as system-message]
             [quo2.foundations.colors :as colors]))
 

src/quo2/screens/navigation/bottom_nav_tab.cljs

@@ -1,8 +1,8 @@
 (ns quo2.screens.navigation.bottom-nav-tab
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [react-native.reanimated :as reanimated]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
-            [quo2.reanimated :as reanimated]
             [quo2.components.navigation.bottom-nav-tab :as quo2]
             [quo2.foundations.colors :as colors]))
 

src/quo2/screens/navigation/floating_shell_button.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.navigation.floating-shell-button
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
             [quo2.components.navigation.floating-shell-button :as quo2]
             [quo2.foundations.colors :as colors]))

src/quo2/screens/navigation/page_nav.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.navigation.page-nav
-  (:require [quo.previews.preview :as preview]
+  (:require [quo2.screens.preview :as preview]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.navigation.page-nav :as quo2]
             [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]))

src/quo2/screens/navigation/top_nav.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.navigation.top-nav
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
             [quo2.components.navigation.top-nav :as quo2]
             [quo2.foundations.colors :as colors]))

src/quo2/screens/notifications/activity_logs.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.notifications.activity-logs
-  (:require [quo.previews.preview :as preview]
+  (:require [quo2.screens.preview :as preview]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.components.notifications.activity-logs :as activity-logs]
             [quo2.components.tags.context-tags :as context-tags]

src/quo2/screens/preview.clj

@@ -0,0 +1,9 @@
+(ns quo2.screens.preview)
+
+(defmacro list-comp [[binding seq-expr & bindings] body-expr]
+  (cond (not binding)
+        `(list ~body-expr)
+
+        :else
+        `(mapcat (fn [~binding] (list-comp ~bindings ~body-expr))
+                 ~seq-expr)))

src/quo2/screens/preview.cljs

@@ -0,0 +1,179 @@
+(ns quo2.screens.preview
+  (:require [reagent.core :as reagent]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors])
+  (:require-macros quo2.screens.preview))
+
+(def container {:flex-direction   :row
+                :padding-vertical 8
+                :flex             1
+                :align-items      :center})
+
+(defn touchable-style []
+  {:flex               1
+   :align-items        :center
+   :justify-content    :center
+   :padding-horizontal 16
+   :height             44})
+
+(defn select-style []
+  {:flex               1
+   :flex-direction     :row
+   :align-items        :center
+   :padding-horizontal 16
+   :height             44
+   :border-radius      4
+   :background-color   colors/neutral-20
+   :border-width       1
+   :border-color       colors/neutral-100})
+
+(defn select-option-style [selected]
+  (merge (select-style)
+         {:margin-vertical 8
+          :justify-content :center}
+         (if selected
+           {:background-color colors/primary-50-opa-30}
+           {:background-color (colors/theme-colors colors/neutral-20 colors/white)})))
+
+(def label-style {:flex          0.4
+                  :padding-right 8})
+
+(defn label-view [_ label]
+  [rn/view {:style label-style}
+   [rn/text
+    (when-let [label-color (colors/theme-colors colors/neutral-100 colors/white)]
+      {:style {:color label-color}})
+    label]])
+
+(defn modal-container []
+  {:flex               1
+   :justify-content    :center
+   :padding-horizontal 24
+   :background-color   "rgba(0,0,0,0.4)"})
+
+(defn modal-view []
+  {:padding-horizontal 16
+   :padding-vertical   8
+   :border-radius      8
+   :flex-direction     :column
+   :margin-vertical    100
+   :background-color   (colors/theme-colors colors/neutral-20 colors/white)})
+
+(defn customizer-boolean
+  [{:keys [label key state]}]
+  (let [state* (reagent/cursor state [key])]
+    [rn/view {:style container}
+     [label-view state label]
+     [rn/view {:style {:flex-direction   :row
+                       :flex             0.6
+                       :border-radius    4
+                       :background-color (colors/theme-colors colors/neutral-20 colors/white)
+                       :border-width     1
+                       :border-color     (colors/theme-colors colors/neutral-100 colors/white)}}
+      [rn/touchable-opacity {:style    (merge (touchable-style) {:background-color (when  @state* colors/primary-50-opa-30)})
+                             :on-press #(reset! state* true)}
+       [rn/text
+        "True"]]
+      [rn/view {:width            1
+                :margin-vertical  4
+                :background-color (colors/theme-colors colors/neutral-20 colors/white)}]
+      [rn/touchable-opacity {:style    (merge (touchable-style) {:background-color (when (not @state*) colors/primary-50-opa-30)})
+                             :on-press #(reset! state* false)}
+       [rn/text {}
+        "False"]]]]))
+
+(defn customizer-text
+  [{:keys [label key state]}]
+  (let [state* (reagent/cursor state [key])]
+    [rn/view {:style container}
+     [label-view state label]
+     [rn/view {:style {:flex 0.6}}
+      [rn/text-input {:value          @state*
+                      :show-cancel    false
+                      :style          {:border-radius 4
+                                       :border-width  1
+                                       :border-color  (colors/theme-colors colors/neutral-100 colors/white)}
+                      :on-change-text #(do
+                                         (reset! state* %)
+                                         (reagent/flush))}]]]))
+
+(defn value-for-key
+  [id v]
+  (:value (first (filter #(= (:key %) id) v))))
+
+(defn customizer-select []
+  (let [open (reagent/atom nil)]
+    (fn [{:keys [label key state options]}]
+      (let [state*   (reagent/cursor state [key])
+            selected (value-for-key @state* options)]
+        [rn/view {:style container}
+         [label-view state label]
+         [rn/view {:style {:flex 0.6}}
+          [rn/modal {:visible              @open
+                     :on-request-close     #(reset! open false)
+                     :statusBarTranslucent true
+                     :transparent          true
+                     :animation            :slide}
+           [rn/view {:style (modal-container)}
+            [rn/view {:style (modal-view)}
+             [rn/scroll-view
+              (doall
+               (for [{:keys [key value]} options]
+                 ^{:key key}
+                 [rn/touchable-opacity {:style    (select-option-style (= @state* key))
+                                        :on-press #(do
+                                                     (reset! open false)
+                                                     (reset! state* key))}
+                  [rn/text {:color (if (= @state* key) :link :secondary)}
+                   value]]))]
+             [rn/view {:flex-direction :row :padding-top 20 :margin-top 10
+                       :border-top-width 1 :border-top-color (colors/theme-colors colors/neutral-100 colors/white)}
+              [rn/touchable-opacity {:style    (select-option-style false)
+                                     :on-press #(do
+                                                  (reset! state* nil)
+                                                  (reset! open false))}
+               [rn/text "Clear"]]
+              [rn/view {:width 16}]
+              [rn/touchable-opacity {:style    (select-option-style false)
+                                     :on-press #(reset! open false)}
+               [rn/text "Close"]]]]]]
+
+          [rn/touchable-opacity {:style    (select-style)
+                                 :on-press #(reset! open true)}
+           (if selected
+             [rn/text {:color :link} selected]
+             [rn/text "Select option"])
+           [rn/view {:position        :absolute
+                     :right           16
+                     :top             0
+                     :bottom          0
+                     :justify-content :center}
+            [rn/text "↓"]]]]]))))
+
+(defn customizer [state descriptors]
+  [rn/view {:style              {:flex 1}
+            :padding-horizontal 16}
+   (doall
+    (for [{:keys [key type]
+           :as   desc} descriptors
+          :let         [descriptor (merge desc
+                                          {:state state})]]
+      ^{:key key}
+      [:<>
+       (case type
+         :boolean [customizer-boolean descriptor]
+         :text    [customizer-text descriptor]
+         :select  [customizer-select descriptor])]))])
+
+(comment
+  [{:label "Show error:"
+    :key   :error
+    :type  :boolean}
+   {:label "Label:"
+    :key   :label
+    :type  :text}
+   {:label   "Type:"
+    :key     :type
+    :type    :select
+    :options [{:key :primary :value "Primary"}
+              {:key :secondary :value "Secondary"}]}])

src/quo2/screens/reactions/react.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.reactions.react
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
             [quo2.foundations.colors :as colors]
             [quo2.components.reactions.reaction :as quo2.reaction]))

src/quo2/screens/selectors/disclaimer.cljs

@@ -1,5 +1,5 @@
 (ns quo2.screens.selectors.disclaimer
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
             [quo2.components.buttons.button :as button]
             [quo2.components.selectors.disclaimer :as quo2]

src/quo2/screens/selectors/selectors.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.selectors.selectors
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
             [quo2.components.selectors.selectors :as quo2]
             [quo2.components.markdown.text :as text]

src/quo2/screens/switcher/switcher_cards.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.switcher.switcher-cards
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [reagent.core :as reagent]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [status-im.react-native.resources :as resources]
             [quo2.components.switcher.switcher-cards :as switcher-cards]))

src/quo2/screens/tabs/account_selector.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.tabs.account-selector
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
             [quo2.foundations.colors :as colors]
             [quo2.components.tabs.account-selector :as quo2]))

src/quo2/screens/tabs/segmented_tab.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.tabs.segmented-tab
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.components.tabs.segmented-tab :as quo2]
             [reagent.core :as reagent]))
 

src/quo2/screens/tabs/tabs.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.tabs.tabs
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.components.tabs.tabs :as quo2]
             [reagent.core :as reagent]))
 

src/quo2/screens/tags/context_tags.cljs

@@ -1,8 +1,8 @@
 (ns quo2.screens.tags.context-tags
   (:require [reagent.core :as reagent]
             [status-im.multiaccounts.core :as multiaccounts]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.tags.context-tags :as quo2]))
 

src/quo2/screens/tags/permission_tag.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.tags.permission-tag
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.components.tags.permission-tag :as permission-tag]
             [quo2.foundations.colors :as colors]
             [status-im.react-native.resources :as resources]

src/quo2/screens/tags/status_tags.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.tags.status-tags
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.tags.status-tags :as quo2]))
 

src/quo2/screens/tags/tags.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.tags.tags
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [status-im.ui.components.react :as react]
             [quo2.foundations.colors :as colors]
             [quo2.components.tags.tags :as tags]

src/quo2/screens/tags/token_tag.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.tags.token-tag
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
             [quo2.components.tags.token-tag :as quo2]
             [quo2.foundations.colors :as colors]))

src/quo2/screens/wallet/lowest_price.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.wallet.lowest-price
   (:require [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.components.wallet.lowest-price :as quo2]
             [reagent.core :as reagent]))
 

src/quo2/screens/wallet/network_amount.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.wallet.network-amount
-  (:require [quo.previews.preview :as preview]
+  (:require [quo2.screens.preview :as preview]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
             [quo2.components.wallet.network-amount :refer [network-amount]]
             [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]))

src/quo2/screens/wallet/network_breakdown.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.wallet.network-breakdown
   (:require [reagent.core :as reagent]
-            [quo.react-native :as rn]
+            [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.wallet.network-breakdown :as quo2]))
 

src/quo2/screens/wallet/token_overview.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.wallet.token-overview
-  (:require [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
-            [quo.previews.preview :as preview]
+            [quo2.screens.preview :as preview]
             [reagent.core :as reagent]
             [quo2.components.wallet.token-overview :as quo2]
             [quo2.foundations.colors :as colors]))

src/quo2/theme.cljs

@@ -0,0 +1,13 @@
+(ns quo2.theme
+  (:require [reagent.core :as reagent]))
+
+(def theme (reagent/atom nil))
+
+(defn dark? []
+  (= :dark @theme))
+
+(defn get-theme []
+  @theme)
+
+(defn set-theme [value]
+  (reset! theme value))

src/react_native/core.cljs

@@ -0,0 +1,29 @@
+(ns react-native.core
+  (:require [reagent.core :as reagent]
+            ["react-native" :as react-native]
+            [react-native.flat-list :as flat-list]))
+
+(def view (reagent/adapt-react-class (.-View ^js react-native)))
+(def scroll-view (reagent/adapt-react-class (.-ScrollView ^js react-native)))
+(def image (reagent/adapt-react-class (.-Image ^js react-native)))
+(def text (reagent/adapt-react-class (.-Text ^js react-native)))
+(def text-input (reagent/adapt-react-class  (.-TextInput ^js react-native)))
+
+(def touchable-opacity (reagent/adapt-react-class (.-TouchableOpacity ^js react-native)))
+(def touchable-highlight (reagent/adapt-react-class (.-TouchableHighlight ^js react-native)))
+(def touchable-without-feedback (reagent/adapt-react-class (.-TouchableWithoutFeedback ^js react-native)))
+
+(def flat-list flat-list/flat-list)
+
+(def modal (reagent/adapt-react-class (.-Modal ^js react-native)))
+
+(def keyboard ^js (.-Keyboard ^js react-native))
+
+(def dismiss-keyboard! #(.dismiss keyboard))
+
+(defn use-window-dimensions []
+  (let [window ^js (react-native/useWindowDimensions)]
+    {:font-scale (.-fontScale window)
+     :height     (.-height window)
+     :scale      (.-scale window)
+     :width      (.-width window)}))