add gradient

Former-commit-id: 799808965d

.re-natal

@@ -14,7 +14,8 @@
     "react-native-vector-icons/Ionicons",
     "react-native-circle-checkbox",
     "react-native-randombytes",
-    "dismissKeyboard"
+    "dismissKeyboard",
+    "react-native-linear-gradient"
   ],
   "imageDirs": [
     "images"

android/app/build.gradle

@@ -128,6 +128,7 @@ dependencies {
     compile "com.facebook.react:react-native:+"  // From node_modules
     compile project(':react-native-contacts')
     compile project(':react-native-i18n')
+    compile project(':react-native-linear-gradient')
 //    compile(name:'geth', ext:'aar')
     compile(group: 'status-im', name: 'android-geth', version: '1.4.0-201604110816-a97a114', ext: 'aar')
 

android/app/src/main/java/com/syngim/MainActivity.java

@@ -10,6 +10,7 @@ import android.os.Bundle;
 import android.os.Environment;
 import com.github.ethereum.go_ethereum.cmd.Geth;
 import com.bitgo.randombytes.RandomBytesPackage;
+import com.BV.LinearGradient.LinearGradientPackage;
 
 import java.util.Arrays;
 import java.util.List;
@@ -78,7 +79,8 @@ public class MainActivity extends ReactActivity {
                 new VectorIconsPackage(),
                 new ReactNativeContacts(),
                 new ReactNativeI18n(),
-                new RandomBytesPackage()
+                new RandomBytesPackage(),
+                new LinearGradientPackage()
         );
     }
 }

android/settings.gradle

@@ -13,4 +13,6 @@ project(':react-native-vector-icons').projectDir = new File(rootProject.projectD
 include ':realm'
 project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
 include ':randombytes'
-project(':randombytes').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-randombytes/app')
+project(':randombytes').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-randombytes/app')
+include ':react-native-linear-gradient'
+project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')

package.json

@@ -14,6 +14,7 @@
     "react-native-contacts": "^0.2.4",
     "react-native-i18n": "0.0.8",
     "react-native-invertible-scroll-view": "^1.0.0",
+    "react-native-linear-gradient": "^1.5.7",
     "react-native-loading-spinner-overlay": "0.0.8",
     "react-native-randombytes": "^2.0.0",
     "react-native-vector-icons": "^1.3.4",

src/syng_im/components/react.cljs

@@ -36,6 +36,15 @@
   [image {:source {:uri (keyword (str "icon_" (name n)))}
           :style  style}])
 
+;(def react-linear-gradient (.-default (js/require "react-native-linear-gradient")))
+;(def linear-gradient (r/adapt-react-class react-linear-gradient))
+
+(set! js/window.LinearGradient (js/require "react-native-linear-gradient"))
+(defn linear-gradient [props]
+  (js/React.createElement js/LinearGradient
+                          (clj->js (merge {:inverted true} props))))
+
+
 (def platform (.. js/React -Platform -OS))
 
 (def android? (= platform "android"))

src/syng_im/components/tabs/styles.cljs

@@ -13,18 +13,24 @@
 (def tab-height 56)
 
 (def tabs
+  {:flex 1
+   :position       :absolute
+   :bottom         0
+   :right          0
+   :left           0
+   })
+
+(def top-gradient
+  {:flexDirection :row
+   :height        3})
+
+(def tabs-container
   {:flexDirection   :row
-   :position        :absolute
-   :bottom          0
-   :right           0
-   :left            0
    :height          tab-height
    :opacity         1
    :backgroundColor :white
-   :justifyContent  :center
-   :alignItems      :center
-   :borderTopColor  "#1c18354c"
-   :borderTopWidth  1})
+   :justifyContent :center
+   :alignItems     :center})
 
 (def tab
   {:flex           1
@@ -46,4 +52,5 @@
   {:flex           1
    :height         tab-height
    :justifyContent :center
-   :alignItems     :center})
+   :alignItems     :center})
+

src/syng_im/components/tabs/tabs.cljs

@@ -5,7 +5,8 @@
                                               text-input
                                               text
                                               image
-                                              touchable-highlight]]
+                                              touchable-highlight
+                                              linear-gradient]]
             [reagent.core :as r]
             [syng-im.components.tabs.styles :as st]
             [syng-im.components.tabs.tab :refer [tab]]))
@@ -19,4 +20,7 @@
 (defview tabs [{:keys [style tab-list selected-index]}]
   (let [style (merge st/tabs style)]
     [view {:style style}
-     (doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))]))
+     [linear-gradient {:colors [ "rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
+                       :style st/top-gradient}]
+     [view st/tabs-container
+      (doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))]]))