Skip to content

Commit

Permalink
Fix normalization of degrees in AnimatedInterpolation
Browse files Browse the repository at this point in the history
Summary:
This broke while changing the AnimatedInterpolation back in D40571873 and D40632443, as I assumed the native side would be able to correctly handle values such as '1rad'. However these were being sent over as strings, and were thus using the string interpolation path, which does not work here.

Instead, handle both `deg` and `rad` explicitly when generating the config in JS.

Resolves issue facebook#36608

Changelog: [General][Fixed] Resolves Animated.Value.interpolate results in NaN when output is in radians

Differential Revision: D44406034

fbshipit-source-id: ea95f557d594a1f55bedd7c5e3a95ef36bc68ff2
  • Loading branch information
javache authored and facebook-github-bot committed Mar 26, 2023
1 parent 92b8981 commit dcf8867
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -562,10 +562,13 @@ function transformDataType(value: number | string): number | string {
if (typeof value !== 'string') {
return value;
}

// Normalize degrees and radians to a number expressed in radians
if (/deg$/.test(value)) {
const degrees = parseFloat(value) || 0;
const radians = (degrees * Math.PI) / 180.0;
return radians;
return (degrees * Math.PI) / 180.0;
} else if (/rad$/.test(value)) {
return parseFloat(value) || 0;
} else {
return value;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
);
});

0 comments on commit dcf8867

Please sign in to comment.