attempt to fix scroll in account's list

Former-commit-id: d16ded0a90a702141cca376ef566c2ef232872d3

src/status_im/accounts/screen.cljs

@@ -2,6 +2,7 @@
   (:require-macros [status-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [status-im.components.react :refer [view
+                                                scroll-view
                                                 text
                                                 list-view
                                                 list-item
@@ -55,26 +56,24 @@
                        :start     [0, 0]
                        :end       [0.5, 1]
                        :locations [0, 0.8, 1]
-                       :style     st/gradient-background}]
+                       :style     st/gradient-background}
       [toolbar {:background-color :transparent
                 :nav-action       {:image   {:source (if show-back? {:uri :icon_back_white} nil)
                                              :style  icon-back}
                                    :handler (if show-back? #(dispatch [:navigate-back]) nil)}
                 :custom-content   toolbar-title
                 :action           {:image   {:style icon-search}
-                                  :handler #()}}]
+                                   :handler #()}
-     [view st/accounts-container
+                :style            st/toolbar}]
-      [view st/account-list-view-container
+      [list-view {:dataSource            (lw/to-datasource accounts)
-       [list-view {:dataSource          (lw/to-datasource accounts)
+                  :enableEmptySections   true
-                   :enableEmptySections true
+                  :renderRow             render-row
-                   :renderRow           render-row
+                  :style                 st/account-list
-                   ;:renderSeparator     render-separator
+                  :contentContainerStyle (st/account-list-content (count accounts))}]
-                   :style               st/account-list}]]]
+      [view st/add-account-button-container
-     [view st/add-account-button-container
+       [touchable-highlight {:on-press            create-account
-      [touchable-highlight {:on-press create-account}
+                             :accessibility-label :create-account}
-       [view st/add-account-button
+        [view st/add-account-button
-        [image {:source {:uri :icon_add}
+         [image {:source {:uri :icon_add}
-                :style  st/icon-plus}]
+                 :style  st/icon-plus}]
-        [text {:style st/add-account-text} (label :t/add-account)]]]]]))
+         [text {:style st/add-account-text} (label :t/add-account)]]]]]]))
-
-;(re-frame.core/dispatch [:set :view-id :users])

src/status_im/accounts/styles.cljs

@@ -4,7 +4,8 @@
                                                  text1-color
                                                  color-white
                                                  toolbar-background2
-                                                 online-color]]))
+                                                 online-color]]
+            [status-im.components.react :as r]))
 
 
 (def screen-container
@@ -12,59 +13,49 @@
    :color :white})
 
 (def gradient-background
-  {:position :absolute
+  {:position       :absolute
-   :top      0
+   :top            0
-   :right    0
+   :bottom         0
-   :bottom   0
+   :left           0
-   :left     0})
+   :right          0
+   :padding-bottom 84})
 
-(def account-list-container1
+(defn account-list-content [cnt]
-  {:position :absolute
+  (merge {:justifyContent :center}
-   :top 56
+         ;; todo this will not work with landscape and looks bad
-   :right 0
+         (when (< (* 69 (+ 2 cnt)) (:height (r/get-dimensions "window")))
-   :bottom 0
+           {:flex 1})))
-   :left 0
-   :justifyContent :center})
-
-(def accounts-container
-  {:flex           1
-   :flex-direction :column
-   :justifyContent :center
-   :padding-bottom 56})
-
-(def account-list-view-container
-  {:flexDirection :column
-   :justifyContent :center})
 
 (def account-list
-  {})
+  {:margin-top 56
+   :height     100})
 
 (def row-separator
   {:borderBottomWidth 1
    :borderBottomColor "#bababa"})
 
 (def account-container
-  {:flex 1
+  {:flex            1
-   :flexDirection :row
+   :flexDirection   :row
-   :height 69
+   :height          69
    :backgroundColor "rgba(255, 255, 255, 0.1)"
-   :alignItems     :center
+   :alignItems      :center
-   :justifyContent :center})
+   :justifyContent  :center})
 
 (def photo-container
-  {:flex 0.2
+  {:flex           0.2
-   :flexDirection :column
+   :flexDirection  :column
    :alignItems     :center
    :justifyContent :center})
 
 (def account-photo-container
-  {:flex 1
+  {:flex            1
    :backgroundColor "rgba(255, 255, 255, 0.2)"
-   :borderRadius 50
+   :borderRadius    50
-   :width 36
+   :width           36
-   :height 36
+   :height          36
-   :alignItems     :center
+   :alignItems      :center
-   :justifyContent :center})
+   :justifyContent  :center})
 
 (def photo-image
   {:borderRadius 50
@@ -72,43 +63,49 @@
    :height       36})
 
 (def name-container
-  {:flex 1
+  {:flex          1
    :flexDirection :column})
 
 (def name-text
-  {:color color-white
+  {:color    color-white
    :fontSize 16})
 
 (def address-text
-  {:color color-white
+  {:color    color-white
    :fontSize 12})
 
 (def online-container
-  {:flex 0.2
+  {:flex           0.2
-   :flexDirection :column
+   :flexDirection  :column
    :alignItems     :center
    :justifyContent :center})
 
 (def add-account-button-container
-  {:position :absolute
+  {:position       :absolute
-   :bottom 16
+   :bottom         16
-   :height 50
+   :height         50
-   :left 100
+   :left           100
-   :right 100
+   :right          100
-    :justifyContent :center
+   :justifyContent :center
-   :alignItems :center})
+   :alignItems     :center})
 
 (def add-account-button
   {:flexDirection :row})
 
 (def icon-plus
   {:flexDirection :column
-   :paddingTop 2
+   :paddingTop    2
-   :width 20
+   :width         20
-   :height 20})
+   :height        20})
 
 (def add-account-text
   {:flexDirection :column
-   :color :white
+   :color         :white
-   :fontSize 16
+   :fontSize      16
-   :marginLeft 8})
+   :marginLeft    8})
+
+(def toolbar
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0})

src/status_im/components/react.cljs

@@ -67,10 +67,11 @@
    [image {:source {:uri (keyword (str "icon_" (name n)))}
            :style  style}]))
 
-(def linear-gradient-class (u/require "react-native-linear-gradient"))
+(def linear-gradient-class
-(defn linear-gradient [props]
+  (r/adapt-react-class (u/require "react-native-linear-gradient")))
-  (r/create-element linear-gradient-class
+(defn linear-gradient
-                    (clj->js (merge {:inverted true} props))))
+  [props & children]
+  (vec (concat [linear-gradient-class (merge {:inverted true} props)] children)))
 
 
 (def platform