@amazon-devices/expo-linear-gradient 2.0.1758683737

package/build/LinearGradient.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { ViewProps } from 'react-native';
+import { NativeLinearGradientPoint } from './NativeLinearGradient.types';
+/**
+ * An object `{ x: number; y: number }` or array `[x, y]` that represents the point
+ * at which the gradient starts or ends, as a fraction of the overall size of the gradient ranging
+ * from `0` to `1`, inclusive.
+ */
+export type LinearGradientPoint = {
+    /**
+     * A number ranging from `0` to `1`, representing the position of gradient transformation.
+     */
+    x: number;
+    /**
+     * A number ranging from `0` to `1`, representing the position of gradient transformation.
+     */
+    y: number;
+} | NativeLinearGradientPoint;
+export type LinearGradientProps = ViewProps & {
+    /**
+     * An array of colors that represent stops in the gradient. At least two colors are required
+     * (for a single-color background, use the `style.backgroundColor` prop on a `View` component).
+     */
+    colors: string[];
+    /**
+     * An array that contains `number`s ranging from `0` to `1`, inclusive, and is the same length as the `colors` property.
+     * Each number indicates a color-stop location where each respective color should be located.
+     * If not specified, the colors will be distributed evenly across the gradient.
+     *
+     * For example, `[0.5, 0.8]` would render:
+     * - the first color, solid, from the beginning of the gradient view to 50% through (the middle);
+     * - a gradient from the first color to the second from the 50% point to the 80% point; and
+     * - the second color, solid, from the 80% point to the end of the gradient view.
+     *
+     * > The color-stop locations must be ascending from least to greatest.
+     * @default []
+     */
+    locations?: number[] | null;
+    /**
+     * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will start `10%` from the left and `20%` from the top.
+     *
+     * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the starting position.
+     * @default { x: 0.5, y: 0.0 }
+     */
+    start?: LinearGradientPoint | null;
+    /**
+     * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will end `10%` from the left and `20%` from the bottom.
+     *
+     * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the end position.
+     * @default { x: 0.5, y: 1.0 }
+     */
+    end?: LinearGradientPoint | null;
+};
+/**
+ * Renders a native view that transitions between multiple colors in a linear direction.
+ */
+export declare class LinearGradient extends React.Component<LinearGradientProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=LinearGradient.d.ts.map

package/build/LinearGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../src/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAGjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAGzE;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAC3B;IACE;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX,GACD,yBAAyB,CAAC;AAG9B,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C;;;OAGG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC;;;;;OAKG;IACH,GAAG,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC;IACtE,MAAM;CAqBP"}

package/build/LinearGradient.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Platform, processColor } from 'react-native';
+import NativeLinearGradient from './NativeLinearGradient';
+/**
+ * Renders a native view that transitions between multiple colors in a linear direction.
+ */
+export class LinearGradient extends React.Component {
+    render() {
+        const { colors, locations, start, end, ...props } = this.props;
+        let resolvedLocations = locations;
+        if (locations && colors.length !== locations.length) {
+            console.warn('LinearGradient colors and locations props should be arrays of the same length');
+            resolvedLocations = locations.slice(0, colors.length);
+        }
+        return (<NativeLinearGradient {...props} colors={Platform.select({
+                web: colors,
+                default: colors.map(processColor),
+            })} locations={resolvedLocations} startPoint={_normalizePoint(start)} endPoint={_normalizePoint(end)}/>);
+    }
+}
+function _normalizePoint(point) {
+    if (!point) {
+        return undefined;
+    }
+    if (Array.isArray(point) && point.length !== 2) {
+        console.warn('start and end props for LinearGradient must be of the format [x,y] or {x, y}');
+        return undefined;
+    }
+    return Array.isArray(point) ? point : [point.x, point.y];
+}
+//# sourceMappingURL=LinearGradient.js.map

