Support start/end/locations props

Author: Minishlink

docs/.storybook/decorator-centered.js

@@ -7,7 +7,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: '100vh',
-  }
+  },
 });
 
 export default function(renderStory) {

docs/stories/gradientBackground.js

@@ -2,21 +2,14 @@ import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
-export default () => (
-  <LinearGradient start={{ x: 0.5, y: 1 }} end={{ x: 0.5, y: 0 }} colors={['red', 'blue']} style={styles.page}>
-    <Text style={styles.buttonText}>Hello !</Text>
-  </LinearGradient>
+export const basic = () => <LinearGradient colors={['red', 'blue']} style={styles.page} />;
+
+export const withAngle = () => (
+  <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} colors={['red', 'blue']} style={styles.page} />
 );
 
 const styles = StyleSheet.create({
   page: {
     flex: 1,
-    justifyContent: 'center',
-  },
-  buttonText: {
-    fontSize: 18,
-    textAlign: 'center',
-    color: '#ffffff',
-    backgroundColor: 'transparent',
   },
 });

docs/stories/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import LinearGradient from 'react-native-linear-gradient';
-import { View } from 'react-native';
-import signInWithFacebook from './signInWithFacebook';
-import gradientBackground from './gradientBackground';
+import * as signInWithFacebook from './signInWithFacebook';
+import * as gradientBackground from './gradientBackground';
 
 import { storiesOf } from '@storybook/react';
 
-storiesOf('LinearGradient', module)
-.add('signInWithFacebook', signInWithFacebook)
-.add('gradientBackground', gradientBackground);
+storiesOf('Gradient background', module)
+  .add('basic', gradientBackground.basic)
+  .add('with an angle', gradientBackground.withAngle);
+
+storiesOf('Sign in with Facebook', module)
+  .add('basic', signInWithFacebook.basic)
+  .add('with start, end, locations', signInWithFacebook.withStartEndLocations);

docs/stories/signInWithFacebook.js

@@ -2,14 +2,28 @@ import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
-export default () => (
+export const basic = () => (
   <TouchableOpacity>
     <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
       <Text style={styles.buttonText}>Sign in with Facebook</Text>
     </LinearGradient>
   </TouchableOpacity>
 );
 
+export const withStartEndLocations = () => (
+  <TouchableOpacity>
+    <LinearGradient
+      start={{ x: 0.0, y: 0.25 }}
+      end={{ x: 0.5, y: 1.0 }}
+      locations={[0, 0.5, 0.6]}
+      colors={['#4c669f', '#3b5998', '#192f6a']}
+      style={styles.linearGradient}
+    >
+      <Text style={styles.buttonText}>Sign in with Facebook</Text>
+    </LinearGradient>
+  </TouchableOpacity>
+);
+
 const styles = StyleSheet.create({
   linearGradient: {
     paddingLeft: 15,

src/index.js

@@ -1,13 +1,69 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-export default props => {
-  return (
-    <View style={[styles.container, props.style, { backgroundImage: `linear-gradient(to top, ${props.colors.join(',')})` }]}>
-      {props.children}
-    </View>
-  );
-};
+export default class LinearGradient extends PureComponent {
+  static defaultProps = {
+    start: {
+      x: 0.5,
+      y: 0,
+    },
+    end: {
+      x: 0.5,
+      y: 1,
+    },
+    locations: [],
+    colors: [],
+  };
+
+  state = {
+    width: 1,
+    height: 1,
+  };
+
+  measure = ({ nativeEvent }) =>
+    this.setState({
+      width: nativeEvent.layout.width,
+      height: nativeEvent.layout.height,
+    });
+
+  getAngle = () => {
+    // Math.atan2 handles Infinity
+    const angle =
+      Math.atan2(
+        this.state.width * (this.props.end.y - this.props.start.y),
+        this.state.height * (this.props.end.x - this.props.start.x)
+      ) +
+      Math.PI / 2;
+    return angle + 'rad';
+  };
+
+  getColors = () =>
+    this.props.colors
+      .map((color, index) => {
+        const location = this.props.locations[index];
+        let locationStyle = '';
+        if (location) {
+          locationStyle = ' ' + location * 100 + '%';
+        }
+        return color + locationStyle;
+      })
+      .join(',');
+
+  render() {
+    return (
+      <View
+        style={[
+          styles.container,
+          this.props.style,
+          { backgroundImage: `linear-gradient(${this.getAngle()},${this.getColors()})` },
+        ]}
+        onLayout={this.measure}
+      >
+        {this.props.children}
+      </View>
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   container: {