no contacts mostly done, working on contacts

Signed-off-by: Jakub Sokołowski <jakub@status.im>

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

nix/status-go/library/default.nix

@@ -20,7 +20,11 @@ buildGoPackage {
   # Build the Go library
   buildPhase = ''
     runHook preBuild
-    go build -buildmode=c-archive -o $out/libstatus.a $NIX_BUILD_TOP/main.go
+    go build \
+      -buildmode='c-archive' \
+      -tags='gowaku_skip_migrations' \
+      -o "$out/libstatus.a" \
+      $NIX_BUILD_TOP/main.go
     runHook postBuild
   '';
 }

nix/status-go/mobile/build.nix

@@ -11,6 +11,9 @@
 
 let
   inherit (lib) concatStringsSep optionalString optional;
+  isIOS = platform == "ios";
+  isAndroid = platform == "android";
+
 in buildGoPackage {
   pname = source.repo;
   version = "${source.cleanVersion}-${source.shortRev}-${platform}";
@@ -20,30 +23,32 @@ in buildGoPackage {
 
   # Sandbox causes Xcode issues on MacOS. Requires sandbox=relaxed.
   # https://github.com/status-im/status-mobile/pull/13912
-  __noChroot = (platform == "ios");
+  __noChroot = isIOS;
 
   extraSrcPaths = [ gomobile ];
   nativeBuildInputs = [ gomobile removeReferencesTo ]
-    ++ optional (platform == "android") openjdk
-    ++ optional (platform == "ios") xcodeWrapper;
+    ++ optional isAndroid openjdk
+    ++ optional isIOS xcodeWrapper;
 
   ldflags = concatStringsSep " " goBuildLdFlags;
 
-  ANDROID_HOME = optionalString (platform == "android") androidPkgs.sdk;
+  ANDROID_HOME = optionalString isAndroid androidPkgs.sdk;
 
   # Ensure XCode is present for iOS, instead of failing at the end of the build.
-  preConfigure = optionalString (platform == "ios") utils.enforceXCodeAvailable;
+  preConfigure = optionalString isIOS utils.enforceXCodeAvailable;
 
   buildPhase = ''
     runHook preBuild
     echo -e "\nBuilding $pname for: ${concatStringsSep "," targets}"
 
+    set -x
     gomobile bind \
       ${concatStringsSep " " goBuildFlags} \
       -ldflags="$ldflags" \
       -target=${concatStringsSep "," targets} \
-      ${optionalString (platform == "android") "-androidapi=${platformVersion}"} \
-      ${optionalString (platform == "ios") "-iosversion=${platformVersion}"} \
+      ${optionalString isAndroid "-androidapi=${platformVersion}" } \
+      ${optionalString isIOS "-iosversion=${platformVersion}" } \
+     -tags='${optionalString isIOS "nowatchdog"} gowaku_skip_migrations' \
       -o ${outputFileName} \
       ${source.goPackagePath}/mobile
 
@@ -58,7 +63,7 @@ in buildGoPackage {
   # Drop govers from disallowedReferences.
   dontRenameImports = true;
   # Replace hardcoded paths to go package in /nix/store.
-  preFixup = optionalString (platform == "ios") ''
+  preFixup = optionalString isIOS ''
     find $out -type f -exec \
       remove-references-to -t $disallowedReferences '{}' + || true
   '';

package.json

@@ -37,7 +37,7 @@
     "qrcode": "^1.4.1",
     "react": "16.13.1",
     "react-dom": "^16.4.2",
-    "react-native": "0.63.4",
+    "react-native": "0.63.5",
     "react-native-background-timer": "^2.1.1",
     "react-native-blob-util": "^0.13.18",
     "react-native-camera-kit": "^8.0.4",

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,11 @@
 (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
                   :inner 72
@@ -131,8 +132,8 @@
                                                :no-color true}])
      (if profile-picture
        ;; display image
-       [rn/image {:style  (container-styling inner-dimensions outer-dimensions)
-                  :source profile-picture}]
+       [fast-image/fast-image {:source              {:uri profile-picture}
+                               :style               (container-styling inner-dimensions outer-dimensions)}]
        ;; else display initials
        [container inner-dimensions outer-dimensions
         [text/text {:weight :semi-bold

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]
-            [quo.theme :as theme]
+            [react-native.core :as rn]
+            [quo2.theme :as theme]
             [quo2.components.buttons.button :as button]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]

src/quo2/components/community/community_card_view.cljs

@@ -40,6 +40,8 @@
          [community-view/community-title
           {:title name
            :description description}]
-         [community-view/community-stats-column :card-view]
-         [community-view/community-tags tags]]]]]]))
+         [react/view {:style (styles/card-stats-position)}
+          [community-view/community-stats-column :card-view]]
+         [react/view {:style (styles/community-tags-position)}
+          [community-view/community-tags tags]]]]]]]))
 