package/build/LinearGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../src/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAa,MAAM,cAAc,CAAC;AAEjE,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AA2D1D;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA8B;IACtE,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/D,IAAI,iBAAiB,GAAG,SAAS,CAAC;QAClC,IAAI,SAAS,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,EAAE,CAAC;YACpD,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAC;YAC9F,iBAAiB,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;QACxD,CAAC;QAED,OAAO,CACL,CAAC,oBAAoB,CACnB,IAAI,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;gBACtB,GAAG,EAAE,MAAa;gBAClB,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC;aAClC,CAAC,CAAC,CACH,SAAS,CAAC,CAAC,iBAAiB,CAAC,CAC7B,UAAU,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CACnC,QAAQ,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,EAC/B,CACH,CAAC;IACJ,CAAC;CACF;AAED,SAAS,eAAe,CACtB,KAA6C;IAE7C,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC/C,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;QAC7F,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AAC3D,CAAC","sourcesContent":["import * as React from 'react';\nimport { Platform, processColor, ViewProps } from 'react-native';\n\nimport NativeLinearGradient from './NativeLinearGradient';\nimport { NativeLinearGradientPoint } from './NativeLinearGradient.types';\n\n// @needsAudit\n/**\n * An object `{ x: number; y: number }` or array `[x, y]` that represents the point\n * at which the gradient starts or ends, as a fraction of the overall size of the gradient ranging\n * from `0` to `1`, inclusive.\n */\nexport type LinearGradientPoint =\n  | {\n      /**\n       * A number ranging from `0` to `1`, representing the position of gradient transformation.\n       */\n      x: number;\n      /**\n       * A number ranging from `0` to `1`, representing the position of gradient transformation.\n       */\n      y: number;\n    }\n  | NativeLinearGradientPoint;\n\n// @needsAudit\nexport type LinearGradientProps = ViewProps & {\n  /**\n   * An array of colors that represent stops in the gradient. At least two colors are required\n   * (for a single-color background, use the `style.backgroundColor` prop on a `View` component).\n   */\n  colors: string[];\n  /**\n   * An array that contains `number`s ranging from `0` to `1`, inclusive, and is the same length as the `colors` property.\n   * Each number indicates a color-stop location where each respective color should be located.\n   * If not specified, the colors will be distributed evenly across the gradient.\n   *\n   * For example, `[0.5, 0.8]` would render:\n   * - the first color, solid, from the beginning of the gradient view to 50% through (the middle);\n   * - a gradient from the first color to the second from the 50% point to the 80% point; and\n   * - the second color, solid, from the 80% point to the end of the gradient view.\n   *\n   * > The color-stop locations must be ascending from least to greatest.\n   * @default []\n   */\n  locations?: number[] | null;\n  /**\n   * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will start `10%` from the left and `20%` from the top.\n   *\n   * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the starting position.\n   * @default { x: 0.5, y: 0.0 }\n   */\n  start?: LinearGradientPoint | null;\n  /**\n   * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will end `10%` from the left and `20%` from the bottom.\n   *\n   * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the end position.\n   * @default { x: 0.5, y: 1.0 }\n   */\n  end?: LinearGradientPoint | null;\n};\n\n/**\n * Renders a native view that transitions between multiple colors in a linear direction.\n */\nexport class LinearGradient extends React.Component<LinearGradientProps> {\n  render() {\n    const { colors, locations, start, end, ...props } = this.props;\n    let resolvedLocations = locations;\n    if (locations && colors.length !== locations.length) {\n      console.warn('LinearGradient colors and locations props should be arrays of the same length');\n      resolvedLocations = locations.slice(0, colors.length);\n    }\n\n    return (\n      <NativeLinearGradient\n        {...props}\n        colors={Platform.select({\n          web: colors as any,\n          default: colors.map(processColor),\n        })}\n        locations={resolvedLocations}\n        startPoint={_normalizePoint(start)}\n        endPoint={_normalizePoint(end)}\n      />\n    );\n  }\n}\n\nfunction _normalizePoint(\n  point: LinearGradientPoint | null | undefined\n): NativeLinearGradientPoint | undefined {\n  if (!point) {\n    return undefined;\n  }\n\n  if (Array.isArray(point) && point.length !== 2) {\n    console.warn('start and end props for LinearGradient must be of the format [x,y] or {x, y}');\n    return undefined;\n  }\n\n  return Array.isArray(point) ? point : [point.x, point.y];\n}\n"]}

package/build/NativeLinearGradient.android.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { NativeLinearGradientProps } from './NativeLinearGradient.types';
+export default function NativeLinearGradient({ colors, locations, startPoint, endPoint, children, style, ...props }: NativeLinearGradientProps): React.ReactElement;
+//# sourceMappingURL=NativeLinearGradient.android.d.ts.map

package/build/NativeLinearGradient.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.android.d.ts","sourceRoot":"","sources":["../src/NativeLinearGradient.android.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAgChD"}

package/build/NativeLinearGradient.android.js

@@ -0,0 +1,27 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+export default function NativeLinearGradient({ colors, locations, startPoint, endPoint, children, style, ...props }) {
+    // TODO: revisit whether we need to inherit the container's borderRadius since this issue has
+    // been resolved: https://github.com/facebook/react-native/issues/3198
+    const flatStyle = StyleSheet.flatten(style) ?? {};
+    const borderRadius = flatStyle.borderRadius ?? 0;
+    // This is the format from:
+    // https://developer.android.com/reference/android/graphics/Path.html#addRoundRect(android.graphics.RectF,%20float[],%20android.graphics.Path.Direction)
+    const borderRadiiPerCorner = [
+        flatStyle.borderTopLeftRadius ?? borderRadius,
+        flatStyle.borderTopLeftRadius ?? borderRadius,
+        flatStyle.borderTopRightRadius ?? borderRadius,
+        flatStyle.borderTopRightRadius ?? borderRadius,
+        flatStyle.borderBottomRightRadius ?? borderRadius,
+        flatStyle.borderBottomRightRadius ?? borderRadius,
+        flatStyle.borderBottomLeftRadius ?? borderRadius,
+        flatStyle.borderBottomLeftRadius ?? borderRadius,
+    ];
+    return (<View {...props} style={style}>
+      <BaseNativeLinearGradient style={StyleSheet.absoluteFill} colors={colors} startPoint={startPoint} endPoint={endPoint} locations={locations} borderRadii={borderRadiiPerCorner}/>
+      {children}
+    </View>);
+}
+const BaseNativeLinearGradient = requireNativeViewManager('ExpoLinearGradient');
+//# sourceMappingURL=NativeLinearGradient.android.js.map

