Merge pull request #47 from abrahambotros/process-color

Transform any color strings with processColor, use color numbers internally

.gitignore

@@ -0,0 +1,53 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
+
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots

android/src/main/java/com/react/rnspinkit/RNSpinkit.java

@@ -62,7 +62,7 @@ public void setIsVisible(RNSpinkitView view, @Nullable Boolean visible) {
     }
 
     @ReactProp(name = "color")
-    public void setColor(RNSpinkitView view, @Nullable String color) {
+    public void setColor(RNSpinkitView view, @Nullable int color) {
         view.setSpriteColor(color);
     }
 

android/src/main/java/com/react/rnspinkit/RNSpinkitView.java

@@ -35,9 +35,9 @@ public RNSpinkitView(Context context) {
         super(context);
     }
 
-    public void setSpriteColor(String color) {
+    public void setSpriteColor(int color) {
         try {
-            mColor = Color.parseColor(color);
+            mColor = color;
             this.mSprite.setColor(mColor);
             this.setIndeterminateDrawable(mSprite);
         } catch(Exception err) {

index.js

@@ -2,8 +2,9 @@ import React, {PropTypes} from 'react'
 import ReactNative from 'react-native'
 
 var {
-	requireNativeComponent,
 	NativeModules,
+	processColor,
+	requireNativeComponent,
 	View
 } = ReactNative;
 
@@ -13,7 +14,15 @@ class Spinkit extends React.Component {
 
 	static propTypes = {
 		type: React.PropTypes.string,
-		color: React.PropTypes.string,
+		/**
+		 * @prop color
+		 * @NOTE This is typically passed as a string, but technically can also be
+		 *	a number (see https://facebook.github.io/react/docs/typechecking-with-proptypes.html).
+		 *	In addition, allowing a number prop type eliminates the PropType warning
+		 *	React Native will throw if passing a string into this component but a
+		 *	different type (number) down to the native module.
+		 */
+		color: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
 		size: React.PropTypes.number,
 		isVisible: React.PropTypes.bool,
 		testID:React.PropTypes.string,
@@ -32,14 +41,22 @@ class Spinkit extends React.Component {
 	};
 
 	render() {
+		if (!this.props.isVisible) return <View/>;
+
 		var size = {height: this.props.size, width: this.props.size};
 
-		if (!this.props.isVisible) return <View/>;
+		// In order to handle all the color specifications allowed in React Native
+		// as a whole, we need to call processColor here, and can pass in the
+		// resulting number directly. RCTConvert will be called on iOS to parse
+		// into #AARRGGBB form; on Android, this int can be used directly for
+		// setting the color.
+		var colorNumber = processColor(this.props.color);
+
 		return (
 			<RNSpinkit
 				type={String(this.props.type)}
 				size={parseInt(this.props.size)}
-				color={this.props.color}
+				color={colorNumber}
 				style={[size, this.props.style]}/>
 		);
 	}

ios/RNSpinkit.m

@@ -7,7 +7,7 @@ @implementation RNSpinkit
 {
    RTSpinKitView *_spinner;
    NSString *_type;
-   NSString *_color;
+   UIColor *_color;
    NSNumber *_size;
 }
 
@@ -37,16 +37,15 @@ - (NSString*)type {
    return _type;
 }
 
-- (void)setColor:(NSString*)color
+- (void)setColor:(NSNumber*)color
 {
-   _color = color;
+   _color = [RCTConvert UIColor:color];
    if (_spinner) {
-      UIColor *color = [self getColorFromString:_color];
-      [_spinner setColor:color];
+      [_spinner setColor:_color];
    }
 }
 
-- (NSString*)color {
+- (UIColor*)color {
    return _color;
 }
 
@@ -87,29 +86,14 @@ - (RTSpinKitViewStyle)getStyleFromString:(NSString*)type
    return style;
 }
 
-- (UIColor*)getColorFromString:(NSString*)color
-{
-   unsigned rgbValue = 0;
-   NSScanner *scanner = [NSScanner scannerWithString:color];
-   [scanner setScanLocation:1]; // bypass '#' character
-   [scanner scanHexInt:&rgbValue];
-
-   if (color.length == @"#00000000".length) {
-      return [UIColor colorWithRed:((rgbValue & 0xFF000000) >> 24)/255.0 green:((rgbValue & 0xFF0000) >> 16)/255.0 blue:((rgbValue & 0xFF00) >> 8)/255.0 alpha:(rgbValue & 0xFF)/255.0];
-   }
-
-   return [UIColor colorWithRed:((rgbValue & 0xFF0000) >> 16)/255.0 green:((rgbValue & 0xFF00) >> 8)/255.0 blue:(rgbValue & 0xFF)/255.0 alpha:1.0];
-}
-
 #pragma mark - React View Management
 
 - (void)layoutSubviews
 {
    [super layoutSubviews];
    if (_spinner == nil) {
-      UIColor *color = [self getColorFromString:_color];
       RTSpinKitViewStyle style = [self getStyleFromString:_type];
-      _spinner = [[RTSpinKitView alloc] initWithStyle:style color:color spinnerSize:[_size floatValue]];
+      _spinner = [[RTSpinKitView alloc] initWithStyle:style color:_color spinnerSize:[_size floatValue]];
       [self insertSubview:_spinner atIndex:0];
    }
 }

ios/RNSpinkitManager.m

@@ -18,6 +18,6 @@ - (UIView *)view
 
 RCT_EXPORT_VIEW_PROPERTY(type, NSString);
 RCT_EXPORT_VIEW_PROPERTY(size, NSNumber);
-RCT_EXPORT_VIEW_PROPERTY(color, NSString);
+RCT_EXPORT_VIEW_PROPERTY(color, NSNumber);
 
-@end
+@end