import React from 'react' ; import { LinearGradient as ExpoLinearGradient } from 'expo-linear-gradient' ; import { styled , useDripsyTheme , DripsyFinalTheme } from '@dripsy/core' ; import { StyleSheet } from 'react-native' ; import hash from 'stable-hash' ; type Props = Omit < React . ComponentProps < typeof ExpoLinearGradient > , 'colors' > & { gradient ? : Extract < keyof DripsyFinalTheme [ 'linearGradients' ] , string > ; colors ? : ( keyof DripsyFinalTheme [ 'colors' ] | ( string & { } ) ) [ ] ; stretch ? : boolean ; } ; const Grad = styled ( React . memo ( function Gradient ( { style , stretch , gradient , colors , ... props } ) { const { colors : themeColors , linearGradients } = useDripsyTheme ( ) . theme ; const colorArrayToTheme = ( colorArray ) => { return ( colorArray ?. map ( ( color ) => ( themeColors ?. [ color ] as string ) ?? color ) ?? [ ] ) ; } ; let gradientColors = [ ] ; if ( gradient ) { if ( ! linearGradients ?. [ gradient ] ) { console . error ( '[dripsy/gradient] You passed a "gradient" prop "' + gradient + '", but your theme doesn\'t have a linearGradients.' + gradient + " field. If you want to use colors directly, use the 'colors' prop. Otherwise, add a `linearGradients` section to your theme." ) ; } else if ( ! Array . isArray ( linearGradients ?. [ gradient ] ) || linearGradients ?. [ gradient ] . some ( ( color ) => typeof color != 'string' ) ) { console . error ( '[dripsy/gradient] You passed a "gradient" prop "' + gradient + '". We looked for this in your theme.linearGradients.' + gradient + ", and it exists. However, it isn't a valid array of strings. Instead, it's this: " + JSON . stringify ( linearGradients ?. [ gradient ] ) + '. This is an invalid format.' ) ; } gradientColors = colorArrayToTheme ( linearGradients ? linearGradients [ gradient ] : [ ] ) ; } if ( colors ) { gradientColors = colorArrayToTheme ( colors ) ; } return ( < ExpoLinearGradient { ... props } style = { [ stretch && StyleSheet . absoluteFillObject , style ] } colors = { gradientColors } / > ) ; } , ( prev , next ) => hash ( prev ) === hash ( next ) ) ) ( ) ; export function Gradient ( props ) { return < Grad { ... props } / > ; }