package/build/NativeLinearGradient.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.android.js","sourceRoot":"","sources":["../src/NativeLinearGradient.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACkB;IAC1B,6FAA6F;IAC7F,sEAAsE;IACtE,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClD,MAAM,YAAY,GAAG,SAAS,CAAC,YAAY,IAAI,CAAC,CAAC;IAEjD,2BAA2B;IAC3B,wJAAwJ;IACxJ,MAAM,oBAAoB,GAAG;QAC3B,SAAS,CAAC,mBAAmB,IAAI,YAAY;QAC7C,SAAS,CAAC,mBAAmB,IAAI,YAAY;QAC7C,SAAS,CAAC,oBAAoB,IAAI,YAAY;QAC9C,SAAS,CAAC,oBAAoB,IAAI,YAAY;QAC9C,SAAS,CAAC,uBAAuB,IAAI,YAAY;QACjD,SAAS,CAAC,uBAAuB,IAAI,YAAY;QACjD,SAAS,CAAC,sBAAsB,IAAI,YAAY;QAChD,SAAS,CAAC,sBAAsB,IAAI,YAAY;KACjD,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAC5B;MAAA,CAAC,wBAAwB,CACvB,KAAK,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAC/B,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,WAAW,CAAC,CAAC,oBAAoB,CAAC,EAEpC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["import { requireNativeViewManager } from 'expo-modules-core';\nimport * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { NativeLinearGradientProps } from './NativeLinearGradient.types';\n\nexport default function NativeLinearGradient({\n  colors,\n  locations,\n  startPoint,\n  endPoint,\n  children,\n  style,\n  ...props\n}: NativeLinearGradientProps): React.ReactElement {\n  // TODO: revisit whether we need to inherit the container's borderRadius since this issue has\n  // been resolved: https://github.com/facebook/react-native/issues/3198\n  const flatStyle = StyleSheet.flatten(style) ?? {};\n  const borderRadius = flatStyle.borderRadius ?? 0;\n\n  // This is the format from:\n  // https://developer.android.com/reference/android/graphics/Path.html#addRoundRect(android.graphics.RectF,%20float[],%20android.graphics.Path.Direction)\n  const borderRadiiPerCorner = [\n    flatStyle.borderTopLeftRadius ?? borderRadius,\n    flatStyle.borderTopLeftRadius ?? borderRadius,\n    flatStyle.borderTopRightRadius ?? borderRadius,\n    flatStyle.borderTopRightRadius ?? borderRadius,\n    flatStyle.borderBottomRightRadius ?? borderRadius,\n    flatStyle.borderBottomRightRadius ?? borderRadius,\n    flatStyle.borderBottomLeftRadius ?? borderRadius,\n    flatStyle.borderBottomLeftRadius ?? borderRadius,\n  ];\n\n  return (\n    <View {...props} style={style}>\n      <BaseNativeLinearGradient\n        style={StyleSheet.absoluteFill}\n        colors={colors}\n        startPoint={startPoint}\n        endPoint={endPoint}\n        locations={locations}\n        borderRadii={borderRadiiPerCorner}\n      />\n      {children}\n    </View>\n  );\n}\n\nconst BaseNativeLinearGradient = requireNativeViewManager('ExpoLinearGradient');\n"]}

package/build/NativeLinearGradient.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { NativeLinearGradientProps } from './NativeLinearGradient.types';
+export default function NativeLinearGradient(props: NativeLinearGradientProps): React.ReactElement;
+//# sourceMappingURL=NativeLinearGradient.d.ts.map

package/build/NativeLinearGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.d.ts","sourceRoot":"","sources":["../src/NativeLinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAIzE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAIjG"}

package/build/NativeLinearGradient.ios.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { NativeLinearGradientProps } from './NativeLinearGradient.types';
+declare const NativeLinearGradient: React.FC<NativeLinearGradientProps>;
+export default NativeLinearGradient;
+//# sourceMappingURL=NativeLinearGradient.ios.d.ts.map

package/build/NativeLinearGradient.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.ios.d.ts","sourceRoot":"","sources":["../src/NativeLinearGradient.ios.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAEzE,QAAA,MAAM,oBAAoB,EAErB,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC;AAEzC,eAAe,oBAAoB,CAAC"}

package/build/NativeLinearGradient.ios.js

@@ -0,0 +1,4 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+const NativeLinearGradient = requireNativeViewManager('ExpoLinearGradient');
+export default NativeLinearGradient;
+//# sourceMappingURL=NativeLinearGradient.ios.js.map

