WIP: theme colors with jaime

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

ci/tests/Jenkinsfile.e2e-prs

@@ -45,6 +45,7 @@ pipeline {
 
   options {
     disableConcurrentBuilds()
+    timeout(time: 90, unit: 'MINUTES')
   }
 
   stages {

modules/react-native-status/android/src/main/java/im/status/ethereum/pushnotifications/PushNotificationHelper.java

@@ -67,8 +67,8 @@ public class PushNotificationHelper {
     private static final long DEFAULT_VIBRATION = 300L;
     private static final String CHANNEL_ID = "status-im-notifications";
     public static final String ACTION_DELETE_NOTIFICATION = "im.status.ethereum.module.DELETE_NOTIFICATION";
-    public static final String ACTION_TAP_NOTIFICATION = "im.status.ethereum.module.TAP_NOTIFICATION";
     public static final String ACTION_TAP_STOP = "im.status.ethereum.module.TAP_STOP";
+    final int flag =  Build.VERSION.SDK_INT >= Build.VERSION_CODES.M ? PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE : PendingIntent.FLAG_CANCEL_CURRENT;
 
     private NotificationManager notificationManager;
 
@@ -119,13 +119,8 @@ public class PushNotificationHelper {
     private final BroadcastReceiver notificationActionReceiver = new BroadcastReceiver() {
             @Override
             public void onReceive(Context context, Intent intent) {
-                if (intent.getAction() == ACTION_TAP_NOTIFICATION ||
-                    intent.getAction() == ACTION_DELETE_NOTIFICATION) {
-                    String deepLink = intent.getExtras().getString("im.status.ethereum.deepLink");
+                if (intent.getAction() == ACTION_DELETE_NOTIFICATION) {
                     String groupId = intent.getExtras().getString("im.status.ethereum.groupId");
-                    if (intent.getAction() == ACTION_TAP_NOTIFICATION) {
-                        context.startActivity(getOpenAppIntent(deepLink));
-                    }
                     if (groupId != null) {
                         cleanGroup(groupId);
                     }
@@ -141,7 +136,6 @@ public class PushNotificationHelper {
     private void registerBroadcastReceiver() {
         IntentFilter filter = new IntentFilter();
         filter.addAction(ACTION_DELETE_NOTIFICATION);
-        filter.addAction(ACTION_TAP_NOTIFICATION);
         filter.addAction(ACTION_TAP_STOP);
         context.registerReceiver(notificationActionReceiver, filter);
         Log.e(LOG_TAG, "Broadcast Receiver registered");
@@ -701,37 +695,31 @@ public class PushNotificationHelper {
 
     private StatusMessage createMessage(Bundle data) {
         Person author = getPerson(data.getBundle("notificationAuthor"));
-        return new StatusMessage(data.getString("id"), author,  data.getLong("timestamp"), data.getString("message"));
+        long timeStampLongValue = (long) data.getDouble("timestamp");
+        return new StatusMessage(data.getString("id"), author, timeStampLongValue, data.getString("message"));
     }
 
     private PendingIntent createGroupOnDismissedIntent(Context context, int notificationId, String groupId, String deepLink) {
         Intent intent = new Intent(ACTION_DELETE_NOTIFICATION);
         intent.putExtra("im.status.ethereum.deepLink", deepLink);
         intent.putExtra("im.status.ethereum.groupId", groupId);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent, flag);
     }
 
     private PendingIntent createGroupOnTapIntent(Context context, int notificationId, String groupId, String deepLink) {
-        Intent intent = new Intent(ACTION_TAP_NOTIFICATION);
-        intent.putExtra("im.status.ethereum.deepLink", deepLink);
-        intent.putExtra("im.status.ethereum.groupId", groupId);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        Intent intent = getOpenAppIntent(deepLink);
+        return PendingIntent.getActivity(context.getApplicationContext(), notificationId, intent, flag);
    }
 
     private PendingIntent createOnTapIntent(Context context, int notificationId, String deepLink) {
-        Intent intent = new Intent(ACTION_TAP_NOTIFICATION);
-        intent.putExtra("im.status.ethereum.deepLink", deepLink);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        Intent intent = getOpenAppIntent(deepLink);
+        return PendingIntent.getActivity(context.getApplicationContext(), notificationId, intent, flag);
    }
 
     private PendingIntent createOnDismissedIntent(Context context, int notificationId, String deepLink) {
         Intent intent = new Intent(ACTION_DELETE_NOTIFICATION);
         intent.putExtra("im.status.ethereum.deepLink", deepLink);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent, flag);
     }
 
     public void removeStatusMessage(Bundle bundle) {

src/quo2/components/buttons/button.cljs

@@ -220,10 +220,10 @@
    only icon
    [button {:icon true} :i/close-circle]"
   [_ _]
-  (let [pressed (reagent/atom false)]
+  (let [pressed-in (reagent/atom false)]
     (fn
-      [{:keys [on-press disabled type size before after above
-               width customization-color override-theme override-background-color
+      [{:keys [on-press disabled type size before after above icon-secondary-no-color
+               width customization-color override-theme override-background-color pressed
                on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
         :or   {type                :primary
                size                40
@@ -234,17 +234,17 @@
                     [(or
                       override-theme
                       (theme/get-theme)) type])
-            state (cond disabled :disabled
-                        @pressed :pressed
-                        :else    :default)
+            state (cond disabled                 :disabled
+                        (or @pressed-in pressed) :pressed
+                        :else                    :default)
             icon-size (when (= 24 size) 12)
             icon-secondary-color (or icon-secondary-color icon-color)]
         [rn/touchable-without-feedback
          (merge {:test-ID             test-ID
                  :disabled            disabled
                  :accessibility-label accessibility-label
-                 :on-press-in         #(reset! pressed true)
-                 :on-press-out        #(reset! pressed nil)}
+                 :on-press-in         #(reset! pressed-in true)
+                 :on-press-out        #(reset! pressed-in nil)}
                 (when on-press
                   {:on-press on-press})
                 (when on-long-press
@@ -306,5 +306,6 @@
               [quo2.icons/icon after
                {:container-style {:margin-left  4
                                   :margin-right (if (= size 40) 12 8)}
+                :no-color        icon-secondary-no-color
                 :color           icon-secondary-color
                 :size            icon-size}]])]]]))))

src/quo2/components/buttons/predictive_keyboard/view.cljs

@@ -42,7 +42,8 @@
     (case type
       :words
       [rn/flat-list
-       {:data                              words
+       {:keyboard-should-persist-taps      :always
+        :data                              words
         :content-container-style           style/word-list
         :render-fn                         word-component
         :render-data                       {:blur?    blur?

src/quo2/components/community/community_list_view.cljs

@@ -90,7 +90,8 @@
    (merge {:underlay-color (colors/theme-colors
                             colors/neutral-5
                             colors/neutral-95)
-           :style          {:border-radius 12}}
+           :style          {:border-radius 12
+                            :margin-left   12}}
           props)
    [rn/view (merge (style/membership-info-container) style)
     [community-icon/community-icon

src/quo2/components/counter/counter.cljs

@@ -26,9 +26,8 @@
    value]
   (let [type       (or type :default)
         text-color (or override-text-color
-                       (if (or
-                            (= (theme/get-theme) :dark)
-                            (= type :default))
+                       (if (or (= (theme/get-theme) :dark)
+                               (= type :default))
                          colors/white
                          colors/neutral-100))
         value      (utils.number/parse-int value)
@@ -52,16 +51,20 @@
                                     style)
                              (= type :outline)
                              (merge {:border-width 1
-                                     :border-color (get-color type)})
+                                     :border-color (colors/get-color :yin-yang (theme/get-theme))})
 
                              (not= type :outline)
                              (assoc :background-color
                                     (or override-bg-color
-                                        (get-color type)))
+                                        (colors/get-color :yin-yang (theme/get-theme))))
 
                              (> value max-value)
                              (assoc :padding-left 0.5))}
      [text/text
       {:weight :medium
        :size   :label
-       :style  {:color text-color}} label]]))
+       :style  {:color (colors/get-secondary-color
+                        :yin-yang
+                        (theme/get-theme)
+                        colors/white)}}
+      label]]))

src/quo2/components/drawers/action_drawers/component_spec.cljs

@@ -1,53 +1,62 @@
 (ns quo2.components.drawers.action-drawers.component-spec
-  (:require ["@testing-library/react-native" :as rtl]
-            [quo2.components.drawers.action-drawers.view :as action-drawer]
-            [reagent.core :as reagent]))
+  (:require [quo2.components.drawers.action-drawers.view :as action-drawer]
+            [test-helpers.component :as h]))
 
-(defn render-action-drawer
-  ([options]
-   (rtl/render (reagent/as-element [action-drawer/action-drawer options]))))
+(h/describe "action drawer"
+  (h/test "default render"
+    (h/render [action-drawer/action-drawer
+               [[{:icon  :i/friend
+                  :label "a sample label"}]]])
+    (h/is-truthy (h/get-by-text "a sample label")))
 
-(js/global.test "action-drawer renders with elements label displaying"
-  (fn []
-    (render-action-drawer [[{:icon  :i/friend
-                             :label "a sample label"}]])
-    (-> (js/expect (rtl/screen.getByText "a sample label"))
-        (.toBeTruthy))))
+  (h/test "renders with elements sub-label displaying"
+    (h/render [action-drawer/action-drawer
+               [[{:icon      :i/friend
+                  :label     "a sample label"
+                  :sub-label "a sample sub label"}]]])
+    (h/is-truthy (h/get-by-text "a sample sub label")))
 
-(js/global.test "action-drawer renders with elements sub-label displaying"
-  (fn []
-    (render-action-drawer [[{:icon      :i/friend
-                             :label     "a sample label"
-                             :sub-label "a sample sub label"}]])
-    (-> (js/expect (rtl/screen.getByText "a sample sub label"))
-        (.toBeTruthy))))
+  (h/test "on click action works on element"
+    (let [on-press (js/jest.fn)]
+      (h/render [action-drawer/action-drawer
+                 [[{:icon     :i/friend
+                    :label    "a sample label"
+                    :on-press on-press}]]])
+      (h/fire-event :press (h/get-by-text "a sample label"))
+      (h/was-called on-press)))
 
-(js/global.test "action-drawer on click action works on element"
-  (let [event (js/jest.fn)]
-    (fn []
-      (render-action-drawer [[{:icon     :i/friend
-                               :label    "a sample label"
-                               :on-press event}]])
-      (rtl/fireEvent.press (rtl/screen.getByText "a sample label"))
-      (-> (js/expect event)
-          (.toHaveBeenCalled)))))
+  (h/test "disabled state"
+    (let [on-press-muted  (js/jest.fn)
+          on-press-friend (js/jest.fn)
+          label-mute      "Mute"
+          label-friend    "View member details"]
+      (h/render [action-drawer/action-drawer
+                 [[{:icon     :i/muted
+                    :label    label-mute
+                    :on-press on-press-muted}
+                   {:icon      :i/friend
+                    :label     label-friend
+                    :disabled? true
+                    :on-press  on-press-friend}]]])
+      (h/fire-event :press (h/get-by-text label-mute))
+      (h/was-called on-press-muted)
 
-(js/global.test "action-drawer renders two icons when set"
-  (fn []
-    (render-action-drawer [[{:icon                :i/friend
-                             :label               "a sample label"
-                             :right-icon          :i/friend
-                             :accessibility-label :first-element}]])
-    (-> (js/expect (rtl/screen.getByLabelText "right-icon-for-action"))
-        (.toBeTruthy))
-    (-> (js/expect (rtl/screen.queryByLabelText "left-icon-for-action"))
-        (.toBeTruthy))))
+      (h/fire-event :press (h/get-by-text label-friend))
+      (h/was-not-called on-press-friend)))
 
-(js/global.test "action-drawer renders a divider when the add-divider? prop is true"
-  (fn []
-    (render-action-drawer [[{:icon                :i/friend
-                             :label               "a sample label"
-                             :add-divider?        true
-                             :accessibility-label :first-element}]])
-    (-> (js/expect (rtl/screen.getAllByLabelText "divider"))
-        (.toBeTruthy))))
+  (h/test "renders two icons when set"
+    (h/render [action-drawer/action-drawer
+               [[{:icon                :i/friend
+                  :label               "a sample label"
+                  :right-icon          :i/friend
+                  :accessibility-label :first-element}]]])
+    (h/is-truthy (h/get-by-label-text "right-icon-for-action"))
+    (h/is-truthy (h/query-by-label-text "left-icon-for-action")))
+
+  (h/test "renders a divider when the add-divider? prop is true"
+    (h/render [action-drawer/action-drawer
+               [[{:icon                :i/friend
+                  :label               "a sample label"
+                  :add-divider?        true
+                  :accessibility-label :first-element}]]])
+    (h/is-truthy (h/get-all-by-label-text "divider"))))

src/quo2/components/drawers/action_drawers/style.cljs

@@ -11,9 +11,10 @@
    :flex-direction   :row})
 
 (defn container
-  [sub-label]
+  [sub-label disabled?]
   {:border-radius     12
    :height            (if sub-label 58 50)
+   :opacity           (when disabled? 0.3)
    :margin-horizontal 8})
 
 (defn row-container

src/quo2/components/drawers/action_drawers/view.cljs

@@ -18,12 +18,19 @@
     :accessible          true
     :accessibility-label :divider}])
 
-(defn action
+(defn- maybe-pressable
+  [disabled? props child]
+  (if disabled?
+    [rn/view (dissoc props :on-press) child]
+    [rn/touchable-highlight props child]))
+
+(defn- action
   [{:keys [icon
            label
            sub-label
            right-icon
            danger?
+           disabled?
            on-press
            add-divider?
            override-theme
@@ -33,9 +40,9 @@
     [:<> {:key label}
      (when add-divider?
        [divider])
-     [rn/touchable-highlight
+     [maybe-pressable disabled?
       {:accessibility-label accessibility-label
-       :style               (style/container sub-label)
+       :style               (style/container sub-label disabled?)
        :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
        :on-press            on-press}
       [rn/view

src/quo2/components/drawers/documentation_drawers/style.cljs

@@ -1,10 +1,9 @@
 (ns quo2.components.drawers.documentation-drawers.style)
 
 (def container
-  {:align-items :flex-start
-   :padding     20})
+  {:align-items        :flex-start
+   :padding-horizontal 20})
 
 (def content
-  {:margin-top    12
+  {:margin-top    8
    :margin-bottom 16})
-

src/quo2/components/drawers/drawer_buttons/style.cljs

@@ -1,10 +1,11 @@
 (ns quo2.components.drawers.drawer-buttons.style
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.platform :as platform]))
+  (:require [quo2.foundations.colors :as colors]))
 
 (def outer-container
-  {:height        216
-   :border-radius 20})
+  {:height                  216
+   :border-top-left-radius  20
+   :border-top-right-radius 20
+   :overflow                :hidden})
 
 (def top-card
   {:flex                    1
@@ -12,9 +13,7 @@
    :padding-horizontal      20
    :border-top-left-radius  20
    :border-top-right-radius 20
-   :background-color        (if platform/ios?
-                              colors/neutral-80-opa-80-blur
-                              colors/neutral-80)})
+   :background-color        colors/neutral-80-opa-80-blur})
 
 (def bottom-card
   {:position                :absolute
@@ -33,11 +32,11 @@
    :justify-content :space-between})
 
 (def bottom-icon
-  {:border-radius   40
+  {:border-radius   32
    :border-width    1
    :margin-left     24
-   :height          28
-   :width           28
+   :height          32
+   :width           32
    :justify-content :center
    :align-items     :center
    :border-color    colors/white-opa-5})
@@ -52,4 +51,4 @@
 (defn heading-text
   [gap]
   {:color         colors/white
-   :margin-bottom gap})
+   :margin-bottom gap})

src/quo2/components/drawers/drawer_buttons/view.cljs

@@ -71,14 +71,28 @@
     child-2           string, keyword or hiccup
    "
   [{:keys [container-style top-card bottom-card]} child-1 child-2]
-  [blur/ios-view
+  [rn/view
    {:style (merge container-style style/outer-container)}
-   [card
-    (merge {:gap   4
-            :top?  true
-            :style style/top-card}
-           top-card) child-1]
-   [card
-    (merge {:style style/bottom-card
-            :gap   20}
-           bottom-card) child-2]])
+   [blur/view
+    {:blur-type   :dark
+     :blur-amount 10
+     :style       {:flex                    1
+                   :border-top-left-radius  20
+                   :border-top-right-radius 20}}]
+   [rn/view
+    {:style {:flex             1
+             :background-color :transparent
+             :position         :absolute
+             :top              0
+             :left             0
+             :right            0
+             :bottom           0}}
+    [card
+     (merge {:gap   4
+             :top?  true
+             :style style/top-card}
+            top-card) child-1]
+    [card
+     (merge {:style style/bottom-card
+             :gap   20}
+            bottom-card) child-2]]])

src/quo2/components/dropdowns/dropdown.cljs

@@ -1,165 +1,14 @@
 (ns quo2.components.dropdowns.dropdown
-  (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
-            [reagent.core :as reagent]))
-
-(defn apply-anim
-  [dd-height val]
-  (reanimated/animate-shared-value-with-delay dd-height
-                                              val
-                                              300
-                                              :easing1
-                                              0))
-
-(def sizes
-  {:big    {:icon-size 20
-            :font      {:font-size :paragraph-1}
-            :height    40
-            :padding   {:padding-with-icon    {:padding-vertical   9
-                                               :padding-horizontal 12}
-                        :padding-with-no-icon {:padding-vertical 9
-                                               :padding-left     12
-                                               :padding-right    8}}}
-   :medium {:icon-size 20
-            :font      {:font-size :paragraph-1}
-            :height    32
-            :padding   {:padding-with-icon    {:padding-vertical   5
-                                               :padding-horizontal 8}
-                        :padding-with-no-icon {:padding-vertical 5
-                                               :padding-left     12
-                                               :padding-right    8}}}
-   :small  {:icon-size 15
-            :font      {:font-size :paragraph-2}
-            :height    24
-            :padding   {:padding-with-icon    {:padding-vertical   3
-                                               :padding-horizontal 6}
-                        :padding-with-no-icon {:padding-vertical   3
-                                               :padding-horizontal 6}}}})
-(defn color-by-10
-  [color]
-  (colors/alpha color 0.6))
-
-(defn dropdown-comp
-  [{:keys [icon dd-height size disabled? dd-color use-border? border-color]}]
-  (let [dark?                                                         (colors/dark?)
-        {:keys [width height width-with-icon padding font icon-size]} (size sizes)
-        {:keys [padding-with-icon padding-with-no-icon]}              padding
-        font-size                                                     (:font-size font)
-        spacing                                                       (case size
-                                                                        :big    4
-                                                                        :medium 2
-                                                                        :small  2)
-        open?                                                         (reagent/atom false)]
-    (fn []
-      [rn/touchable-opacity
-       (cond->
-         {:on-press (fn []
-                      (if (swap! open? not)
-                        (apply-anim dd-height 120)
-                        (apply-anim dd-height 0)))
-          :style    (cond->
-                      (merge
-                       (if icon
-                         padding-with-icon
-                         padding-with-no-icon)
-                       {:width            (if icon
-                                            width-with-icon
-                                            width)
-                        :height           height
-                        :border-radius    (case size
-                                            :big    12
-                                            :medium 10
-                                            :small  8)
-                        :flex-direction   :row
-                        :align-items      :center
-                        :background-color (if @open?
-                                            dd-color
-                                            (color-by-10 dd-color))})
-                      use-border? (assoc :border-width 1
-                                         :border-color (if @open?
-                                                         border-color
-                                                         (color-by-10 border-color))))}
-         disabled? (assoc-in [:style :opacity] 0.3)
-         disabled? (assoc :disabled true))
-       (when icon
-         [icons/icon icon
-          {:no-color        true
-           :size            20
-           :container-style {:margin-right spacing
-                             :margin-top   1
-                             :width        icon-size
-                             :height       icon-size}}])
-       [text/text
-        {:size   font-size
-         :weight :medium
-         :font   :font-medium
-         :color  :main} "Dropdown"]
-       [icons/icon
-        (if @open?
-          (if dark?
-            :main-icons/pullup-dark
-            :main-icons/pullup)
-          (if dark?
-            :main-icons/dropdown-dark
-            :main-icons/dropdown))
-        {:size            20
-         :no-color        true
-         :container-style {:width         (+ icon-size 3)
-                           :border-radius 20
-                           :margin-left   (if (= :small size)
-                                            2
-                                            4)
-                           :margin-top    1
-                           :height        (+ icon-size 4)}}]])))
-
-(defn items-comp
-  [{:keys [items on-select]}]
-  (let [items-count (count items)]
-    [rn/scroll-view
-     {:horizontal          false
-      :nestedScrollEnabled true}
-     (doall
-      (map-indexed (fn [index item]
-                     [rn/touchable-opacity
-                      {:key      (str item index)
-                       :style    {:padding             4
-                                  :border-bottom-width (if (= index (- items-count 1))
-                                                         0
-                                                         1)
-                                  :border-color        (colors/theme-colors
-                                                        colors/neutral-100
-                                                        colors/white)
-                                  :text-align          :center}
-                       :on-press #(on-select item)}
-                      [text/text {:style {:text-align :center}} item]])
-                   items))]))
-
-(defn- f-dropdown
-  [{:keys [items icon text default-item on-select size disabled? border-color use-border? dd-color]}]
-  (let [dd-height (reanimated/use-shared-value 0)]
-    [rn/view {:style {:flex-grow 1}}
-     [dropdown-comp
-      {:items        items
-       :icon         icon
-       :disabled?    disabled?
-       :size         size
-       :dd-color     dd-color
-       :text         text
-       :border-color (colors/custom-color-by-theme border-color 50 60)
-       :use-border?  use-border?
-       :default-item default-item
-       :dd-height    dd-height}]
-     [reanimated/view
-      {:style (reanimated/apply-animations-to-style
-               {:height dd-height}
-               {})}
-      [items-comp
-       {:items     items
-        :on-select on-select}]]]))
+  (:require [quo2.components.buttons.button :as button]))
 
 (defn dropdown
-  [params]
-  [:f> f-dropdown params])
+  [_ _]
+  (fn [{:keys [on-change selected] :as opts} children]
+    [button/button
+     (merge
+      opts
+      {:after                   (if selected :i/pullup :i/dropdown)
+       :icon-secondary-no-color true
+       :pressed                 selected
+       :on-press                #(when on-change (on-change selected))})
+     children]))

src/quo2/components/empty_state/empty_state/styles.cljs

@@ -0,0 +1,30 @@
+(ns quo2.components.empty-state.empty-state.styles
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:padding     12
+   :align-items :center})
+
+(def image
+  {:width  80
+   :height 80})
+
+(def text-container
+  {:margin-top  12
+   :align-items :center})
+
+(defn title
+  [blur?]
+  (cond-> {:margin-bottom 2}
+    blur? (assoc :color colors/white)))
+
+(defn description
+  [blur?]
+  (when blur?
+    {:color colors/white}))
+
+(def button-container {:margin-top 20})
+
+(defn upper-button-color
+  [customization-color]
+  (colors/custom-color-by-theme customization-color 50 60))

src/quo2/components/empty_state/empty_state/view.cljs

@@ -0,0 +1,50 @@
+(ns quo2.components.empty-state.empty-state.view
+  (:require [quo2.components.buttons.button :as button]
+            [quo2.components.empty-state.empty-state.styles :as styles]
+            [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]))
+
+(defn empty-state
+  [{:keys        [customization-color image title description blur?]
+    upper-button :upper-button
+    lower-button :lower-button
+    :or          {customization-color :blue}}]
+  [rn/view {:style styles/container}
+   [fast-image/fast-image
+    {:style  styles/image
+     :source image}]
+   [rn/view {:style styles/text-container}
+    [text/text
+     {:style           (styles/title blur?)
+      :number-of-lines 1
+      :weight          :semi-bold
+      :size            :paragraph-1}
+     title]
+    [text/text
+     {:style           (styles/description blur?)
+      :number-of-lines 1
+      :text-align      :center
+      :weight          :regular
+      :size            :paragraph-2}
+     description]]
+   (when-let [{upper-button-text     :text
+               upper-button-on-press :on-press} upper-button]
+     [rn/view {:style styles/button-container}
+      [button/button
+       (cond-> {:type                      :primary
+                :size                      32
+                :override-background-color (styles/upper-button-color customization-color)
+                :on-press                  upper-button-on-press}
+         blur? (assoc :override-theme :dark))
+       upper-button-text]
+
+      (when-let [{lower-button-text     :text
+                  lower-button-on-press :on-press} lower-button]
+        [button/button
+         (cond-> {:style    {:margin-top 12}
+                  :size     32
+                  :type     :blur-bg
+                  :on-press lower-button-on-press}
+           blur? (assoc :override-theme :dark))
+         lower-button-text])])])

src/quo2/components/info/info_message.cljs

@@ -22,27 +22,26 @@
   opts
   {:type           :default/:success/:error
    :size           :default/:tiny
-   :icon           :i/info ;; info message icon
-   :text-color     colors/white     ;; text color override
-   :icon-color     colors/white    ;; icon color override
-   :no-icon-color? false       ;; disable tint color for icon"
+   :icon           :i/info       ;; info message icon
+   :text-color     colors/white  ;; text color override
+   :icon-color     colors/white  ;; icon color override
+   :no-icon-color? false         ;; disable tint color for icon"
   [{:keys [type size icon text-color icon-color no-icon-color? style]} message]
-  (let [weight          (if (= size :default) :regular :medium)
-        icon-size       (if (= size :default) 16 12)
-        icon-margin-top (if (= size :default) 2 3)
-        size            (if (= size :default) :paragraph-2 :label)
-        text-color      (or text-color (get-color type))
-        icon-color      (or icon-color text-color)]
+  (let [weight     (if (= size :default) :regular :medium)
+        icon-size  (if (= size :default) 16 12)
+        size       (if (= size :default) :paragraph-2 :label)
+        text-color (or text-color (get-color type))
+        icon-color (or icon-color text-color)]
     [rn/view
-     {:style (merge {:flex-direction :row}
+     {:style (merge {:flex-direction :row
+                     :align-items    :center}
                     style)}
      [quo2.icons/icon icon
-      {:color           icon-color
-       :no-color        no-icon-color?
-       :size            icon-size
-       :container-style {:margin-top icon-margin-top}}]
+      {:color    icon-color
+       :no-color no-icon-color?
+       :size     icon-size}]
      [text/text
       {:size   size
        :weight weight
        :style  {:color             text-color
-                :margin-horizontal 8}} message]]))
+                :margin-horizontal 4}} message]]))

