1import * as React from 'react'; 2import { ViewProps } from 'react-native'; 3import { NativeLinearGradientPoint } from './NativeLinearGradient.types'; 4/** 5 * An object `{ x: number; y: number }` or array `[x, y]` that represents the point 6 * at which the gradient starts or ends, as a fraction of the overall size of the gradient ranging 7 * from `0` to `1`, inclusive. 8 */ 9export type LinearGradientPoint = { 10 /** 11 * A number ranging from `0` to `1`, representing the position of gradient transformation. 12 */ 13 x: number; 14 /** 15 * A number ranging from `0` to `1`, representing the position of gradient transformation. 16 */ 17 y: number; 18} | NativeLinearGradientPoint; 19export type LinearGradientProps = ViewProps & { 20 /** 21 * An array of colors that represent stops in the gradient. At least two colors are required 22 * (for a single-color background, use the `style.backgroundColor` prop on a `View` component). 23 */ 24 colors: string[]; 25 /** 26 * An array that contains `number`s ranging from `0` to `1`, inclusive, and is the same length as the `colors` property. 27 * Each number indicates a color-stop location where each respective color should be located. 28 * If not specified, the colors will be distributed evenly across the gradient. 29 * 30 * For example, `[0.5, 0.8]` would render: 31 * - the first color, solid, from the beginning of the gradient view to 50% through (the middle); 32 * - a gradient from the first color to the second from the 50% point to the 80% point; and 33 * - the second color, solid, from the 80% point to the end of the gradient view. 34 * 35 * > The color-stop locations must be ascending from least to greatest. 36 * @default [] 37 */ 38 locations?: number[] | null; 39 /** 40 * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will start `10%` from the left and `20%` from the top. 41 * 42 * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the starting position. 43 * @default { x: 0.5, y: 0.0 } 44 */ 45 start?: LinearGradientPoint | null; 46 /** 47 * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will end `10%` from the left and `20%` from the bottom. 48 * 49 * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the end position. 50 * @default { x: 0.5, y: 1.0 } 51 */ 52 end?: LinearGradientPoint | null; 53}; 54/** 55 * Renders a native view that transitions between multiple colors in a linear direction. 56 */ 57export declare class LinearGradient extends React.Component<LinearGradientProps> { 58 render(): JSX.Element; 59} 60//# sourceMappingURL=LinearGradient.d.ts.map