package/build/NativeLinearGradient.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.ios.js","sourceRoot":"","sources":["../src/NativeLinearGradient.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,oBAAoB,GAAG,wBAAwB,CACnD,oBAAoB,CACkB,CAAC;AAEzC,eAAe,oBAAoB,CAAC","sourcesContent":["import { requireNativeViewManager } from 'expo-modules-core';\nimport * as React from 'react';\n\nimport { NativeLinearGradientProps } from './NativeLinearGradient.types';\n\nconst NativeLinearGradient = requireNativeViewManager(\n  'ExpoLinearGradient'\n) as React.FC<NativeLinearGradientProps>;\n\nexport default NativeLinearGradient;\n"]}

package/build/NativeLinearGradient.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { View } from 'react-native';
+// This is a shim view for platforms that aren't supported by Expo.
+// The component and prop types should match all of the other platform variations.
+export default function NativeLinearGradient(props) {
+    const { colors, locations, startPoint, endPoint, ...viewProps } = props;
+    console.warn('LinearGradient is not available on this platform');
+    return <View {...viewProps}/>;
+}
+//# sourceMappingURL=NativeLinearGradient.js.map

package/build/NativeLinearGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.js","sourceRoot":"","sources":["../src/NativeLinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,mEAAmE;AACnE,kFAAkF;AAClF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAgC;IAC3E,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxE,OAAO,CAAC,IAAI,CAAC,kDAAkD,CAAC,CAAC;IACjE,OAAO,CAAC,IAAI,CAAC,IAAK,SAAiB,CAAC,EAAG,CAAC;AAC1C,CAAC","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nimport { NativeLinearGradientProps } from './NativeLinearGradient.types';\n\n// This is a shim view for platforms that aren't supported by Expo.\n// The component and prop types should match all of the other platform variations.\nexport default function NativeLinearGradient(props: NativeLinearGradientProps): React.ReactElement {\n  const { colors, locations, startPoint, endPoint, ...viewProps } = props;\n  console.warn('LinearGradient is not available on this platform');\n  return <View {...(viewProps as any)} />;\n}\n"]}

