@amazon-devices/expo-linear-gradient 2.0.1758683737 → 2.0.9000000001

package/THIRD_PARTY_NOTICES.txt

@@ -1,24 +1,4 @@
 License from package.json:
 ==============================
 
-The MIT License (MIT)
-
-Copyright (c) 2015-present 650 Industries, Inc. (aka Expo)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT

package/build/LinearGradient.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../src/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAA0B,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;CA4BP"}

package/build/LinearGradient.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, processColor } from 'react-native';
+import { processColor, Platform } from 'react-native';
 import NativeLinearGradient from './NativeLinearGradient';
 /**
  * Renders a native view that transitions between multiple colors in a linear direction.
@@ -14,6 +14,13 @@ export class LinearGradient extends React.Component {
         }
         return (<NativeLinearGradient {...props} colors={Platform.select({
                 web: colors,
+                // @amznmod_react - Platform.select's typing doesn't know about the "kepler" key (it's only aware
+                // of the built-in platforms like ios/android/web/default), so this line is
+                // flagged as an excess property. On Vega/Kepler, colors are consumed as raw
+                // strings by @amazon-devices/react-linear-gradient's kepler wrapper, so we pass them
+                // through without running processColor() (unlike the default native path).
+                // @ts-ignore
+                kepler: colors,
                 default: colors.map(processColor),
             })} locations={resolvedLocations} startPoint={_normalizePoint(start)} endPoint={_normalizePoint(end)}/>);
     }

package/build/LinearGradient.js.map

@@ -1 +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"]}
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../src/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,YAAY,EAAE,QAAQ,EAAE,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,iGAAiG;gBACjG,2EAA2E;gBAC3E,4EAA4E;gBAC5E,2EAA2E;gBAC3E,2EAA2E;gBAC3E,aAAa;gBACb,MAAM,EAAE,MAAM;gBACd,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 { ViewProps, processColor, Platform } 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          // @amznmod_react - Platform.select's typing doesn't know about the \"kepler\" key (it's only aware\n          // of the built-in platforms like ios/android/web/default), so this line is\n          // flagged as an excess property. On Vega/Kepler, colors are consumed as raw\n          // strings by @amazon-devices/react-linear-gradient's kepler wrapper, so we pass them\n          // through without running processColor() (unlike the default native path).\n          // @ts-ignore\n          kepler: colors,\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.kepler.d.ts

@@ -1,23 +1,12 @@
 import React from 'react';
-import { ViewProps, ColorValue } from 'react-native';
+import { ViewProps } from 'react-native';
+import { NativeLinearGradientPoint } from './NativeLinearGradient.types';
 interface NativeProps extends ViewProps {
-    colors: (number | ColorValue)[];
-    startPoint?: {
-        x: number;
-        y: number;
-    };
-    endPoint?: {
-        x: number;
-        y: number;
-    };
-    locations?: number[];
+    colors: string[];
+    startPoint?: NativeLinearGradientPoint | null;
+    endPoint?: NativeLinearGradientPoint | null;
+    locations?: number[] | null;
 }
-/**
- * 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 default function NativeLinearGradient({ colors, startPoint, endPoint, locations, ...viewProps }: NativeProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=NativeLinearGradient.kepler.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"NativeLinearGradient.kepler.d.ts","sourceRoot":"","sources":["../src/NativeLinearGradient.kepler.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAEzE,UAAU,WAAY,SAAQ,SAAS;IACrC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;CAC7B;AAOD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,WAAW,qBAUb"}

package/build/NativeLinearGradient.kepler.js

@@ -1,23 +1,10 @@
+import LinearGradient from '@amazon-devices/react-linear-gradient';
 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}/>;
+// @amznmod_react - Defaults mirror the old native `ExpoLinearGradient` component (start_ = {0.5, 0},
+// end_ = {0.5, 1} in kepler/ExpoLinearGradientDrawableLayer.h).
+const DEFAULT_START = { x: 0.5, y: 0 };
+const DEFAULT_END = { x: 0.5, y: 1 };
+export default function NativeLinearGradient({ colors, startPoint, endPoint, locations, ...viewProps }) {
+    return (<LinearGradient {...viewProps} colors={colors} start={startPoint ? { x: startPoint[0], y: startPoint[1] } : DEFAULT_START} end={endPoint ? { x: endPoint[0], y: endPoint[1] } : DEFAULT_END} locations={locations ?? undefined}/>);
 }
 //# sourceMappingURL=NativeLinearGradient.kepler.js.map

package/build/NativeLinearGradient.kepler.js.map

@@ -1 +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"]}
+{"version":3,"file":"NativeLinearGradient.kepler.js","sourceRoot":"","sources":["../src/NativeLinearGradient.kepler.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,qGAAqG;AACrG,gEAAgE;AAChE,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AACvC,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACA;IACZ,OAAO,CACL,CAAC,cAAc,CACb,IAAI,SAAS,CAAC,CACd,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAC3E,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CACjE,SAAS,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,EAClC,CACH,CAAC;AACJ,CAAC","sourcesContent":["import LinearGradient from '@amazon-devices/react-linear-gradient';\nimport React from 'react';\nimport { ViewProps } from 'react-native';\n\nimport { NativeLinearGradientPoint } from './NativeLinearGradient.types';\n\ninterface NativeProps extends ViewProps {\n  colors: string[];\n  startPoint?: NativeLinearGradientPoint | null;\n  endPoint?: NativeLinearGradientPoint | null;\n  locations?: number[] | null;\n}\n\n// @amznmod_react - Defaults mirror the old native `ExpoLinearGradient` component (start_ = {0.5, 0},\n// end_ = {0.5, 1} in kepler/ExpoLinearGradientDrawableLayer.h).\nconst DEFAULT_START = { x: 0.5, y: 0 };\nconst DEFAULT_END = { x: 0.5, y: 1 };\n\nexport default function NativeLinearGradient({\n  colors,\n  startPoint,\n  endPoint,\n  locations,\n  ...viewProps\n}: NativeProps) {\n  return (\n    <LinearGradient\n      {...viewProps}\n      colors={colors}\n      start={startPoint ? { x: startPoint[0], y: startPoint[1] } : DEFAULT_START}\n      end={endPoint ? { x: endPoint[0], y: endPoint[1] } : DEFAULT_END}\n      locations={locations ?? undefined}\n    />\n  );\n}\n"]}

package/kepler/test/ExpoLinearGradientDrawableLayer.cpp

@@ -1,21 +1,22 @@
 /*
- * Copyright (c) 2024 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * Copyright (c) 2024-2025 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  *
  * PROPRIETARY/CONFIDENTIAL
  *
  * Use is subject to license terms.
  */
 
