@amazon-devices/expo-linear-gradient 2.0.9000000000 → 2.0.9000000002

package/README.kepler.md

@@ -67,3 +67,4 @@ Check out the dedicated documentation page for info about this library, API refe
 | Package version  | Based on | @amazon-devices/react-native-kepler version |
 | ---------------- | -------- | --------------------------------- |
 | 2.0.x    | expo-linear-gradient v12.6.0 | 2.0.x            |
+| 2.0.x    | expo-linear-gradient v12.6.0 | 4.0.x+rn0.83.0   |

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-compatibility.json

@@ -0,0 +1,8 @@
+{
+  "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",
+    "2.0.9000000002": "/com.amazon.kepler.expo_linear_gradient_2@IExpoLinearGradient_0"
+  }
+}

package/package.json

@@ -1 +1 @@
-{"name": "@amazon-devices/expo-linear-gradient", "version": "2.0.9000000000+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": {"@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.9000000002+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}
+    />
+  );
 }