src/quo2/components/community/community_list_view.cljs

@@ -3,6 +3,8 @@
    [quo2.components.community.community-view :as community-view]
    [quo2.components.markdown.text :as text]
    [quo2.foundations.colors :as colors]
+   [quo2.components.counter.counter :as counter]
+   [quo2.components.icon :as icons]
    [status-im.communities.core :as communities]
    [status-im.utils.handlers :refer [>evt]]
    [status-im.ui.components.react :as react]
@@ -10,7 +12,8 @@
    [status-im.ui.screens.communities.community :as community]
    [status-im.ui.screens.communities.icon :as communities.icon]))
 
-(defn communities-list-view-item [{:keys [id name locked status tokens background-color] :as community}]
+(defn communities-list-view-item [{:keys [id name locked? status notifications
+                                          tokens background-color] :as community}]
   [react/view {:style (merge (styles/community-card 16)
                              {:margin-bottom    12
                               :margin-horizontal 20})}
@@ -38,17 +41,39 @@
                    :size                :paragraph-1
                    :accessibility-label :community-name-text
                    :number-of-lines     1
-                   :ellipsize-mode      :tail}
+                   :ellipsize-mode      :tail
+                   :style               {:color   (when (= notifications :muted)
+                                                    (colors/theme-colors
+                                                     colors/neutral-40
+                                                     colors/neutral-60))}}
         name]
        [community-view/community-stats-column :list-view]]
-      (when (= status :gated)
-        [community-view/permission-tag-container {:locked       locked
-                                                  :status       status
-                                                  :tokens       tokens}])]]]])
+      (if  (= status :gated)
+        [community-view/permission-tag-container {:locked?      locked?
+                                                  :tokens       tokens}]
+        (cond
+          (= notifications :unread-messages-count)
+          [react/view {:style {:width            8
+                               :height           8
+                               :border-radius    4
+                               :background-color (colors/theme-colors
+                                                  colors/neutral-40
+                                                  colors/neutral-60)}}]
 
-(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
-  [react/view {:margin-bottom       12
-               :padding-horizontal  8}
+          (= notifications :unread-mentions-count)
+          [counter/counter {:type :default} 5]
+
+          (= notifications :muted)
+          [icons/icon  :main-icons2/muted {:container-style {:align-items     :center
+                                                             :justify-content :center}
+                                           :resize-mode      :center
+                                           :size             20
+                                           :color            (colors/theme-colors
+                                                              colors/neutral-40
+                                                              colors/neutral-50)}]))]]]])
+
+(defn communities-membership-list-item [{:keys [id name status tokens locked?] :as community}]
+  [react/view {:margin-bottom       20}
    [react/touchable-highlight {:underlay-color      colors/primary-50-opa-5
                                :style               {:border-radius 12}
                                :on-press      (fn []
@@ -58,19 +83,23 @@
                                :on-long-press #(>evt [:bottom-sheet/show-sheet
                                                       {:content (fn []
                                                                   [community/community-actions community])}])}
-    [react/view {:flex               1
-                 :padding-vertical   8
-                 :padding-horizontal 12}
+    [react/view {:flex               1}
      [react/view {:flex-direction    :row
                   :border-radius     16
                   :align-items       :center}
-      [communities.icon/community-icon-redesign community 48]
-      [react/view {:margin-left   12
-                   :flex          1}
-       [community-view/community-title {:title  name}]]
+      [communities.icon/community-icon-redesign community 32]
+      [react/view {:flex              1
+                   :margin-left       12
+                   :justify-content   :center}
+       [text/text
+        {:accessibility-label :chat-name-text
+         :number-of-lines     1
+         :ellipsize-mode      :tail
+         :weight              :semi-bold
+         :size                :paragraph-1}
+        name]]
       (when (= status :gated)
         [react/view {:justify-content   :center
                      :margin-right      12}
-         [community-view/permission-tag-container {:locked       locked
-                                                   :status       status
+         [community-view/permission-tag-container {:locked?      locked?
                                                    :tokens       tokens}]])]]]])

src/quo2/components/community/community_view.cljs

@@ -40,9 +40,10 @@
      [community-stats {:icon       :main-icons2/lightning
                        :count      "112.1K"
                        :icon-color icon-color}]
-     [community-stats {:icon       :main-icons2/placeholder
-                       :count      4
-                       :icon-color icon-color}]]))
+     (when (= type :card-view)
+       [community-stats {:icon       :main-icons2/placeholder
+                         :count      4
+                         :icon-color icon-color}])]))
 
 (defn community-tags [tags]
   [react/view (styles/community-tags-container)
@@ -77,10 +78,10 @@
        :style {:margin-top (if (= size :large) 8 2)}}
       description])])
 