package/build/NativeLinearGradient.kepler.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ViewProps, ColorValue } from 'react-native';
+interface NativeProps extends ViewProps {
+    colors: (number | ColorValue)[];
+    startPoint?: {
+        x: number;
+        y: number;
+    };
+    endPoint?: {
+        x: number;
+        y: number;
+    };
+    locations?: number[];
+}
+/**
+ * This responsive component displays native React View that transitions between multiple colours along the respective dimensions.
+ * You can pass different colors, angles, locations etc. to communicate different visuals of gradient.
+ * @param props The properties passed to this component for rendering
+ * @constructor
+ */
+export default function (props: NativeProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=NativeLinearGradient.kepler.d.ts.map

package/build/NativeLinearGradient.kepler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.kepler.d.ts","sourceRoot":"","sources":["../src/NativeLinearGradient.kepler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAOrD,UAAU,WAAY,SAAQ,SAAS;IACrC,MAAM,EAAE,CAAC,MAAM,GAAG,UAAU,CAAC,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAcD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,WAAW,KAAK,EAAE,WAAW,qBAE1C"}

package/build/NativeLinearGradient.kepler.js

@@ -0,0 +1,23 @@
+import React from 'react';
+// @ts-ignore
+import register from 'react-native/Libraries/Utilities/registerGeneratedViewConfig';
+const NativeComponent = 'ExpoLinearGradient';
+register(NativeComponent, {
+    uiViewClassName: NativeComponent,
+    validAttributes: {
+        colors: true,
+        startPoint: true,
+        endPoint: true,
+        locations: true,
+    },
+});
+/**
+ * This responsive component displays native React View that transitions between multiple colours along the respective dimensions.
+ * You can pass different colors, angles, locations etc. to communicate different visuals of gradient.
+ * @param props The properties passed to this component for rendering
+ * @constructor
+ */
+export default function (props) {
+    return <NativeComponent {...props}/>;
+}
+//# sourceMappingURL=NativeLinearGradient.kepler.js.map

package/build/NativeLinearGradient.kepler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.kepler.js","sourceRoot":"","sources":["../src/NativeLinearGradient.kepler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,aAAa;AACb,OAAO,QAAQ,MAAM,8DAA8D,CAAC;AAYpF,MAAM,eAAe,GAAG,oBAA6D,CAAC;AAEtF,QAAQ,CAAC,eAAe,EAAE;IACxB,eAAe,EAAE,eAAe;IAChC,eAAe,EAAE;QACf,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,IAAI;KAChB;CACF,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,OAAO,WAAW,KAAkB;IACzC,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACxC,CAAC","sourcesContent":["import React from 'react'\nimport { ViewProps, ColorValue } from 'react-native';\n// @ts-ignore\nimport register from 'react-native/Libraries/Utilities/registerGeneratedViewConfig';\nimport {\n  HostComponent,\n} from 'react-native';\n\ninterface NativeProps extends ViewProps {\n  colors: (number | ColorValue)[];\n  startPoint?: { x: number; y: number };\n  endPoint?: { x: number; y: number };\n  locations?: number[];\n}\n\nconst NativeComponent = 'ExpoLinearGradient' as unknown as HostComponent<NativeProps>;\n\nregister(NativeComponent, {\n  uiViewClassName: NativeComponent,\n  validAttributes: {\n    colors: true,\n    startPoint: true,\n    endPoint: true,\n    locations: true,\n  },\n});\n\n/**\n * This responsive component displays native React View that transitions between multiple colours along the respective dimensions.\n * You can pass different colors, angles, locations etc. to communicate different visuals of gradient.\n * @param props The properties passed to this component for rendering\n * @constructor\n */\nexport default function (props: NativeProps) {\n  return <NativeComponent {...props} />;\n}\n"]}

package/build/NativeLinearGradient.types.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+export type NativeLinearGradientProps = ViewProps & PropsWithChildren<{
+    colors: number[];
+    locations?: number[] | null;
+    startPoint?: NativeLinearGradientPoint | null;
+    endPoint?: NativeLinearGradientPoint | null;
+}>;
+export type getLinearGradientBackgroundImage = (colors: number[], width?: number, height?: number, locations?: number[] | null, startPoint?: NativeLinearGradientPoint | null, endPoint?: NativeLinearGradientPoint | null) => string;
+export type NativeLinearGradientPoint = [number, number];
+//# sourceMappingURL=NativeLinearGradient.types.d.ts.map

package/build/NativeLinearGradient.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.types.d.ts","sourceRoot":"","sources":["../src/NativeLinearGradient.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAC/C,iBAAiB,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;CAC7C,CAAC,CAAC;AAEL,MAAM,MAAM,gCAAgC,GAAG,CAC7C,MAAM,EAAE,MAAM,EAAE,EAChB,KAAK,CAAC,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,EACf,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,EAC3B,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,EAC7C,QAAQ,CAAC,EAAE,yBAAyB,GAAG,IAAI,KACxC,MAAM,CAAC;AAEZ,MAAM,MAAM,yBAAyB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC"}

package/build/NativeLinearGradient.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NativeLinearGradient.types.js.map

package/build/NativeLinearGradient.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.types.js","sourceRoot":"","sources":["../src/NativeLinearGradient.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PropsWithChildren } from 'react';\nimport { ViewProps } from 'react-native';\n\nexport type NativeLinearGradientProps = ViewProps &\n  PropsWithChildren<{\n    colors: number[];\n    locations?: number[] | null;\n    startPoint?: NativeLinearGradientPoint | null;\n    endPoint?: NativeLinearGradientPoint | null;\n  }>;\n\nexport type getLinearGradientBackgroundImage = (\n  colors: number[],\n  width?: number,\n  height?: number,\n  locations?: number[] | null,\n  startPoint?: NativeLinearGradientPoint | null,\n  endPoint?: NativeLinearGradientPoint | null\n) => string;\n\nexport type NativeLinearGradientPoint = [number, number];\n"]}

package/build/NativeLinearGradient.web.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { NativeLinearGradientPoint, NativeLinearGradientProps } from './NativeLinearGradient.types';
+export default function NativeLinearGradient({ colors, locations, startPoint, endPoint, ...props }: NativeLinearGradientProps): React.ReactElement;
+/**
+ * Extracted to a separate function in order to be able to test logic independently.
+ */
+export declare function getLinearGradientBackgroundImage(colors: number[] | string[], locations?: number[] | null, startPoint?: NativeLinearGradientPoint | null, endPoint?: NativeLinearGradientPoint | null, width?: number, height?: number): string;
+//# sourceMappingURL=NativeLinearGradient.web.d.ts.map

package/build/NativeLinearGradient.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.web.d.ts","sourceRoot":"","sources":["../src/NativeLinearGradient.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAGpG,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAsChD;AAED;;GAEG;AACH,wBAAgB,gCAAgC,CAC9C,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,EAC3B,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,EAC3B,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,EAC7C,QAAQ,CAAC,EAAE,yBAAyB,GAAG,IAAI,EAC3C,KAAK,GAAE,MAAU,EACjB,MAAM,GAAE,MAAU,UAKnB"}

