Expo Linear Gradient

import { LinearGradient } from "expo-linear-gradient";

import { 
  LinearGradient, 
  LinearGradientProps, 
  LinearGradientPoint, 
  NativeLinearGradientPoint 
} from "expo-linear-gradient";

import React from 'react';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <LinearGradient
      colors={['#4c669f', '#3b5998', '#192f6a']}
      style={{ flex: 1 }}
    >
      {/* Your content here */}
    </LinearGradient>
  );
}

export class LinearGradient extends Component<LinearGradientProps> {
  render(): React.JSX.Element;
}

export interface LinearGradientProps extends ViewProps {
  /**
   * A readonly 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).
   *
   * For TypeScript to know the provided array has 2 or more values, it should be provided "inline" or typed `as const`.
   */
  colors: readonly [ColorValue, ColorValue, ...ColorValue[]];
  
  /**
   * A readonly 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?: readonly [number, number, ...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;

  /**
   * Enables or disables paint dithering. Dithering can reduce the gradient color banding issue.
   * Setting `false` may improve gradient rendering performance.
   * @default true
   * @platform android
   */
  dither?: boolean;
}

import React from 'react';
import { LinearGradient } from 'expo-linear-gradient';

// Basic gradient with three colors
<LinearGradient
  colors={['red', 'yellow', 'green']}
  style={{ height: 200 }}
/>

// Diagonal gradient with custom start/end points
<LinearGradient
  colors={['#ff7e5f', '#feb47b']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 1 }}
  style={{ height: 200 }}
/>

// Gradient with custom color stops
<LinearGradient
  colors={['blue', 'purple', 'pink']}
  locations={[0.1, 0.7, 1.0]}
  style={{ height: 200 }}
/>

// Android-specific dithering control
<LinearGradient
  colors={['#000', '#333', '#666']}
  dither={false}
  style={{ height: 200 }}
/>

// Using PlatformColor and typed color arrays
import { PlatformColor } from 'react-native';

const gradientColors = [
  '#ff0000',
  PlatformColor('systemBlue'),
  'rgba(0, 255, 0, 0.8)'
] as const;

<LinearGradient
  colors={gradientColors}
  style={{ height: 200 }}
/>

/**
 * 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 NativeLinearGradientPoint = [x: number, y: number];

// Object format
<LinearGradient
  colors={['red', 'blue']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 1 }}
/>

// Array format
<LinearGradient
  colors={['red', 'blue']}
  start={[0, 0]}
  end={[1, 1]}
/>

// Common gradient directions
const directions = {
  vertical: { start: { x: 0.5, y: 0 }, end: { x: 0.5, y: 1 } },
  horizontal: { start: { x: 0, y: 0.5 }, end: { x: 1, y: 0.5 } },
  diagonal: { start: { x: 0, y: 0 }, end: { x: 1, y: 1 } },
  radialLike: { start: { x: 0.5, y: 0.5 }, end: { x: 1, y: 1 } }
};

/**
 * Generates CSS linear-gradient background-image string for web platform
 * @param colors - Array of gradient colors
 * @param locations - Optional color stop locations (0-1)
 * @param startPoint - Optional gradient start point
 * @param endPoint - Optional gradient end point
 * @param width - Optional width for angle calculation (default: 1)
 * @param height - Optional height for angle calculation (default: 1)
 * @returns CSS linear-gradient string
 */
export function getLinearGradientBackgroundImage(
  colors: readonly ColorValue[],
  locations?: readonly number[] | null,
  startPoint?: NativeLinearGradientPoint | null,
  endPoint?: NativeLinearGradientPoint | null,
  width?: number,
  height?: number
): string;

// Note: Direct import from build directory required
import { getLinearGradientBackgroundImage } from 'expo-linear-gradient/build/NativeLinearGradient.web';

// Generate CSS gradient string
const cssGradient = getLinearGradientBackgroundImage(
  ['red', 'blue'],
  [0, 1],
  [0, 0],
  [1, 1],
  300,
  200
);
// Returns: "linear-gradient(135deg, red 0%, blue 100%)"

/**
 * Converts ColorValue to rgba string format for web usage
 * @param color - React Native color value
 * @param opacity - Opacity multiplier (default: 1)
 * @returns rgba string or void if color is null/invalid
 */
export function normalizeColor(color?: ColorValue, opacity?: number): void | string;

// Note: Direct import from build directory required
import { normalizeColor } from 'expo-linear-gradient/build/normalizeColor';

// Convert various color formats
const rgbaString1 = normalizeColor('#ff0000'); // "rgba(255,0,0,1.00)"
const rgbaString2 = normalizeColor('red', 0.5); // "rgba(255,0,0,0.50)"
const webColor = normalizeColor('currentColor'); // "currentColor" (preserved)