+#include "../ExpoLinearGradientDrawableLayer.h"
+
 #include <gmock/gmock-actions.h>
 #include <gmock/gmock.h>
 #include <gtest/gtest.h>
 
 #include "catch.hpp"
 
-#include "../ExpoLinearGradientDrawableLayer.h"
-
-using namespace volta::react;
+namespace volta::react {
 
+// NOLINTNEXTLINE - warnings caused by catch2 macro internal implementation
 TEST_CASE("ExpoLinearGradientDrawableLayer") {
     std::vector<uint32_t> colors{0xFF0000, 0x00FF00, 0x0000FF};
     std::vector<float> locations{10, 20, 30};
@@ -25,32 +26,25 @@ TEST_CASE("ExpoLinearGradientDrawableLayer") {
     volta::graphics::Path path;
     path.addRect(rect);
 
-    // TODO: PROJVEGA-211833 - Fix these test cases - removing volta::graphics::Canvas mocks
-    // SECTION("Test ExpoLinearGradientDrawableLayer::onDraw - No metrics set") {
-    //     ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
-    //     volta::graphics::Canvas canvas{};
-    //     EXPECT_CALL(canvas, drawPath(::testing::_, ::testing::_)).Times(0);
-    //     EXPECT_CALL(canvas, drawRect(::testing::_, ::testing::_)).Times(0);
-    //     testExpoLinearGradientDrawableLayer.onDraw(canvas);
-    // }
-    
-    // SECTION("Test ExpoLinearGradientDrawableLayer::onDraw - Rect not set") {
-    //     ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
-    //     volta::graphics::Canvas canvas{};
-    //     testExpoLinearGradientDrawableLayer.setRect(rect);
-    //     EXPECT_CALL(canvas, drawPath(::testing::_, ::testing::_)).Times(0);
-    //     EXPECT_CALL(canvas, drawRect(::testing::_, ::testing::_)).Times(1);
-    //     testExpoLinearGradientDrawableLayer.onDraw(canvas);
-    // }
-
-    // SECTION("Test ExpoLinearGradientDrawableLayer::onDraw - Path not set") {
-    //     ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
-    //     volta::graphics::Canvas canvas{};
-    //     testExpoLinearGradientDrawableLayer.setPath(path);
-    //     EXPECT_CALL(canvas, drawPath(::testing::_, ::testing::_)).Times(1);
-    //     EXPECT_CALL(canvas, drawRect(::testing::_, ::testing::_)).Times(0);
-    //     testExpoLinearGradientDrawableLayer.onDraw(canvas);
-    // }
+    SECTION("Test ExpoLinearGradientDrawableLayer::onDraw - No metrics set") {
+        ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
+        auto canvas = volta::graphics::Canvas::makeTestingCanvas();
+        testExpoLinearGradientDrawableLayer.onDraw(canvas);
+    }
+
+    SECTION("Test ExpoLinearGradientDrawableLayer::onDraw - Rect not set") {
+        ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
+        auto canvas = volta::graphics::Canvas::makeTestingCanvas();
+        testExpoLinearGradientDrawableLayer.setRect(rect);
+        testExpoLinearGradientDrawableLayer.onDraw(canvas);
+    }
+
+    SECTION("Test ExpoLinearGradientDrawableLayer::onDraw - Path not set") {
+        ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
+        auto canvas = volta::graphics::Canvas::makeTestingCanvas();
+        testExpoLinearGradientDrawableLayer.setPath(path);
+        testExpoLinearGradientDrawableLayer.onDraw(canvas);
+    }
 
     SECTION("Test ExpoLinearGradientDrawableLayer::calculateGradient - Colors are empty") {
         ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
@@ -60,8 +54,8 @@ TEST_CASE("ExpoLinearGradientDrawableLayer") {
 
     SECTION("Test ExpoLinearGradientDrawableLayer::calculateGradient - MismatchedLocationsWithColors") {
         ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
-        std::vector<uint32_t> colors_more{0xFF0000, 0x00FF00, 0x0000FF, 0x000000}; 
-        testExpoLinearGradientDrawableLayer.setColors(colors_more);
+        std::vector<uint32_t> colorsMore{0xFF0000, 0x00FF00, 0x0000FF, 0x000000};
+        testExpoLinearGradientDrawableLayer.setColors(colorsMore);
         testExpoLinearGradientDrawableLayer.setLocations(locations);
         testExpoLinearGradientDrawableLayer.calculateGradient();
         REQUIRE(testExpoLinearGradientDrawableLayer.linearGradientShader_ == nullptr);
@@ -76,7 +70,7 @@ TEST_CASE("ExpoLinearGradientDrawableLayer") {
         testExpoLinearGradientDrawableLayer.calculateGradient();
         REQUIRE(testExpoLinearGradientDrawableLayer.linearGradientShader_ != nullptr);
     }
-    
+
     SECTION("Test ExpoLinearGradientDrawableLayer::calculateGradient - Locations are not empty") {
         ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
         REQUIRE(testExpoLinearGradientDrawableLayer.linearGradientShader_ == nullptr);
@@ -87,7 +81,7 @@ TEST_CASE("ExpoLinearGradientDrawableLayer") {
         testExpoLinearGradientDrawableLayer.calculateGradient();
         REQUIRE(testExpoLinearGradientDrawableLayer.linearGradientShader_ != nullptr);
     }
-    
+
     SECTION("Test ExpoLinearGradientDrawableLayer::setColors") {
         ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
         testExpoLinearGradientDrawableLayer.setColors(colors);
@@ -127,8 +121,11 @@ TEST_CASE("ExpoLinearGradientDrawableLayer") {
 
     SECTION("Test ExpoLinearGradientDrawableLayer::setSize") {
         ExpoLinearGradientDrawableLayer testExpoLinearGradientDrawableLayer{};
-        float w=10.0f, h=20.0f;
+        float w = 10.0f;
+        float h = 20.0f;
         testExpoLinearGradientDrawableLayer.setSize(w, h);
         REQUIRE(testExpoLinearGradientDrawableLayer.size_ == volta::graphics::Point{w, h});
     }
 }
+
+}  // namespace volta::react

package/kepler-compatibility.json

@@ -0,0 +1,7 @@
+{
+  "versions": {
+    "2.0.0": "/com.amazon.kepler.expo_linear_gradient_2@IExpoLinearGradient_0",
+    "2.0.9000000000": "/com.amazon.kepler.expo_linear_gradient_2@IExpoLinearGradient_0",
+    "2.0.9000000001": "/com.amazon.kepler.expo_linear_gradient_2@IExpoLinearGradient_0"
+  }
+}

package/package.json

@@ -1 +1 @@
-{"name": "@amazon-devices/expo-linear-gradient", "version": "2.0.1758683737+12.6.0", "description": "Provides a React component that renders a gradient view.", "main": "build/LinearGradient.js", "types": "build/LinearGradient.d.ts", "sideEffects": false, "scripts": {"build": "expo-module build", "clean": "expo-module clean", "lint": "expo-module lint", "test": "expo-module test", "expo-module": "expo-module"}, "kepler": {"temporary-alias-for-package": {"name": "expo-linear-gradient", "version": "12.6.0"}}, "keywords": ["react-native", "expo", "gradient"], "jest": {"preset": "expo-module-scripts"}, "repository": {"type": "git", "url": "https://github.com/expo/expo.git", "directory": "packages/expo-linear-gradient"}, "bugs": {"url": "https://github.com/expo/expo/issues"}, "author": "650 Industries, Inc.", "license": "See license in LICENSE", "homepage": "https://docs.expo.dev/versions/latest/sdk/linear-gradient/", "devDependencies": {"@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/react-native": "^11.3.0", "expo-module-scripts": "^3.0.0"}, "peerDependencies": {"expo": "*"}}
+{"name": "@amazon-devices/expo-linear-gradient", "version": "2.0.9000000001+12.6.0", "description": "Provides a React component that renders a gradient view.", "main": "build/LinearGradient.js", "types": "build/LinearGradient.d.ts", "sideEffects": false, "scripts": {"build": "expo-module build", "clean": "expo-module clean", "lint": "expo-module lint", "test": "expo-module test", "prepublishOnly": "expo-module prepublishOnly", "expo-module": "expo-module"}, "kepler": {"temporary-alias-for-package": {"name": "expo-linear-gradient", "version": "12.6.0"}}, "keywords": ["react-native", "expo", "gradient"], "jest": {"preset": "expo-module-scripts"}, "repository": {"type": "git", "url": "https://github.com/expo/expo.git", "directory": "packages/expo-linear-gradient"}, "bugs": {"url": "https://github.com/expo/expo/issues"}, "author": "650 Industries, Inc.", "license": "See license in LICENSE", "homepage": "https://docs.expo.dev/versions/latest/sdk/linear-gradient/", "devDependencies": {"@amazon-devices/react-linear-gradient": "^2.0.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/react-native": "^11.3.0", "expo-module-scripts": "^3.0.0"}, "peerDependencies": {"expo": "^50.0.0-alpha.1", "@amazon-devices/react-linear-gradient": "*"}}

package/react-native.config.js

@@ -12,6 +12,7 @@ module.exports = {
         autolink: {
           ExpoLinearGradientLib: {
             provider: 'system',
+            libraryName: 'libexpo-linear-gradient-2.so.2',
             components: ['ExpoLinearGradient'],
           },
         },

package/src/LinearGradient.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, processColor, ViewProps } from 'react-native';
+import { ViewProps, processColor, Platform } from 'react-native';
 
 import NativeLinearGradient from './NativeLinearGradient';
 import { NativeLinearGradientPoint } from './NativeLinearGradient.types';
@@ -77,6 +77,13 @@ export class LinearGradient extends React.Component<LinearGradientProps> {
         {...props}
         colors={Platform.select({
           web: colors as any,
+          // @amznmod_react - Platform.select's typing doesn't know about the "kepler" key (it's only aware
+          // of the built-in platforms like ios/android/web/default), so this line is
+          // flagged as an excess property. On Vega/Kepler, colors are consumed as raw
+          // strings by @amazon-devices/react-linear-gradient's kepler wrapper, so we pass them
+          // through without running processColor() (unlike the default native path).
+          // @ts-ignore
+          kepler: colors,
           default: colors.map(processColor),
         })}
         locations={resolvedLocations}

package/src/NativeLinearGradient.kepler.tsx

@@ -1,36 +1,35 @@
-import React from 'react'
-import { ViewProps, ColorValue } from 'react-native';
-// @ts-ignore
-import register from 'react-native/Libraries/Utilities/registerGeneratedViewConfig';
-import {
-  HostComponent,
-} from 'react-native';
+import LinearGradient from '@amazon-devices/react-linear-gradient';
+import React from 'react';
+import { ViewProps } from 'react-native';
+
+import { NativeLinearGradientPoint } from './NativeLinearGradient.types';
 
 interface NativeProps extends ViewProps {
-  colors: (number | ColorValue)[];
-  startPoint?: { x: number; y: number };
-  endPoint?: { x: number; y: number };
-  locations?: number[];
+  colors: string[];
+  startPoint?: NativeLinearGradientPoint | null;
+  endPoint?: NativeLinearGradientPoint | null;
+  locations?: number[] | null;
 }
 
-const NativeComponent = 'ExpoLinearGradient' as unknown as HostComponent<NativeProps>;
-
-register(NativeComponent, {
-  uiViewClassName: NativeComponent,
-  validAttributes: {
-    colors: true,
-    startPoint: true,
-    endPoint: true,
-    locations: true,
-  },
-});
+// @amznmod_react - Defaults mirror the old native `ExpoLinearGradient` component (start_ = {0.5, 0},
+// end_ = {0.5, 1} in kepler/ExpoLinearGradientDrawableLayer.h).
+const DEFAULT_START = { x: 0.5, y: 0 };
+const DEFAULT_END = { x: 0.5, y: 1 };
 
-/**
- * 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) {
-  return <NativeComponent {...props} />;
+export default function NativeLinearGradient({
+  colors,
+  startPoint,
+  endPoint,
+  locations,
+  ...viewProps
+}: NativeProps) {
+  return (
+    <LinearGradient
+      {...viewProps}
+      colors={colors}
+      start={startPoint ? { x: startPoint[0], y: startPoint[1] } : DEFAULT_START}
+      end={endPoint ? { x: endPoint[0], y: endPoint[1] } : DEFAULT_END}
+      locations={locations ?? undefined}
+    />
+  );
 }