@amazon-devices/expo-linear-gradient 2.0.1758683737

package/src/LinearGradient.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { Platform, processColor, ViewProps } from 'react-native';
+
+import NativeLinearGradient from './NativeLinearGradient';
+import { NativeLinearGradientPoint } from './NativeLinearGradient.types';
+
+// @needsAudit
+/**
+ * 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;
+
+// @needsAudit
+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 class LinearGradient extends React.Component<LinearGradientProps> {
+  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 as any,
+          default: colors.map(processColor),
+        })}
+        locations={resolvedLocations}
+        startPoint={_normalizePoint(start)}
+        endPoint={_normalizePoint(end)}
+      />
+    );
+  }
+}
+
+function _normalizePoint(
+  point: LinearGradientPoint | null | undefined
+): NativeLinearGradientPoint | undefined {
+  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];
+}

package/src/NativeLinearGradient.android.tsx

@@ -0,0 +1,49 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { NativeLinearGradientProps } from './NativeLinearGradient.types';
+
+export default function NativeLinearGradient({
+  colors,
+  locations,
+  startPoint,
+  endPoint,
+  children,
+  style,
+  ...props
+}: NativeLinearGradientProps): React.ReactElement {
+  // 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');

package/src/NativeLinearGradient.ios.tsx

@@ -0,0 +1,10 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+
+import { NativeLinearGradientProps } from './NativeLinearGradient.types';
+
+const NativeLinearGradient = requireNativeViewManager(
+  'ExpoLinearGradient'
+) as React.FC<NativeLinearGradientProps>;
+
+export default NativeLinearGradient;

package/src/NativeLinearGradient.kepler.tsx

@@ -0,0 +1,36 @@
+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';
+
+interface NativeProps extends ViewProps {
+  colors: (number | ColorValue)[];
+  startPoint?: { x: number; y: number };
+  endPoint?: { x: number; y: number };
+  locations?: number[];
+}
+
+const NativeComponent = 'ExpoLinearGradient' as unknown as HostComponent<NativeProps>;
+
+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: NativeProps) {
+  return <NativeComponent {...props} />;
+}

package/src/NativeLinearGradient.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { NativeLinearGradientProps } from './NativeLinearGradient.types';
+
+// 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: NativeLinearGradientProps): React.ReactElement {
+  const { colors, locations, startPoint, endPoint, ...viewProps } = props;
+  console.warn('LinearGradient is not available on this platform');
+  return <View {...(viewProps as any)} />;
+}

package/src/NativeLinearGradient.types.ts

@@ -0,0 +1,21 @@
+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];

package/src/NativeLinearGradient.web.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { NativeLinearGradientPoint, NativeLinearGradientProps } from './NativeLinearGradient.types';
+import { normalizeColor } from './normalizeColor';
+
+export default function NativeLinearGradient({
+  colors,
+  locations,
+  startPoint,
+  endPoint,
+  ...props
+}: NativeLinearGradientProps): React.ReactElement {
+  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: number[] | string[],
+  locations?: number[] | null,
+  startPoint?: NativeLinearGradientPoint | null,
+  endPoint?: NativeLinearGradientPoint | null,
+  width: number = 1,
+  height: number = 1
+) {
+  const gradientColors = calculateGradientColors(colors, locations);
+  const angle = calculatePseudoAngle(width, height, startPoint, endPoint);
+  return `linear-gradient(${angle}deg, ${gradientColors.join(', ')})`;
+}
+
+function calculatePseudoAngle(
+  width: number,
+  height: number,
+  startPoint?: NativeLinearGradientPoint | null,
+  endPoint?: NativeLinearGradientPoint | null
+) {
+  const getControlPoints = (): NativeLinearGradientPoint[] => {
+    let correctedStartPoint: NativeLinearGradientPoint = [0, 0];
+    if (Array.isArray(startPoint)) {
+      correctedStartPoint = [
+        startPoint[0] != null ? startPoint[0] : 0.0,
+        startPoint[1] != null ? startPoint[1] : 0.0,
+      ];
+    }
+    let correctedEndPoint: NativeLinearGradientPoint = [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: number[] | string[], locations?: number[] | null) {
+  return colors.map((color: number | string, index: number): string | void => {
+    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;
+  });
+}

package/src/normalizeColor.ts

@@ -0,0 +1,32 @@
+/**
+ * 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: string): boolean =>
+  color === 'currentcolor' ||
+  color === 'currentColor' ||
+  color === 'inherit' ||
+  color.indexOf('var(') === 0;
+
+export function normalizeColor(color?: number | string, opacity: number = 1): void | string {
+  if (color == null) return;
+
+  if (typeof color === 'string' && isWebColor(color)) {
+    return color;
+  }
+
+  const colorInt = processColor(color) as number | undefined;
+  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})`;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+}