Working version with example and instructions

BVLinearGradient.h

@@ -1,5 +1,6 @@
 #import <UIKit/UIKit.h>
+#import "RCTView.h"
 
-@interface BVLinearGradient : UIView
+@interface BVLinearGradient : RCTView
 
 @end

BVLinearGradient.m

@@ -1,34 +1,27 @@
 #import "BVLinearGradient.h"
+#import "RCTConvert.h"
+#import <UIKit/UIKit.h>
+#import <QuartzCore/QuartzCore.h>
 
 @implementation BVLinearGradient
+
++ (Class)layerClass
 {
-  CAGradientLayer *_layer;
+  return [CAGradientLayer class];
 }
 
-- (id)init
+- (CAGradientLayer *)gradientLayer
 {
-  if ((self = [super init])) {
-    NSArray *colors = [NSArray arrayWithObjects:
-                       (id)[UIColor whiteColor].CGColor,
-                       (id)[UIColor redColor].CGColor,
-                       nil];
-    *_layer = [CAGradientLayer _layer];
-    [_layer setColors:colors];
-    [layer setFrame:self.bounds];
-    [self.layer insertSublayer:_layer atIndex:0];
-    self.clipToBounds = YES; 
+  return (CAGradientLayer *)self.layer;
+}
+
+- (void)setColors:(NSArray *)colorStrings
+{
+  NSMutableArray *colors = [NSMutableArray arrayWithCapacity:colorStrings.count];
+  for (NSString *colorString in colorStrings) {
+    [colors addObject:[RCTConvert UIColor:colorString].CGColor];
   }
-  return self;
-}
-
-- (void)setColors:(NSArray *)colors
-{
-}
-
-- (void)layoutSubviews
-{
-  [super layoutSubviews];
-  [layer setFrame:self.bounds];
+  self.gradientLayer.colors = colors;
 }
 
 @end

BVLinearGradientManager.m

@@ -12,7 +12,7 @@
 }
 
 RCT_EXPORT_VIEW_PROPERTY(colors, NSArray);
-// Start point, end point, type
+// Start point, end point
 
 - (NSDictionary *)constantsToExport
 {

README.md

@@ -1,3 +1,60 @@
 ## react-native-linear-gradient
 
-A <LinearGradient> component for react-native, WIP, not yet ready for use.
+A `<LinearGradient>` component for react-native, as seen in
+[react-native-login](https://github.com/brentvatne/react-native-login).
+
+### Add it to your project
+
+1. Run `npm install react-native-linear-gradient --save`
+2. Open your project in XCode, right click on `Libraries` and click `Add
+   Files to "Your Project Name" [(Screenshot)](http://url.brentvatne.ca/g9Wp).
+3. Add `libBVLinearGradient.a` to `Build Phases -> Link Binary With Libraries`
+   [(Screenshot)](http://url.brentvatne.ca/g9Wp).
+4. Click on `BVLinearGradient.xcodeproj` in `Libraries` and go the `Build
+   Phases` tab. Double click the text to the right of `Header Search
+   Paths` and verify that it has `$(SRCROOT)../react-native/React` - if it
+   isn't, then add it. This is so XCode is able to find the headers that
+   the `BVLinearGradient` source files are referring to by pointing to the
+   header files installed within the `react-native` `node_modules`
+   directory. [(Screenshot)](http://url.brentvatne.ca/7wE0).
+5. Whenever you want to use it within React code now you can: `var LinearGradient =
+   require('react-native-linear-gradient');`
+
+## Example
+
+The following code will produce something like this:
+
+![https://raw.githubusercontent.com/brentvatne/react-native-linear-gradient/master/example.png]
+
+```javascript
+// Within your render function
+<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
+  <Text style={styles.buttonText}>
+    Sign in with Facebook
+  </Text>
+</LinearGradient>
+
+// Later on in your styles..
+var styles = StyleSheet.create({
+  linearGradient: {
+    flex: 1,
+    paddingLeft: 15,
+    paddingRight: 15,
+    borderRadius: 5
+  },
+  buttonText: {
+    fontSize: 18,
+    fontFamily: 'Gill Sans',
+    textAlign: 'center',
+    margin: 10,
+    color: '#ffffff',
+  },
+});
+```
+
+See the example in context [here](https://github.com/brentvatne/react-native-login/blob/master/index.ios.js).
+
+## TODOS
+
+- [ ] Support start/end points, angles
+- [ ] Radial gradient

package.json

@@ -1,9 +1,13 @@
 {
   "name": "react-native-linear-gradient",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A <LinearGradient> element for react-native",
   "main": "LinearGradient.ios.js",
-  "author": "Brent Vatne <brentvatne@gmail.com> (https://github.com/brentvatne)",
+  "author": {
+    "name": "Brent Vatne",
+    "email": "brentvatne@gmail.com",
+    "url": "https://github.com/brentvatne"
+  },
   "dependencies": {
     "react-native": "^0.3.1"
   },