Merge pull request #176 from status-im/bug/accounts-list-scroll

attempt to fix scroll in account's list

Former-commit-id: 398ce6927e

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 #()}}]
-     [view st/accounts-container
-      [view st/account-list-view-container
+                                   :handler #()}
+                :style            st/toolbar}]
       [list-view {:dataSource            (lw/to-datasource accounts)
                   :enableEmptySections   true
                   :renderRow             render-row
-                   ;:renderSeparator     render-separator
-                   :style               st/account-list}]]]
+                  :style                 st/account-list
+                  :contentContainerStyle (st/account-list-content (count accounts))}]
       [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
          [image {:source {:uri :icon_add}
                  :style  st/icon-plus}]
-        [text {:style st/add-account-text} (label :t/add-account)]]]]]))
-
-;(re-frame.core/dispatch [:set :view-id :users])
+         [text {:style st/add-account-text} (label :t/add-account)]]]]]]))

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
@@ -14,30 +15,20 @@
 (def gradient-background
   {:position       :absolute
    :top            0
-   :right    0
-   :bottom   0
-   :left     0})
-
-(def account-list-container1
-  {:position :absolute
-   :top 56
-   :right 0
    :bottom         0
    :left           0
-   :justifyContent :center})
+   :right          0
+   :padding-bottom 84})
 
-(def accounts-container
-  {:flex           1
-   :flex-direction :column
-   :justifyContent :center
-   :padding-bottom 56})
-
-(def account-list-view-container
-  {:flexDirection :column
-   :justifyContent :center})
+(defn account-list-content [cnt]
+  (merge {:justifyContent :center}
+         ;; todo this will not work with landscape and looks bad
+         (when (< (* 69 (+ 2 cnt)) (:height (r/get-dimensions "window")))
+           {:flex 1})))
 
 (def account-list
-  {})
+  {:margin-top 56
+   :height     100})
 
 (def row-separator
   {:borderBottomWidth 1
@@ -112,3 +103,9 @@
    :color         :white
    :fontSize      16
    :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"))
-(defn linear-gradient [props]
-  (r/create-element linear-gradient-class
-                    (clj->js (merge {:inverted true} props))))
+(def linear-gradient-class
+  (r/adapt-react-class (u/require "react-native-linear-gradient")))
+(defn linear-gradient
+  [props & children]
+  (vec (concat [linear-gradient-class (merge {:inverted true} props)] children)))
 
 
 (def platform