diff --git a/BVLinearGradient.h b/BVLinearGradient.h index d8edf4d..afde761 100644 --- a/BVLinearGradient.h +++ b/BVLinearGradient.h @@ -1,5 +1,6 @@ #import +#import "RCTView.h" -@interface BVLinearGradient : UIView +@interface BVLinearGradient : RCTView @end diff --git a/BVLinearGradient.m b/BVLinearGradient.m index a028aea..de37595 100644 --- a/BVLinearGradient.m +++ b/BVLinearGradient.m @@ -1,34 +1,27 @@ #import "BVLinearGradient.h" +#import "RCTConvert.h" +#import +#import @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 diff --git a/BVLinearGradientManager.m b/BVLinearGradientManager.m index d897030..dfe10a0 100644 --- a/BVLinearGradientManager.m +++ b/BVLinearGradientManager.m @@ -12,7 +12,7 @@ } RCT_EXPORT_VIEW_PROPERTY(colors, NSArray); -// Start point, end point, type +// Start point, end point - (NSDictionary *)constantsToExport { diff --git a/README.md b/README.md index 44822e7..698fd67 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,60 @@ ## react-native-linear-gradient -A component for react-native, WIP, not yet ready for use. +A `` 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 + + + Sign in with Facebook + + + +// 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 diff --git a/example.png b/example.png new file mode 100644 index 0000000..e135c1b Binary files /dev/null and b/example.png differ diff --git a/package.json b/package.json index 56d8e7e..5886f93 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,13 @@ { "name": "react-native-linear-gradient", - "version": "0.1.0", + "version": "0.1.1", "description": "A element for react-native", "main": "LinearGradient.ios.js", - "author": "Brent Vatne (https://github.com/brentvatne)", + "author": { + "name": "Brent Vatne", + "email": "brentvatne@gmail.com", + "url": "https://github.com/brentvatne" + }, "dependencies": { "react-native": "^0.3.1" },