-(defn permission-tag-container [{:keys [locked tokens]}]
+(defn permission-tag-container [{:keys [locked? tokens]}]
   [permission/tag {:background-color (colors/theme-colors
                                       colors/neutral-10
                                       colors/neutral-80)
-                   :locked           locked
+                   :locked?          locked?
                    :tokens           tokens
                    :size             24}])

src/quo2/components/community/discover_card.cljs

@@ -69,10 +69,11 @@
                   :height                    height
                   :background-color          colors/neutral-10}])])
 
-(defn discover-card [{:keys [title description on-press]}]
+(defn discover-card [{:keys [title description on-press accessibility-label]}]
   (let [on-joined-images     (get images   :images)]
     [react/touchable-without-feedback
-     {:on-press on-press}
+     {:on-press            on-press
+      :accessibility-label accessibility-label}
      [react/view (merge (styles/community-card 16)
                         {:background-color  (colors/theme-colors
                                              colors/white
@@ -91,4 +92,4 @@
                                  :border-radius 6
                                  :first-image   "" ; TODO replace with real data
                                  :last-image    ""}]) ; TODO replace with real data
-      ]]))
+      ]]))

src/quo2/components/counter/counter.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.counter.counter
-  (:require [quo.theme :as theme]
-            [quo.react-native :as rn]
+  (:require [quo2.theme :as theme]
+            [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]
-            [status-im.ui.components.react :as react]))
+            [react-native.linear-gradient :as linear-gradient]))
 
 (defn new-messages
   "new-messages params - label, color"
-  [{:keys [label color] :or {label (i18n/label :new-messages-header)
-                             color :primary}}]
+  [{:keys [label color] :or {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)"]
-                            :start {:x 0 :y 0} :end {:x 0 :y 1}}
+    [linear-gradient/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
+                                      :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]
-            [quo.react-native :as rn]
+            [react-native.core :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-direction     :row
-    :align-items        :center
-    :justify-content    :center}
-   (:x-tiny spacing/padding-horizontal)))
+  {:flex               1
+   :flex-direction     :row
+   :align-items        :center
+   :justify-content    :center
+   :padding-horizontal 4})
 
 (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
-                                                      :background    background
-                                                      :border-bottom border-bottom})}
+        [reanimated/view {:style (header-wrapper-style {:height        height
+                                                        :background    background
+                                                        :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]
-            [quo.react-native :as rn]
+  (:require [quo2.theme :as theme]
+            [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]
-            [quo.react-native :as rn]
+  (:require [quo2.theme :as theme]
+            [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
-             :flex-direction :row
+   [rn/view {:display         :flex
+             :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}
-                    (when
-                     (and (not locked?)
-                          muted?)
-                      {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
+     {:style  (merge {:margin-left 12}
+                     (when (and (not locked?) 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)}
-                   :holes (if last-item? []
-                              [{:x             hole-x
-                                :y             hole-y
-                                :width         hole-size
-                                :height        hole-size
-                                :borderRadius  hole-radius}])}
+    [hole-view/hole-view {:style {:margin-left   (if (= index 0) 0 margin-left)}
+                          :holes (if last-item? []
+                                     [{:x             hole-x
+                                       :y             hole-y
+                                       :width         hole-size
+                                       :height        hole-size
+                                       :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-contact-request
-  (:require [quo.react-native :as rn]
+(ns quo2.components.list-items.received-cr-item
+  (: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]
@@ -10,17 +10,9 @@
             [status-im.i18n.i18n :as i18n]
             [quo2.components.notifications.notification-dot :refer [notification-dot]]))
 
-(defn get-display-name [chat-id no-ens-name no-nickname]
-  (let [name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))]
-    (if (and no-ens-name no-nickname)
-      (let [[word1 word2] (str/split name " ")]
-        (str word1 " " word2))
-      name)))
-
-(defn list-item [{:keys [chat-id image contact message timestamp read]}]
+(defn received-cr-item [{:keys [chat-id message timestamp read]}]
   (let [no-ens-name  (str/blank? (get-in message [:content :ens-name]))
-        no-nickname  (nil? (get-in contact [:names :nickname]))
-        display-name (get-display-name chat-id no-ens-name no-nickname)]
+        display-name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))]
     [rn/view {:style {:flex-direction :row
                       :padding-top    8
                       :margin-top     4
@@ -32,7 +24,6 @@
                                :status-indicator? true
                                :online?           true
                                :size              :small
-                               :profile-picture   image
                                :ring?             false}]
      [rn/view {:style {:margin-horizontal 8}}
       [rn/view {:style {:flex-direction :row}}
@@ -82,3 +73,5 @@
                                                     :padding-horizontal 8
                                                     :margin-left        8}}
         [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/white})} (i18n/label :t/accept)]]]]]))
+
+

src/quo2/components/markdown/text.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.markdown.text
-  (:require [quo.react-native :as rn]
-            [quo.theme :as theme]
+  (:require [react-native.core :as rn]
+            [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]
-   [quo.theme :as theme]
+   [react-native.core :as rn]
+   [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]
-            [quo.theme :as theme]
+  (:require [react-native.core :as rn]
+            [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]
-            [quo2.reanimated :as reanimated]
+  (:require [react-native.core :as rn]
+            [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
-                                :padding-top  8}
-                        :key    new-notifications? ;; Key is required to force removal of holes
-                        :holes  (cond
-                                  (not new-notifications?) ;; No new notifications, remove holes
-                                  []
+         [hole-view/hole-view {:style {:padding-left 33
+                                       :padding-top  8}
+                               :key   new-notifications? ;; Key is required to force removal of holes
+                               :holes (cond
+                                        (not new-notifications?) ;; No new notifications, remove holes
+                                        []
 
-                                  (= notification-indicator :unread-dot)
-                                  [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
+                                        (= notification-indicator :unread-dot)
+                                        [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
 
-                                  :else
-                                  [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
+                                        :else
+                                        [{: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
-                      :holes  (cond
-                                (not new-notifications?) ;; No new notifications, remove holes
-                                []
+       [hole-view/hole-view {:key   new-notifications? ;; Key is required to force removal of holes
+                             :holes (cond
+                                      (not new-notifications?) ;; No new notifications, remove holes
+                                      []
 
-                                (= notification-indicator :unread-dot)
-                                [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
+                                      (= notification-indicator :unread-dot)
+                                      [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
 
-                                :else
-                                [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
+                                      :else
+                                      [{: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

@@ -0,0 +1,15 @@
+(ns quo2.components.notifications.info-count
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.foundations.typography :as typography]))
+
+(defn info-count [count style]
+  (when (> count 0)
+    [rn/view {:style (merge {:width            16
+                             :height           16
+                             :position         :absolute
+                             :right            22
+                             :border-radius    6
+                             :background-color (colors/theme-colors colors/primary-50 colors/primary-60)}
+                            style)}
+     [rn/text {:style (merge typography/font-medium typography/label {:color colors/white :text-align :center})} count]]))

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]
-            [quo.theme :as theme]
+            [react-native.core :as rn]
+            [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,14 +1,14 @@
 (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
      {:background-color (quo2.colors/theme-colors
-                         quo2.colors/neutral-30
+                         quo2.colors/neutral-10
                          quo2.colors/neutral-80)
       :align-self       :stretch
       :height           1})}])

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]
-   [quo.react-native :as rn]
+   [quo2.theme :as theme]
+   [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]
-            [quo.theme :as theme]
+            [react-native.core :as rn]
+            [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]
@@ -16,7 +16,7 @@
     (fn [{:keys [data size] :or {size default-tab-size}}]
       [rn/view (merge {:flex-direction :row} style)
        (doall
-        (for [{:keys [label id new-info]} data]
+        (for [{:keys [label id new-info accessibility-label]} data]
           ^{:key id}
           [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
            (when new-info
@@ -32,13 +32,14 @@
                        :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
               [notification-dot]])
            [tab/tab
-            {:id       id
-             :size     size
-             :active   (= id @active-tab-id)
-             :on-press (fn []
-                         (reset! active-tab-id id)
-                         (when on-change
-                           (on-change id)))}
+            {:id                  id
+             :size                size
+             :accessibility-label accessibility-label
+             :active              (= id @active-tab-id)
+             :on-press            (fn []
+                                    (reset! active-tab-id id)
+                                    (when on-change
+                                      (on-change id)))}
             label]]))])))
 
 (defn- calculate-fade-end-percentage

src/quo2/components/tags/base_tag.cljs

@@ -1,6 +1,5 @@
 (ns quo2.components.tags.base-tag
-  (:require
-   [quo.react-native :as rn]))
+  (:require [react-native.core :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]
-            [quo.theme :as quo.theme]
+  (:require [react-native.core :as rn]
+            [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]
-            [quo.react-native :as rn]
+            [quo2.theme :as theme]
+            [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]}]
@@ -25,5 +25,4 @@
                                       :main-icons2/placeholder
                                       resource)
                      :on-press      #(do (reset! active-tab-id %)
-                                         (when on-change (on-change %)))})
-             tag-label]])]))))
+                                         (when on-change (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]
-            [quo.theme :as theme]
+            [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
-            [quo.design-system.colors :as colors]
+            [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
             [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)
-            :flex             1}
+  [rn/view {: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]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [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]
-            [quo.react-native :as rn]
+  (:require [quo2.screens.preview :as preview]
+            [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,11 +1,10 @@
 (ns quo2.screens.community.community-card-view
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [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]
+            [quo.design-system.colors :as quo.colors]
             [quo2.components.community.community-card-view :as community-card-view]
             [status-im.i18n.i18n :as i18n]
             [status-im.react-native.resources :as resources]))
@@ -14,27 +13,28 @@
   {:id             constants/status-community-id
    :name           "Status"
    :description    "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
-   :status         :gated
-   :section        :popular
-   :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)}]}]
+   :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)}
                     {:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]})
 
-(def descriptor [{:label   "Community views"
-                  :key     :view-style
+(def descriptor [{:label   "Status:"
+                  :key     :status
                   :type    :select
-                  :options [{:key   :card-view
-                             :value "Card view"}
-                            {:key   :list-view
-                             :value "List view"}]}])
+                  :options [{:key   :gated
+                             :value "Gated"}
+                            {:key   :open
+                             :value "Open"}]}
+                 {:label "Locked:"
+                  :key   :locked?
+                  :type  :boolean}])
 
 (defn cool-preview []
-  (let [state (reagent/atom {:view-style :card-view})]
+  (let [state (reagent/atom {:status      :gated
+                             :locked?     true})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 150}
@@ -43,9 +43,8 @@
          [preview/customizer state descriptor]]
         [rn/view {:padding-vertical 60
                   :justify-content  :center}
-         (if (= :card-view (:view-style @state))
-           [community-card-view/community-card-view-item community-data]
-           [community-list-view/communities-list-view-item community-data])]]])))
+         [community-card-view/community-card-view-item (merge @state community-data)]]]])))
+
 (defn preview-community-card []
   [rn/view {:background-color (colors/theme-colors colors/neutral-5
                                                    colors/neutral-95)

src/quo2/screens/community/community_list_view.cljs

@@ -0,0 +1,70 @@
+(ns quo2.screens.community.community-list-view
+  (:require [quo.react-native :as rn]
+            [quo.previews.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]
+            [status-im.i18n.i18n :as i18n]
+            [status-im.react-native.resources :as resources]))
+
+(def community-data
+  {:id             constants/status-community-id
+   :name           "Status"
+   :description    "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
+   :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)}
+                    {:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]})
+
+(def descriptor [{:label   "Notifications:"
+                  :key     :notifications
+                  :type    :select
+                  :options [{:key   :muted
+                             :value "Muted"}
+                            {:key   :unread-mentions-count
+                             :value "Mention counts"}
+                            {:key   :unread-messages-count
+                             :value "Unread messages"}]}
+                 {:label   "Status:"
+                  :key     :status
+                  :type    :select
+                  :options [{:key   :gated
+                             :value "Gated"}
+                            {:key   :open
+                             :value "Open"}]}
+                 {:label   "Locked:"
+                  :key     :locked?
+                  :type    :boolean}])
+
+(defn cool-preview []
+  (let [notifications  (reagent/atom  (:notifications nil))
+        state          (reagent/atom {:locked?       true
+                                      :notifications nil
+                                      :status        (if notifications
+                                                       :gated
+                                                       :open)})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1
+                  :padding       16}
+         [preview/customizer state descriptor]]
+        [rn/view {:padding-vertical 60
+                  :justify-content  :center}
+         [community-list-view/communities-list-view-item (merge @state
+                                                                community-data)]]]])))
+
+(defn preview-community-list-view []
+  [rn/view {:background-color (colors/theme-colors colors/neutral-5
+                                                   colors/neutral-95)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])
+

src/quo2/screens/community/discover_card.cljs

@@ -0,0 +1,34 @@
+(ns quo2.screens.community.discover-card
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [reagent.core :as reagent]
+            [status-im.i18n.i18n :as i18n]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.community.discover-card :as discover-card]))
+
+(def descriptor [{:label "Joined:"
+                  :key   :joined?
+                  :type  :boolean}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:joined? :false})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1
+                  :padding       16}
+         [preview/customizer state descriptor]]
+        [rn/view {:padding-vertical 60
+                  :justify-content  :center}
+         [discover-card/discover-card {:joined?      (:joined? @state)
+                                       :title       (i18n/label :t/discover)
+                                       :description (i18n/label :t/whats-trending)}]]]])))
+
+(defn preview-discoverd-card []
+  [rn/view {:background-color (colors/theme-colors colors/neutral-5
+                                                   colors/neutral-95)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/counter/counter.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.counter.counter
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [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]
-            [quo.react-native :as rn]
+  (:require [quo2.screens.preview :as preview]
+            [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]
-            [quo.previews.preview :as preview]
-            [quo.react-native :as rn]
+  (:require [react-native.core :as rn]
+            [quo2.screens.preview :as preview]
             [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]
-            [quo.core :as quo]
-            [quo.design-system.colors :as quo.colors]
+  (:require [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
             [quo2.foundations.colors :as colors]
-            [quo.react-native :as rn]
-            [quo.theme :as theme]
+            [quo2.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]
@@ -17,6 +15,8 @@
             [quo2.screens.code.snippet :as code-snippet]
             [quo2.screens.counter.counter :as counter]
             [quo2.screens.community.community-card-view :as community-card]
+            [quo2.screens.community.discover-card :as discover-card]
+            [quo2.screens.community.community-list-view :as community-list-view]
             [quo2.screens.dividers.divider-label :as divider-label]
             [quo2.screens.dividers.new-messages :as new-messages]
             [quo2.screens.drawers.action-drawers :as drawers]
@@ -80,9 +80,15 @@
    :code [{:name         :snippet
            :insets       {:top false}
            :component    code-snippet/preview-code-snippet}]
-   :community [{:name      :community-cards
+   :community [{:name      :community-card-view
                 :insets    {:top false}
-                :component community-card/preview-community-card}]
+                :component community-card/preview-community-card}
+               {:name      :community-list-view
+                :insets    {:top false}
+                :component community-list-view/preview-community-list-view}
+               {:name      :discover-card
+                :insets    {:top false}
+                :component discover-card/preview-discoverd-card}]
    :counter [{:name      :counter
               :insets    {:top false}
               :component counter/preview-counter}]
@@ -187,26 +193,9 @@
 
 (defn theme-switcher []
   [rn/view {:style {:flex-direction   :row
-                    :margin-vertical  8
-                    :border-radius    4
-                    :background-color (:ui-01 @quo.colors/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"]]])
+                    :margin-vertical  8}}
+   [quo2-button/button {:on-press #(theme/set-theme :light)} "Set light theme"]
+   [quo2-button/button {:on-press #(theme/set-theme :dark)} "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]
-            [quo.react-native :as rn]
+            [quo2.screens.preview :as preview]
+            [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]
-   [quo.react-native :as rn]
+   [quo2.screens.preview :as preview]
+   [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]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [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]
-            [quo.react-native :as rn]
+  (:require [quo2.screens.preview :as preview]
+            [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]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [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]
-            [quo.react-native :as rn]
+  (:require [quo2.screens.preview :as preview]
+            [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]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
+            [react-native.core :as rn]
+            [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]
-            [quo.previews.preview :as preview]
+  (:require [react-native.core :as rn]
+            [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]