diff --git a/packages/react-native-reanimated/__tests__/InterpolateColor.test.tsx b/packages/react-native-reanimated/__tests__/InterpolateColor.test.tsx index 01ef7a3c4fbf..c44f49b916a0 100644 --- a/packages/react-native-reanimated/__tests__/InterpolateColor.test.tsx +++ b/packages/react-native-reanimated/__tests__/InterpolateColor.test.tsx @@ -123,6 +123,14 @@ describe('colors interpolation', () => { expect(interpolatedColor).toBe(`rgba(96, 144, 32, ${112 / 255})`); }); + it('handles tiny values', () => { + const colors = ['#00000000', '#ff802001']; + + // We don't want output like "rgba(4, 2, 0, 3.921568627450981e-7)": + const interpolatedColor = interpolateColor(0.0001, [0, 1], colors); + expect(interpolatedColor).toBe(`rgba(4, 2, 0, 0)`); + }); + function TestComponent() { const color = useSharedValue('#105060'); diff --git a/packages/react-native-reanimated/src/Colors.ts b/packages/react-native-reanimated/src/Colors.ts index 2b01b32668ae..cd577a68c543 100644 --- a/packages/react-native-reanimated/src/Colors.ts +++ b/packages/react-native-reanimated/src/Colors.ts @@ -522,7 +522,9 @@ export const rgbaColor = ( ): number | string => { 'worklet'; if (IS_WEB || !_WORKLET) { - return `rgba(${r}, ${g}, ${b}, ${alpha})`; + // Replace tiny values like 1.234e-11 with 0: + const safeAlpha = alpha < 0.001 ? 0 : alpha; + return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`; } const c = @@ -701,9 +703,10 @@ export function convertToRGBA(color: unknown): ParsedColorArray { export function rgbaArrayToRGBAColor(RGBA: ParsedColorArray): string { 'worklet'; + const alpha = RGBA[3] < 0.001 ? 0 : RGBA[3]; return `rgba(${Math.round(RGBA[0] * 255)}, ${Math.round( RGBA[1] * 255 - )}, ${Math.round(RGBA[2] * 255)}, ${RGBA[3]})`; + )}, ${Math.round(RGBA[2] * 255)}, ${alpha})`; } export function toLinearSpace(