diff --git a/packages/react-native/Libraries/Animated/NativeAnimatedHelper.js b/packages/react-native/Libraries/Animated/NativeAnimatedHelper.js index 2dd197617641be..e96cbd75c16e7e 100644 --- a/packages/react-native/Libraries/Animated/NativeAnimatedHelper.js +++ b/packages/react-native/Libraries/Animated/NativeAnimatedHelper.js @@ -562,10 +562,13 @@ function transformDataType(value: number | string): number | string { if (typeof value !== 'string') { return value; } - if (/deg$/.test(value)) { + + // Normalize degrees and radians to a number expressed in radians + if (value.endsWith('deg')) { const degrees = parseFloat(value) || 0; - const radians = (degrees * Math.PI) / 180.0; - return radians; + return (degrees * Math.PI) / 180.0; + } else if (value.endsWith('rad')) { + return parseFloat(value) || 0; } else { return value; } diff --git a/packages/react-native/Libraries/Animated/__tests__/Interpolation-test.js b/packages/react-native/Libraries/Animated/__tests__/Interpolation-test.js index 0e8e342da760ea..9726b919121898 100644 --- a/packages/react-native/Libraries/Animated/__tests__/Interpolation-test.js +++ b/packages/react-native/Libraries/Animated/__tests__/Interpolation-test.js @@ -349,4 +349,20 @@ describe('Interpolation', () => { expect(interpolation(1e-12)).toBe('rgba(0, 0, 0, 0)'); expect(interpolation(2 / 3)).toBe('rgba(0, 0, 0, 0.667)'); }); + + it.each([ + ['radians', ['1rad', '2rad'], [1, 2]], + ['degrees', ['90deg', '180deg'], [Math.PI / 2, Math.PI]], + ['numbers', [1024, Math.PI], [1024, Math.PI]], + ['unknown', ['5foo', '10foo'], ['5foo', '10foo']], + ])( + 'should convert %s to numbers in the native config', + (_, outputRange, expected) => { + const config = new AnimatedInterpolation( + {}, + {inputRange: [0, 1], outputRange}, + ).__getNativeConfig(); + expect(config.outputRange).toEqual(expected); + }, + ); });