package/build/NativeLinearGradient.web.js

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { normalizeColor } from './normalizeColor';
+export default function NativeLinearGradient({ colors, locations, startPoint, endPoint, ...props }) {
+    const [{ height, width }, setLayout] = React.useState({
+        height: 1,
+        width: 1,
+    });
+    // TODO(Bacon): In the future we could consider adding `backgroundRepeat: "no-repeat"`. For more
+    // browser support.
+    const linearGradientBackgroundImage = React.useMemo(() => {
+        return getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width, height);
+    }, [colors, locations, startPoint, endPoint, width, height]);
+    return (<View {...props} style={[
+            props.style,
+            // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
+            { backgroundImage: linearGradientBackgroundImage },
+        ]} onLayout={(event) => {
+            const { width, height } = event.nativeEvent.layout;
+            setLayout((oldLayout) => {
+                // don't set new layout state unless the layout has actually changed
+                if (width !== oldLayout.width || height !== oldLayout.height) {
+                    return { height, width };
+                }
+                return oldLayout;
+            });
+            if (props.onLayout) {
+                props.onLayout(event);
+            }
+        }}/>);
+}
+/**
+ * Extracted to a separate function in order to be able to test logic independently.
+ */
+export function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {
+    const gradientColors = calculateGradientColors(colors, locations);
+    const angle = calculatePseudoAngle(width, height, startPoint, endPoint);
+    return `linear-gradient(${angle}deg, ${gradientColors.join(', ')})`;
+}
+function calculatePseudoAngle(width, height, startPoint, endPoint) {
+    const getControlPoints = () => {
+        let correctedStartPoint = [0, 0];
+        if (Array.isArray(startPoint)) {
+            correctedStartPoint = [
+                startPoint[0] != null ? startPoint[0] : 0.0,
+                startPoint[1] != null ? startPoint[1] : 0.0,
+            ];
+        }
+        let correctedEndPoint = [0.0, 1.0];
+        if (Array.isArray(endPoint)) {
+            correctedEndPoint = [
+                endPoint[0] != null ? endPoint[0] : 0.0,
+                endPoint[1] != null ? endPoint[1] : 1.0,
+            ];
+        }
+        return [correctedStartPoint, correctedEndPoint];
+    };
+    const [start, end] = getControlPoints();
+    start[0] *= width;
+    end[0] *= width;
+    start[1] *= height;
+    end[1] *= height;
+    const py = end[1] - start[1];
+    const px = end[0] - start[0];
+    return 90 + (Math.atan2(py, px) * 180) / Math.PI;
+}
+function calculateGradientColors(colors, locations) {
+    return colors.map((color, index) => {
+        const output = normalizeColor(color);
+        if (locations && locations[index]) {
+            const location = Math.max(0, Math.min(1, locations[index]));
+            // Convert 0...1 to 0...100
+            const percentage = location * 100;
+            return `${output} ${percentage}%`;
+        }
+        return output;
+    });
+}
+//# sourceMappingURL=NativeLinearGradient.web.js.map

