Skip to content

Commit df784de

Browse files
committedFeb 4, 2020
Add useAngle and angle prop support (fix #10)
1 parent f3e0524 commit df784de

File tree

4 files changed

+15
-2
lines changed

4 files changed

+15
-2
lines changed
 

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ resolve: {
1919
## Usage
2020
See [react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient).
2121

22+
Note that `angleCenter` prop is not supported.
23+
2224
## Examples
2325
See the [storybook](https://react-native-web-community.github.io/react-native-web-linear-gradient/storybook).
2426

‎docs/stories/gradientBackground.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import React from 'react';
2-
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
2+
import { StyleSheet } from 'react-native';
33
import LinearGradient from 'react-native-linear-gradient';
44

55
export const basic = () => <LinearGradient colors={['red', 'blue']} style={styles.page} />;
66

77
export const withAngle = () => (
8+
<LinearGradient useAngle angle={135} colors={['red', 'blue']} style={styles.page} />
9+
);
10+
11+
export const withLegacyAngle = () => (
812
<LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} colors={['red', 'blue']} style={styles.page} />
913
);
1014

‎docs/stories/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { storiesOf } from '@storybook/react';
66

77
storiesOf('Gradient background', module)
88
.add('basic', gradientBackground.basic)
9-
.add('with an angle', gradientBackground.withAngle);
9+
.add('with an angle', gradientBackground.withAngle)
10+
.add('with an angle (legacy)', gradientBackground.withLegacyAngle);
1011

1112
storiesOf('Sign in with Facebook', module)
1213
.add('basic', signInWithFacebook.basic)

‎src/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export default class LinearGradient extends PureComponent {
1313
},
1414
locations: [],
1515
colors: [],
16+
useAngle: false,
17+
angle: 0,
1618
};
1719

1820
state = {
@@ -27,6 +29,10 @@ export default class LinearGradient extends PureComponent {
2729
});
2830

2931
getAngle = () => {
32+
if (this.props.useAngle) {
33+
return this.props.angle + 'deg';
34+
}
35+
3036
// Math.atan2 handles Infinity
3137
const angle =
3238
Math.atan2(

0 commit comments

Comments
 (0)