Add support for start, end, and locations

BVLinearGradient.m

@@ -24,4 +24,19 @@
   self.gradientLayer.colors = colors;
 }
 
+- (void)setStart:(NSArray *)start
+{
+  self.gradientLayer.startPoint = [RCTConvert CGPoint:start];
+}
+
+- (void)setEnd:(NSArray *)end
+{
+  self.gradientLayer.endPoint = [RCTConvert CGPoint:end];
+}
+
+- (void)setLocations:(NSArray *)locations
+{
+  self.gradientLayer.locations = locations;
+}
+
 @end

BVLinearGradientManager.m

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

LinearGradient.ios.js

@@ -11,6 +11,9 @@ var merge = require('merge');
 var LinearGradient = React.createClass({
   propTypes: {
     colors: PropTypes.array,
+    start: PropTypes.array,
+    end: PropTypes.array,
+    locations: PropTypes.array,
   },
 
   mixins: [NativeMethodsMixin],
@@ -22,7 +25,6 @@ var LinearGradient = React.createClass({
 
   render: function() {
     var style = flattenStyle([styles.base, this.props.style]);
-    var colors = this.props.colors;
 
     var nativeProps = merge(this.props, {
       style,
@@ -33,7 +35,7 @@ var LinearGradient = React.createClass({
 });
 
 var BVLinearGradient = createReactIOSNativeComponentClass({
-  validAttributes: merge(ReactIOSViewAttributes.UIView, {colors: true}),
+  validAttributes: merge(ReactIOSViewAttributes.UIView, {colors: true, start: true, end: true, locations: true}),
   uiViewClassName: 'BVLinearGradient',
 });
 

README.md

@@ -52,9 +52,27 @@ var styles = StyleSheet.create({
 });
 ```
 
-See the example in context [here](https://github.com/brentvatne/react-native-login/blob/master/index.ios.js).
+You can also use start and end points, as well as specify the locations
+for the gradient color changes with the `start`, `end` and `locations`
+props:
+
+```javascript
+<LinearGradient
+  start={[0,0.25]} end={[0.5,1]}
+  locations={[0,0.5,0.6]}
+  colors={['#4c669f', '#3b5998', '#192f6a']}
+  style={styles.linearGradient}>
+  <Text style={styles.buttonText}>
+    Sign in with Facebook
+  </Text>
+</LinearGradient>
+```
+
+![Example with extra props](https://raw.githubusercontent.com/brentvatne/react-native-linear-gradient/master/example.png)
+
+### An example app
+You can see this component in action in [brentvatne/react-native-login](https://github.com/brentvatne/react-native-login/blob/master/index.ios.js).
 
 ## TODOS
 
-- [ ] Support start/end points, angles
-- [ ] Radial gradient
+- [ ] Radial gradient?

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-linear-gradient",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A <LinearGradient> element for react-native",
   "main": "LinearGradient.ios.js",
   "author": {