diff --git a/src/AnimatedGlow.tsx b/src/AnimatedGlow.tsx index f343f07..c224d68 100644 --- a/src/AnimatedGlow.tsx +++ b/src/AnimatedGlow.tsx @@ -39,6 +39,7 @@ const AnimatedGlow: FC = (props) => { style, isVisible = true, activeState: activeStateProp, + wrapperStyle: wrapperStyleProp, ...overrideProps } = props; @@ -94,13 +95,16 @@ const AnimatedGlow: FC = (props) => { const hasGlowLayers = (targetConfig.glowLayers?.length ?? 0) > 0; const useSkiaRenderer = useMemo(() => hasGlowLayers || hasAnimatedBorder, [hasGlowLayers, hasAnimatedBorder]); - const wrapperStyle = useMemo>(() => ({ - backgroundColor: useSkiaRenderer ? 'transparent' : backgroundColor, - borderWidth: useSkiaRenderer ? 0 : outlineWidth, - borderColor: useSkiaRenderer ? 'transparent' : (Array.isArray(borderColor) ? borderColor[0] : borderColor), - borderRadius: cornerRadius, - overflow: 'hidden', - }), [useSkiaRenderer, outlineWidth, borderColor, cornerRadius, backgroundColor]); + const wrapperStyle = useMemo>(() => [ + { + backgroundColor: useSkiaRenderer ? 'transparent' : backgroundColor, + borderWidth: useSkiaRenderer ? 0 : outlineWidth, + borderColor: useSkiaRenderer ? 'transparent' : (Array.isArray(borderColor) ? borderColor[0] : borderColor), + borderRadius: cornerRadius, + overflow: 'hidden', + }, + wrapperStyleProp, + ], [useSkiaRenderer, outlineWidth, borderColor, cornerRadius, backgroundColor, wrapperStyleProp]); const shouldRenderSkia = useSkiaRenderer && hasLaidOut && isVisible; diff --git a/src/animated-glow/types.ts b/src/animated-glow/types.ts index 8354320..1baf91c 100644 --- a/src/animated-glow/types.ts +++ b/src/animated-glow/types.ts @@ -54,6 +54,7 @@ export interface AnimatedGlowProps extends Partial { style?: StyleProp; isVisible?: boolean; activeState?: GlowEvent; + wrapperStyle?: StyleProp; } export type Layout = { width: number; height: number };