src/quo2/components/inputs/profile_input/style.cljs

@@ -13,7 +13,7 @@
 
 (def button
   {:position      :absolute
-   :top           23
+   :top           24
    :bottom        0
    :left          33
    :right         0

src/quo2/components/inputs/profile_input/view.cljs

@@ -22,7 +22,7 @@
       (if platform/ios?
         [hole-view/hole-view
          {:holes [{:x            33
-                   :y            23
+                   :y            24
                    :width        24
                    :height       24
                    :borderRadius 12}]}

src/quo2/components/inputs/recovery_phrase/component_spec.cljs

@@ -28,8 +28,9 @@
   (h/describe "Error text"
     (h/test "Marked when words doesn't satisfy a predicate"
       (h/render [recovery-phrase/recovery-phrase-input
-                 {:mark-errors? true
-                  :error-pred   #(>= (count %) 5)}
+                 {:mark-errors?             true
+                  :error-pred-current-word  #(>= (count %) 5)
+                  :error-pred-written-words #(>= (count %) 5)}
                  "Text with some error words that don't satisfy the predicate"])
       (let [children-text-nodes            (-> (h/get-by-label-text :recovery-phrase-input)
                                                (oops/oget "props" "children" "props" "children")

src/quo2/components/inputs/recovery_phrase/view.cljs

@@ -15,15 +15,27 @@
    text])
 
 (defn- mark-error-words
-  [pred text word-limit]
-  (let [word-limit (or word-limit ##Inf)]
-    (into [:<>]
-          (comp (map-indexed (fn [idx word]
-                               (if (or (pred word) (>= idx word-limit))
-                                 [error-word word]
-                                 word)))
-                (interpose " "))
-          (string/split text #" "))))
+  [pred-last-word pred-previous-words text word-limit]
+  (let [last-index (dec (count (string/split text #"\s+")))
+        words      (map #(apply str %)
+                        (partition-by #(= " " %) text))]
+    (->> words
+         (reduce (fn [{:keys [idx] :as acc} word]
+                   (let [error-pred        (if (= last-index idx) pred-last-word pred-previous-words)
+                         invalid-word?     (and (or (error-pred word)
+                                                    (>= idx word-limit))
+                                                (not (string/blank? word)))
+                         not-blank-spaces? (not (string/blank? word))]
+                     (cond-> acc
+                       not-blank-spaces? (update :idx inc)
+                       :always           (update :result
+                                                 conj
+                                                 (if invalid-word?
+                                                   [error-word word]
+                                                   word)))))
+                 {:result [:<>]
+                  :idx    0})
+         :result)))
 
 (defn recovery-phrase-input
   [_ _]
@@ -31,9 +43,11 @@
         set-focused #(reset! state :focused)
         set-default #(reset! state :default)]
     (fn [{:keys [customization-color override-theme blur? on-focus on-blur mark-errors?
-                 error-pred word-limit]
-          :or   {customization-color :blue
-                 error-pred          (constantly false)}
+                 error-pred-current-word error-pred-written-words word-limit]
+          :or   {customization-color      :blue
+                 word-limit               ##Inf
+                 error-pred-current-word  (constantly false)
+                 error-pred-written-words (constantly false)}
           :as   props}
          text]
       (let [extra-props (apply dissoc props custom-props)]
@@ -53,5 +67,5 @@
                                             (when on-blur (on-blur)))}
                  extra-props)
           (if mark-errors?
-            (mark-error-words error-pred text word-limit)
+            (mark-error-words error-pred-current-word error-pred-written-words text word-limit)
             text)]]))))

src/quo2/components/inputs/title_input/view.cljs

@@ -15,13 +15,15 @@
 (defn title-input
   [{:keys [blur?
            on-change-text
+           auto-focus
            placeholder
            max-length
            default-value
            override-theme]
     :or   {max-length    0
+           auto-focus    false
            default-value ""}}]
-  (let [focused?  (reagent/atom false)
+  (let [focused?  (reagent/atom auto-focus)
         value     (reagent/atom default-value)
         on-change (fn [v]
                     (reset! value v)
@@ -42,6 +44,7 @@
           :keyboard-appearance (theme/theme-value :light :dark override-theme)
           :on-focus #(swap! focused? (fn [] true))
           :on-blur #(swap! focused? (fn [] false))
+          :auto-focus auto-focus
           :input-mode :text
           :on-change-text on-change
           :editable (not disabled?)

src/quo2/components/profile/profile_card/style.cljs

@@ -27,7 +27,8 @@
   {:color colors/white})
 
 (def emoji-hash
-  {:margin-top 12})
+  {:margin-top     12
+   :letter-spacing 1.5})
 
 (def user-hash
   {:margin-top 2

src/quo2/components/profile/profile_card/view.cljs

@@ -94,9 +94,8 @@
            style/keycard-icon))]
        (when show-user-hash?
          [text/text
-          {:weight          :monospace
-           :number-of-lines 1
-           :style           style/user-hash} hash])
+          {:weight :monospace
+           :style  style/user-hash} hash])
        (when (and show-emoji-hash? emoji-hash)
          [text/text
           {:weight          :monospace

src/quo2/components/reactions/reaction.cljs

@@ -1,6 +1,7 @@
 (ns quo2.components.reactions.reaction
   (:require [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
+            [quo2.components.reactions.resource :as resource]
             [quo2.components.reactions.style :as style]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as theme]
@@ -13,7 +14,7 @@
      {:on-press            on-press
       :accessibility-label :emoji-reaction-add
       :style               (style/add-reaction)}
-     [icons/icon :i/add
+     [icons/icon :i/add-reaction
       {:size  20
        :color (if dark?
                 colors/white
@@ -21,15 +22,17 @@
 
 (defn reaction
   "Add your emoji as a param here"
-  [{:keys [emoji clicks neutral? on-press accessibility-label]}]
+  [{:keys [emoji clicks neutral? on-press accessibility-label on-long-press]}]
   (let [numeric-value (int clicks)]
     [rn/touchable-opacity
      {:on-press            on-press
+      :on-long-press       on-long-press
       :accessibility-label accessibility-label
       :style               (style/reaction neutral?)}
-     [icons/icon emoji
-      {:no-color true
-       :size     16}]
+     [rn/image
+      {:style               {:width 16 :height 16}
+       :accessibility-label :emoji
+       :source              (resource/get-reaction emoji)}]
      [text/text
       {:size            :paragraph-2
        :weight          :semi-bold

src/quo2/components/reactions/resource.clj

@@ -0,0 +1,30 @@
+(ns quo2.components.reactions.resource
+  (:require [clojure.java.io :as io]
+            [clojure.string :as string]))
+
+(def ^:private reactions-dir "./resources/images/reactions/")
+
+(defn- resolve-reaction
+  [reaction]
+  (let [path (str reactions-dir (name reaction) ".png")
+        file (io/file path)]
+    (when (.exists file)
+      `(js/require ~(str "." path)))))
+
+(defn- find-all-image-base-names
+  []
+  (let [dir (io/file reactions-dir)]
+    (->> dir
+         file-seq
+         (filter #(string/ends-with? % "png"))
+         (map #(.getName %))
+         (map #(string/replace % #"\.png$" ""))
+         (map #(first (string/split % #"@")))
+         distinct)))
+
+(defmacro resolve-all-reactions
+  []
+  (reduce (fn [acc reaction]
+            (assoc acc reaction (resolve-reaction reaction)))
+          {}
+          (find-all-image-base-names)))

src/quo2/components/reactions/resource.cljs

@@ -0,0 +1,12 @@
+(ns quo2.components.reactions.resource
+  (:require-macros [quo2.components.reactions.resource :refer [resolve-all-reactions]]))
+
+(def ^:private reactions
+  (resolve-all-reactions))
+
+(defn get-reaction
+  [reaction]
+  (assert (keyword? reaction) "Reaction should be a keyword")
+  (assert (= "reaction" (namespace reaction))
+          "Reaction keyword should be namespaced with :reaction")
+  (get reactions (name reaction)))

src/quo2/components/selectors/disclaimer/view.cljs

@@ -6,9 +6,9 @@
 
 (defn view
   [{:keys [checked? blur? accessibility-label container-style on-change]} label]
-  [rn/touchable-opacity
+  [rn/touchable-without-feedback
    {:on-press            on-change
-    :accessibility-label "disclaimer-touchable-opacity"}
+    :accessibility-label :disclaimer-touchable-opacity}
    [rn/view {:style (merge container-style (style/container blur?))}
     [selectors/checkbox
      {:accessibility-label accessibility-label

src/quo2/components/selectors/reactions/component_spec.cljs

@@ -0,0 +1,23 @@
+(ns quo2.components.selectors.reactions.component-spec
+  (:require [quo2.components.selectors.reactions.view :as view]
+            [test-helpers.component :as h]))
+
+(h/describe "Selectors > Reactions"
+  (h/test "renders component"
+    (h/render [view/view :reaction/sad])
+    (h/is-truthy (h/get-by-label-text :reaction)))
+
+  (h/describe "on-press event"
+    (h/test "starts with released state"
+      (let [on-press (h/mock-fn)]
+        (h/render [view/view :reaction/love {:on-press on-press}])
+        (h/fire-event :press (h/get-by-label-text :reaction))
+        (h/was-called on-press)))
+
+    (h/test "starts with pressed state"
+      (let [on-press (h/mock-fn)]
+        (h/render [view/view :reaction/love
+                   {:on-press       on-press
+                    :start-pressed? true}])
+        (h/fire-event :press (h/get-by-label-text :reaction))
+        (h/was-called on-press)))))

src/quo2/components/selectors/reactions/style.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.selectors.reactions.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [pressed?]
+  {:padding          10
+   :border-radius    12
+   :border-width     1
+   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80)
+   :background-color (when pressed?
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40))})

src/quo2/components/selectors/reactions/view.cljs

@@ -0,0 +1,25 @@
+(ns quo2.components.selectors.reactions.view
+  (:require [quo2.components.reactions.resource :as reactions.resource]
+            [quo2.components.selectors.reactions.style :as style]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(defn view
+  [_ {:keys [start-pressed?]}]
+  (let [pressed? (reagent/atom start-pressed?)]
+    (fn [emoji
+         {:keys [container-style on-press
+                 accessibility-label]
+          :or   {accessibility-label :reaction}}]
+      [rn/touchable-without-feedback
+       {:accessibility-label accessibility-label
+        :on-press            (fn [e]
+                               (swap! pressed? not)
+                               (when on-press
+                                 (on-press e)))}
+       [rn/view
+        {:style (merge (style/container @pressed?)
+                       container-style)}
+        [rn/image
+         {:source (reactions.resource/get-reaction emoji)
+          :style  {:width 20 :height 20}}]]])))

src/quo2/components/tabs/tabs.cljs

@@ -6,7 +6,8 @@
             [react-native.masked-view :as masked-view]
             [reagent.core :as reagent]
             [utils.collection :as utils.collection]
-            [utils.number :as utils.number]))
+            [utils.number :as utils.number]
+            [react-native.gesture :as gesture]))
 
 (def default-tab-size 32)
 (def unread-count-offset 3)
@@ -131,7 +132,8 @@
                style
                size
                blur?
-               override-theme]
+               override-theme
+               in-scroll-view?]
         :or   {fade-end-percentage fade-end-percentage
                fade-end?           false
                scrollable?         false
@@ -142,7 +144,9 @@
         [rn/view {:style {:margin-top (- (dec unread-count-offset))}}
          [masked-view-wrapper
           {:fade-end-percentage (get @fading :fade-end-percentage) :fade-end? fade-end?}
-          [rn/flat-list
+          [(if in-scroll-view?
+             gesture/flat-list
+             rn/flat-list)
            (merge
             (dissoc props
              :default-active

src/quo2/core.cljs

@@ -30,6 +30,7 @@
     quo2.components.drawers.permission-context.view
     quo2.components.dropdowns.dropdown
     quo2.components.header
+    quo2.components.empty-state.empty-state.view
     quo2.components.icon
     quo2.components.info.info-message
     quo2.components.info.information-box
@@ -64,6 +65,7 @@
     quo2.components.profile.profile-card.view
     quo2.components.profile.select-profile.view
     quo2.components.reactions.reaction
+    quo2.components.selectors.reactions.view
     quo2.components.record-audio.record-audio.view
     quo2.components.record-audio.soundtrack.view
     quo2.components.selectors.disclaimer.view
@@ -110,6 +112,9 @@
 (def skeleton quo2.components.loaders.skeleton/skeleton)
 (def author quo2.components.messages.author.view/author)
 
+;;;; SELECTORS
+(def reactions quo2.components.selectors.reactions.view/view)
+
 ;;;; AVATAR
 (def account-avatar quo2.components.avatars.account-avatar/account-avatar)
 (def channel-avatar quo2.components.avatars.channel-avatar/channel-avatar)
@@ -164,6 +169,9 @@
 (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
 (def permission-context quo2.components.drawers.permission-context.view/view)
 
+;;;; EMPTY STATE
+(def empty-state quo2.components.empty-state.empty-state.view/empty-state)
+
 ;;;; INPUTS
 (def input quo2.components.inputs.input.view/input)
 (def profile-input quo2.components.inputs.profile-input.view/profile-input)

src/quo2/core_spec.cljs

@@ -14,13 +14,13 @@
     [quo2.components.drawers.drawer-buttons.component-spec]
     [quo2.components.drawers.permission-context.component-spec]
     [quo2.components.inputs.input.component-spec]
-    [quo2.components.keycard.component-spec]
     [quo2.components.inputs.profile-input.component-spec]
     [quo2.components.inputs.recovery-phrase.component-spec]
     [quo2.components.inputs.title-input.component-spec]
+    [quo2.components.keycard.component-spec]
+    [quo2.components.links.link-preview.component-spec]
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
-    [quo2.components.links.link-preview.component-spec]
     [quo2.components.markdown.--tests--.text-component-spec]
     [quo2.components.notifications.notification.component-spec]
     [quo2.components.onboarding.small-option-card.component-spec]
@@ -30,6 +30,7 @@
     [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
     [quo2.components.selectors.disclaimer.component-spec]
     [quo2.components.selectors.filter.component-spec]
+    [quo2.components.selectors.reactions.component-spec]
     [quo2.components.selectors.selectors.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.--tests--.status-tags-component-spec]))

src/quo2/foundations/colors.cljs

@@ -186,44 +186,111 @@
 
 ;; Colors for customizing profiles and communities themes
 (def customization
-  {:primary   {50 primary-50 ;; User can also use primary color as customisation color
-               60 primary-60}
-   :purple    {50 "#7140FD"
-               60 "#5A33CA"}
-   :indigo    {50 "#496289"
-               60 "#3D5273"}
-   :turquoise {50 "#2A799B"
-               60 "#22617C"}
-   :blue      {50 "#2A4AF5"
-               60 "#223BC4"}
-   :green     {50 "#5BCC95"
-               60 "#4CAB7D"}
-   :yellow    {50 "#F6B03C"
-               60 "#C58D30"}
-   :orange    {50 "#FF7D46"
-               60 "#CC6438"}
-   :red       {50 "#F46666"
-               60 "#CD5656"}
-   :pink      {50 "#F66F8F"
-               60 "#C55972"}
-   :brown     {50 "#99604D"
-               60 "#805141"}
-   :sky       {50 "#1992D7"
-               60 "#1475AC"}
-   :army      {50 "#216266"
-               60 "#1A4E52"}
-   :magenta   {50 "#EC266C"
-               60 "#BD1E56"}
-   :copper    {50 "#CB6256"
-               60 "#A24E45"}
-   :camel     {50 "#C78F67"
-               60 "#9F7252"}
-   :yin       {50 "#09101C"
-               60 "#1D232E"}
-   :yang      {50 "#FFFFFF"
-               60 "#EBEBEB"}
-   :beige     {50 "#CAAE93"
-               60 "#AA927C"}})
+  {:community-color {:main-color {50 "#7140FD"
+                                  60 "#5A33CA"}
+                     }
+
+   :primary         {50 primary-50 ;; User can also use primary color as customisation color
+                     60 primary-60}
+   :purple          {50 "#7140FD"
+                     60 "#5A33CA"}
+   :indigo          {50 "#496289"
+                     60 "#3D5273"}
+   :turquoise       {50 "#2A799B"
+                     60 "#22617C"}
+   :blue            {50 "#2A4AF5"
+                     60 "#223BC4"}
+   :green           {50 "#5BCC95"
+                     60 "#4CAB7D"}
+   :yellow          {50 "#F6B03C"
+                     60 "#C58D30"}
+   :orange          {50 "#FF7D46"
+                     60 "#CC6438"}
+   :red             {50 "#F46666"
+                     60 "#CD5656"}
+   :pink            {50 "#F66F8F"
+                     60 "#C55972"}
+   :brown           {50 "#99604D"
+                     60 "#805141"}
+   :sky             {50 "#1992D7"
+                     60 "#1475AC"}
+   :army            {50 "#216266"
+                     60 "#1A4E52"}
+   :magenta         {50 "#EC266C"
+                     60 "#BD1E56"}
+   :copper          {50 "#CB6256"
+                     60 "#A24E45"}
+   :camel           {50 "#C78F67"
+                     60 "#9F7252"}
+   :yin             {50 "#09101C"
+                     60 "#1D232E"}
+   :yang            {50 "#FFFFFF"
+                     60 "#EBEBEB"}
+   :beige           {50 "#CAAE93"
+                     60 "#AA927C"}})
+
+
+;; TODO: rename
+(def customization-colors-map
+  {:primary   {:primary-color   {:light primary-50 :dark primary-60}
+               :secondary-color nil}
+   :purple    {:primary-color   {:light "#7140FD" :dark "#5A33CA"}
+               :secondary-color nil}
+   :indigo    {:primary-color   {:light "#496289" :dark "#3D5273"}
+               :secondary-color nil}
+   :turquoise {:primary-color   {:light "#2A799B" :dark "#22617C"}
+               :secondary-color nil}
+   :blue      {:primary-color   {:light "#2A4AF5" :dark "#223BC4"}
+               :secondary-color nil}
+   :green     {:primary-color   {:light "#5BCC95" :dark "#4CAB7D"}
+               :secondary-color nil}
+   :yellow    {:primary-color   {:light "#F6B03C" :dark "#C58D30"}
+               :secondary-color nil}
+   :orange    {:primary-color   {:light "#FF7D46" :dark "#CC6438"}
+               :secondary-color nil}
+   :red       {:primary-color   {:light "#F46666" :dark "#CD5656"}
+               :secondary-color nil}
+   :pink      {:primary-color   {:light "#F66F8F" :dark "#C55972"}
+               :secondary-color nil}
+   :brown     {:primary-color   {:light "#99604D" :dark "#805141"}
+               :secondary-color nil}
+   :sky       {:primary-color   {:light "#1992D7" :dark "#1475AC"}
+               :secondary-color nil}
+   :army      {:primary-color   {:light "#216266" :dark "#1A4E52"}
+               :secondary-color nil}
+   :magenta   {:primary-color   {:light "#EC266C" :dark "#BD1E56"}
+               :secondary-color nil}
+   :copper    {:primary-color   {:light "#CB6256" :dark "#A24E45"}
+               :secondary-color nil}
+   :camel     {:primary-color   {:light "#C78F67" :dark "#9F7252"}
+               :secondary-color nil}
+   :beige     {:primary-color   {:light "#CAAE93" :dark "#AA927C"}
+               :secondary-color nil}
+   ;;
+   :yin-yang  {:primary-color   {:light "#09101C" :dark "#EBEBEB"}
+               :secondary-color {:light "#FFFFFF" :dark neutral-100}}
+   ;;
+   #_#_:purple    {:light {:main "#7140FD" :secondary nil}
+               :dark  {:main "#5A33CA" :secondary nil}}
+
+   #_#_:yin-yang  {:light {:main "#09101C"
+                       :dark "#1D232E"}
+               :dark  {:main "#FFFFFF"
+                       :dark "#EBEBEB"}}
+
+   })
+
+(defn get-color [color-kw theme]
+  (get-in customization-colors-map [color-kw :primary-color theme]))
+
+
+(defn get-secondary-color [color-kw theme default-value]
+  (if-let [secondary-color (get-in customization-colors-map
+                                   [color-kw
+                                    :secondary-color
+                                    theme])]
+    secondary-color
+    default-value))
 
 (def colors-map
   (merge {:danger  {50 danger-50

src/react_native/cameraroll.cljs

@@ -0,0 +1,16 @@
+(ns react-native.cameraroll
+  (:require ["@react-native-community/cameraroll" :as CameraRoll]
+            [utils.transforms :as transforms]
+            [taoensso.timbre :as log]))
+
+(defn get-photos
+  [opts callback]
+  (-> (.getPhotos CameraRoll (clj->js opts))
+      (.then #(callback (transforms/js->clj %)))
+      (.catch #(log/warn "could not get camera roll photos" %))))
+
+(defn get-albums
+  [opts callback]
+  (-> (.getAlbums CameraRoll (clj->js opts))
+      (.then #(callback (transforms/js->clj %)))
+      (.catch #(log/warn "could not get camera roll albums" %))))

src/react_native/core.cljs

@@ -17,6 +17,7 @@
 (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)))
+(defn image-get-size [uri callback] (.getSize ^js (.-Image ^js react-native) uri callback))
 (def text (reagent/adapt-react-class (.-Text ^js react-native)))
 (def text-input (reagent/adapt-react-class (.-TextInput ^js react-native)))