package/build/NativeLinearGradient.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeLinearGradient.web.js","sourceRoot":"","sources":["../src/NativeLinearGradient.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nimport { NativeLinearGradientPoint, NativeLinearGradientProps } from './NativeLinearGradient.types';\nimport { normalizeColor } from './normalizeColor';\n\nexport default function NativeLinearGradient({\n  colors,\n  locations,\n  startPoint,\n  endPoint,\n  ...props\n}: NativeLinearGradientProps): React.ReactElement {\n  const [{ height, width }, setLayout] = React.useState({\n    height: 1,\n    width: 1,\n  });\n\n  // TODO(Bacon): In the future we could consider adding `backgroundRepeat: \"no-repeat\"`. For more\n  // browser support.\n  const linearGradientBackgroundImage = React.useMemo(() => {\n    return getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width, height);\n  }, [colors, locations, startPoint, endPoint, width, height]);\n\n  return (\n    <View\n      {...props}\n      style={[\n        props.style,\n        // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.\n        { backgroundImage: linearGradientBackgroundImage },\n      ]}\n      onLayout={(event) => {\n        const { width, height } = event.nativeEvent.layout;\n\n        setLayout((oldLayout) => {\n          // don't set new layout state unless the layout has actually changed\n          if (width !== oldLayout.width || height !== oldLayout.height) {\n            return { height, width };\n          }\n\n          return oldLayout;\n        });\n\n        if (props.onLayout) {\n          props.onLayout(event);\n        }\n      }}\n    />\n  );\n}\n\n/**\n * Extracted to a separate function in order to be able to test logic independently.\n */\nexport function getLinearGradientBackgroundImage(\n  colors: number[] | string[],\n  locations?: number[] | null,\n  startPoint?: NativeLinearGradientPoint | null,\n  endPoint?: NativeLinearGradientPoint | null,\n  width: number = 1,\n  height: number = 1\n) {\n  const gradientColors = calculateGradientColors(colors, locations);\n  const angle = calculatePseudoAngle(width, height, startPoint, endPoint);\n  return `linear-gradient(${angle}deg, ${gradientColors.join(', ')})`;\n}\n\nfunction calculatePseudoAngle(\n  width: number,\n  height: number,\n  startPoint?: NativeLinearGradientPoint | null,\n  endPoint?: NativeLinearGradientPoint | null\n) {\n  const getControlPoints = (): NativeLinearGradientPoint[] => {\n    let correctedStartPoint: NativeLinearGradientPoint = [0, 0];\n    if (Array.isArray(startPoint)) {\n      correctedStartPoint = [\n        startPoint[0] != null ? startPoint[0] : 0.0,\n        startPoint[1] != null ? startPoint[1] : 0.0,\n      ];\n    }\n    let correctedEndPoint: NativeLinearGradientPoint = [0.0, 1.0];\n    if (Array.isArray(endPoint)) {\n      correctedEndPoint = [\n        endPoint[0] != null ? endPoint[0] : 0.0,\n        endPoint[1] != null ? endPoint[1] : 1.0,\n      ];\n    }\n    return [correctedStartPoint, correctedEndPoint];\n  };\n\n  const [start, end] = getControlPoints();\n  start[0] *= width;\n  end[0] *= width;\n  start[1] *= height;\n  end[1] *= height;\n  const py = end[1] - start[1];\n  const px = end[0] - start[0];\n\n  return 90 + (Math.atan2(py, px) * 180) / Math.PI;\n}\n\nfunction calculateGradientColors(colors: number[] | string[], locations?: number[] | null) {\n  return colors.map((color: number | string, index: number): string | void => {\n    const output = normalizeColor(color);\n    if (locations && locations[index]) {\n      const location = Math.max(0, Math.min(1, locations[index]));\n      // Convert 0...1 to 0...100\n      const percentage = location * 100;\n      return `${output} ${percentage}%`;\n    }\n    return output;\n  });\n}\n"]}

package/build/normalizeColor.d.ts

@@ -0,0 +1,2 @@
+export declare function normalizeColor(color?: number | string, opacity?: number): void | string;
+//# sourceMappingURL=normalizeColor.d.ts.map

package/build/normalizeColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeColor.d.ts","sourceRoot":"","sources":["../src/normalizeColor.ts"],"names":[],"mappings":"AAeA,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,GAAE,MAAU,GAAG,IAAI,GAAG,MAAM,CAgB1F"}

package/build/normalizeColor.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Expo.
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { processColor } from 'react-native';
+const isWebColor = (color) => color === 'currentcolor' ||
+    color === 'currentColor' ||
+    color === 'inherit' ||
+    color.indexOf('var(') === 0;
+export function normalizeColor(color, opacity = 1) {
+    if (color == null)
+        return;
+    if (typeof color === 'string' && isWebColor(color)) {
+        return color;
+    }
+    const colorInt = processColor(color);
+    if (colorInt != null) {
+        const r = (colorInt >> 16) & 255;
+        const g = (colorInt >> 8) & 255;
+        const b = colorInt & 255;
+        const a = ((colorInt >> 24) & 255) / 255;
+        const alpha = (a * opacity).toFixed(2);
+        return `rgba(${r},${g},${b},${alpha})`;
+    }
+}
+//# sourceMappingURL=normalizeColor.js.map

package/build/normalizeColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeColor.js","sourceRoot":"","sources":["../src/normalizeColor.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,MAAM,UAAU,GAAG,CAAC,KAAa,EAAW,EAAE,CAC5C,KAAK,KAAK,cAAc;IACxB,KAAK,KAAK,cAAc;IACxB,KAAK,KAAK,SAAS;IACnB,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAE9B,MAAM,UAAU,cAAc,CAAC,KAAuB,EAAE,UAAkB,CAAC;IACzE,IAAI,KAAK,IAAI,IAAI;QAAE,OAAO;IAE1B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;QACnD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAuB,CAAC;IAC3D,IAAI,QAAQ,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,CAAC,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC,GAAG,GAAG,CAAC;QACjC,MAAM,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC;QAChC,MAAM,CAAC,GAAG,QAAQ,GAAG,GAAG,CAAC;QACzB,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,IAAI,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;QACzC,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACvC,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC;IACzC,CAAC;AACH,CAAC","sourcesContent":["/**\n * Copyright (c) Expo.\n * Copyright (c) Nicolas Gallagher.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { processColor } from 'react-native';\n\nconst isWebColor = (color: string): boolean =>\n  color === 'currentcolor' ||\n  color === 'currentColor' ||\n  color === 'inherit' ||\n  color.indexOf('var(') === 0;\n\nexport function normalizeColor(color?: number | string, opacity: number = 1): void | string {\n  if (color == null) return;\n\n  if (typeof color === 'string' && isWebColor(color)) {\n    return color;\n  }\n\n  const colorInt = processColor(color) as number | undefined;\n  if (colorInt != null) {\n    const r = (colorInt >> 16) & 255;\n    const g = (colorInt >> 8) & 255;\n    const b = colorInt & 255;\n    const a = ((colorInt >> 24) & 255) / 255;\n    const alpha = (a * opacity).toFixed(2);\n    return `rgba(${r},${g},${b},${alpha})`;\n  }\n}\n"]}

package/expo-module.config.json

@@ -0,0 +1,10 @@
+{
+  "name": "expo-linear-gradient",
+  "platforms": ["ios", "android"],
+  "ios": {
+    "modulesClassNames": ["LinearGradientModule"]
+  },
+  "android": {
+    "modulesClassNames": ["expo.modules.lineargradient.LinearGradientModule"]
+  }
+}

package/ios/ExpoLinearGradient.podspec

@@ -0,0 +1,32 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'ExpoLinearGradient'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platform       = :ios, '13.0'
+  s.swift_version  = '5.4'
+  s.source         = { git: 'https://github.com/expo/expo.git' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+
+  if !$ExpoUseSources&.include?(package['name']) && ENV['EXPO_USE_SOURCE'].to_i == 0 && File.exist?("#{s.name}.xcframework") && Gem::Version.new(Pod::VERSION) >= Gem::Version.new('1.10.0')
+    s.source_files = "**/*.h"
+    s.vendored_frameworks = "#{s.name}.xcframework"
+  else
+    s.source_files = "**/*.{h,m,swift}"
+  end
+end

package/ios/LinearGradientLayer.swift

@@ -0,0 +1,107 @@
+// Copyright 2021-present 650 Industries. All rights reserved.
+
+import QuartzCore
+import CoreGraphics
+
+var defaultStartPoint = CGPoint(x: 0.5, y: 0.0)
+var defaultEndPoint = CGPoint(x: 0.5, y: 1.0)
+var defaultLocations: [CGFloat] = []
+
+final class LinearGradientLayer: CALayer {
+  var colors = [CGColor]()
+  var startPoint = defaultStartPoint
+  var endPoint = defaultEndPoint
+  var locations = defaultLocations
+
+  override init() {
+    super.init()
+    self.needsDisplayOnBoundsChange = true
+    self.masksToBounds = true
+  }
+  
+  override init(layer: Any) {
+    super.init(layer: layer)
+    self.needsDisplayOnBoundsChange = true
+    self.masksToBounds = true
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  func setColors(_ colors: [CGColor]) {
+    self.colors = colors
+    setNeedsDisplay()
+  }
+
+  func setStartPoint(_ startPoint: CGPoint?) {
+    self.startPoint = startPoint ?? defaultStartPoint
+    setNeedsDisplay()
+  }
+
+  func setEndPoint(_ endPoint: CGPoint?) {
+    self.endPoint = endPoint ?? defaultEndPoint
+    setNeedsDisplay()
+  }
+
+  func setLocations(_ locations: [CGFloat]?) {
+    self.locations = locations ?? defaultLocations
+    setNeedsDisplay()
+  }
+
+  override func display() {
+    super.display()
+
+    if colors.isEmpty || bounds.size.width.isZero || bounds.size.height.isZero {
+      return
+    }
+    let hasAlpha = colors.reduce(false) { result, color in
+      return result || color.alpha < 1.0
+    }
+
+    UIGraphicsBeginImageContextWithOptions(bounds.size, !hasAlpha, 0.0)
+
+    guard let contextRef = UIGraphicsGetCurrentContext() else {
+      return
+    }
+
+    draw(in: contextRef)
+
+    guard let image = UIGraphicsGetImageFromCurrentImageContext() else {
+      return
+    }
+
+    self.contents = image.cgImage
+    self.contentsScale = image.scale
+
+    UIGraphicsEndImageContext()
+  }
+
+  override func draw(in ctx: CGContext) {
+    super.draw(in: ctx)
+
+    ctx.saveGState()
+
+    let colorSpace = CGColorSpaceCreateDeviceRGB()
+    let locations = colors.enumerated().map { (offset: Int, _: CGColor) -> CGFloat in
+      if self.locations.count > offset {
+        return self.locations[offset]
+      } else {
+        return CGFloat(offset) / CGFloat(colors.count - 1)
+      }
+    }
+
+    if let gradient = CGGradient(colorsSpace: colorSpace, colors: colors as CFArray, locations: locations) {
+      let size = bounds.size
+
+      ctx.drawLinearGradient(
+        gradient,
+        start: CGPoint(x: startPoint.x * size.width, y: startPoint.y * size.height),
+        end: CGPoint(x: endPoint.x * size.width, y: endPoint.y * size.height),
+        options: [.drawsBeforeStartLocation, .drawsAfterEndLocation]
+      )
+    }
+
+    ctx.restoreGState()
+  }
+}

package/ios/LinearGradientModule.swift

@@ -0,0 +1,28 @@
+// Copyright 2021-present 650 Industries. All rights reserved.
+
+import CoreGraphics
+import ExpoModulesCore
+
+public class LinearGradientModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoLinearGradient")
+
+    View(LinearGradientView.self) {
+      Prop("colors") { (view: LinearGradientView, colors: [CGColor]) in
+        view.gradientLayer.setColors(colors)
+      }
+
+      Prop("startPoint") { (view: LinearGradientView, startPoint: CGPoint?) in
+        view.gradientLayer.setStartPoint(startPoint)
+      }
+
+      Prop("endPoint") { (view: LinearGradientView, endPoint: CGPoint?) in
+        view.gradientLayer.setEndPoint(endPoint)
+      }
+
+      Prop("locations") { (view: LinearGradientView, locations: [CGFloat]?) in
+        view.gradientLayer.setLocations(locations)
+      }
+    }
+  }
+}