RN v0.12

README.md

@@ -45,13 +45,8 @@ Now run `pod install`. This will create an Xcode workspace containing all necess
 ### Android
 1. Add the following snippet to your `android/settings.gradle`:
   ```gradle
-  // resolve the symbolic link if any
-  def resolve(File dir) {
-    dir.toPath().toAbsolutePath().toFile()
-  }
-
   include ':RNMaterialKit'
-  project(':RNMaterialKit').projectDir = resolve file('../node_modules/react-native-material-kit/android')
+  project(':RNMaterialKit').projectDir = file('../node_modules/react-native-material-kit/android')
   ```
 1. Add `compile project(':RNMaterialKit')` to your `android/app/build.gradle`
 1. Add `ReactMaterialKitPackage` to your `ReactInstanceManager` instance, in your `MainActivity`:

android/build.gradle

@@ -33,6 +33,6 @@ repositories {
 }
 
 dependencies {
-    provided 'com.facebook.react:react-native:0.11.+'
+    provided 'com.facebook.react:react-native:0.12.+'
     //compile 'com.android.support:design:23.0.1'
 }

android/src/main/java/com/github/xinthink/rnmk/MKSpinnerManager.java

@@ -1,7 +1,6 @@
 package com.github.xinthink.rnmk;
 
 import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.uimanager.CSSColorUtil;
 import com.facebook.react.uimanager.CatalystStylesDiffMap;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
@@ -56,7 +55,7 @@ public void updateView(MKSpinner spinner, CatalystStylesDiffMap props) {
 
                 for (int i = 0; i < colors.size(); i++) {
                     if (!colors.isNull(i)) {
-                        colorScheme[i] = CSSColorUtil.getColor(colors.getString(i));
+                        colorScheme[i] = colors.getInt(i);
                     }
                 }
 

lib/mdl/Spinner.android.js

@@ -20,6 +20,7 @@ const {
 
 const MKColor = require('../MKColor');
 const {getTheme} = require('../theme');
+const utils = require('../utils');
 
 // default stroke color scheme
 const DEF_STROKE_COLORS = [
@@ -60,7 +61,8 @@ const NativeSpinner = requireNativeComponent('MKSpinner', {
 //
 class Spinner extends Component {
   render() {
-    const strokeColors = this.props.strokeColor;
+    // FIXME color has to be an int since RN v0.12, https://github.com/facebook/react-native/issues/3300
+    const strokeColors = utils.parseColor(this.props.strokeColor);
     const props = Object.assign({}, this.props, {
       strokeColors: Array.isArray(strokeColors) ? strokeColors : [strokeColors],
     });

lib/mdl/Textfield.js

@@ -67,7 +67,10 @@ class FloatingLabel extends Component {
   }
 
   setColor(color) {
-    this.refs.label.setNativeProps({color});
+    // FIXME color has to be an int since RN v0.12, https://github.com/facebook/react-native/issues/3300
+    this.refs.label.setNativeProps({color: utils.parseColor(color)});
+    // use this with RN before 0.12
+    // this.refs.label.setNativeProps({color});
   }
 
   aniFloatLabel() {
@@ -116,7 +119,6 @@ class FloatingLabel extends Component {
             position: 'absolute',
             top: this.labelState.top,
             opacity: this.labelState.opacity,
-            color: this.props.tintColor,
             marginBottom: this.props.floatingLabelBottomMargin,
           },
           this.props.floatingLabelFont,
@@ -141,6 +143,7 @@ FloatingLabel.publicPropTypes = {
   floatingLabelBottomMargin: PropTypes.number,
 
   // [Font](MKPropTypes.html#font) of floating label
+  // FIXME causing warning: `typeChecker is not a function`
   floatingLabelFont: MKPropTypes.font,
 };
 

lib/utils.js

@@ -9,6 +9,9 @@ const {
   Platform,
 } = require('react-native');
 
+const tinycolor = require('tinycolor2');
+
+
 // Add some is-Type methods:
 // `isArguments`, `isFunction`, `isString`, `isNumber`, `isDate`, `isRegExp`, `isError`.
 ['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp', 'Error'].forEach((name) => {
@@ -67,6 +70,27 @@ function extractTouchableProps(view) {
   return extractProps(view, TouchableWithoutFeedback.propTypes);
 }
 
+// Parse stringified color as int
+function parseColor(color) {
+  if (!color || typeof color === 'number') {
+    return color;
+  } else if (color instanceof Array) {
+    return color.map(parseColor);
+  } else {
+    var hexString = tinycolor(color).toHex8();
+    var colorInt = parseInt(hexString, 16);
+    if (Platform.OS === 'android') {
+      // Android use 32 bit *signed* integer to represent the color
+      // We utilize the fact that bitwise operations in JS also operates on
+      // signed 32 bit integers, so that we can use those to convert from
+      // *unsiged* to *signed* 32bit int that way.
+      colorInt = colorInt | 0x0;
+    }
+    return colorInt;
+  }
+}
+
+
 // ## Public interface
 exports.mergeIntoFast = mergeIntoFast;
 exports.toPixels = toPixels;
@@ -75,3 +99,4 @@ exports.convertCoordinate = convertCoordinate;
 exports.getFontSize = getFontSize;
 exports.extractProps = extractProps;
 exports.extractTouchableProps = extractTouchableProps;
+exports.parseColor = parseColor;

package.json

@@ -26,13 +26,16 @@
     "url": "git://github.com/xinthink/react-native-material-kit.git"
   },
   "peerDependencies": {
-    "react-native": ">=0.8.0 <1.0.0"
+    "react-native": ">=0.12.0 <1.0.0"
   },
   "devDependencies": {
     "babel-eslint": "^4.0.10",
     "eslint": "^1.1.0",
     "eslint-plugin-react": "^3.2.3",
     "gulp": "^3.9.0",
     "gulp-docco": "0.0.4"
+  },
+  "dependencies": {
+    "tinycolor2": "^1.1.2"
   }
 }