import React from 'react' ; import { StyleProp , View , ViewStyle } from 'react-native' ; import { LinearGradientProps as OriginalLinearGradientProps } from 'react-native-linear-gradient' ; import { SpringAnimatedView } from '../../components/animated/spring/SpringAnimatedView' ; type LinearGradientPoint = OriginalLinearGradientProps [ 'start' ] | OriginalLinearGradientProps [ 'end' ] ; export interface LinearGradientProps extends Omit < OriginalLinearGradientProps , 'colors' > { animated ? : boolean ; colors : ( string | any ) [ ] ; style ? : StyleProp < ViewStyle > ; } const radToDeg = ( angle ) => angle * ( 180 / Math . PI ) ; const pointsToAngle = ( p1 , p2 ) => radToDeg ( Math . atan2 ( ( ( p2 && p2 . y ) || 0 ) - ( ( p1 && p1 . y ) || 0 ) , ( ( p2 && p2 . x ) || 0 ) - ( ( p1 && p1 . x ) || 0 ) ) ) + 90 ; const pointsToDeg = ( start , end ) => `${ pointsToAngle ( start , end ) }deg` ; const propsToLinearGradient = ( { colors , end , start , } ) => `linear-gradient(${ pointsToDeg ( start , end ) }, ${ colors . join ( ', ' ) })` ; export function LinearGradient ( props ) { const { animated , colors , end , start , style , ... otherProps } = props ; const ViewComponent = animated ? SpringAnimatedView : View ; return ( < ViewComponent { ... otherProps } style = { [ style , { backgroundImage : propsToLinearGradient ( { colors , end , start , } ) , } as any , ] } / > ) ; } export type SpringAnimatedLinearGradientProps = LinearGradientProps ; export function SpringAnimatedLinearGradient ( props ) { return < LinearGradient { ... props } animated / > ; }