diff --git a/packages/react-strict-dom/src/native/modules/useStyleTransition.js b/packages/react-strict-dom/src/native/modules/useStyleTransition.js index 36609d26..f447083a 100644 --- a/packages/react-strict-dom/src/native/modules/useStyleTransition.js +++ b/packages/react-strict-dom/src/native/modules/useStyleTransition.js @@ -54,8 +54,15 @@ function canUseNativeDriver( if ( property === 'transform' && Array.isArray(value) && - // $FlowFixMe[incompatible-type] - !value.includes('skew') + // The transform value is an array of transform objects (e.g. + // `[{ skewX: '10deg' }]`), so detect skew by inspecting each object's + // keys. Skew transforms are not supported by the native driver. + !value.some( + // $FlowFixMe[incompatible-use] + (transform) => + transform != null && + (transform.skewX != null || transform.skewY != null) + ) ) { continue; } diff --git a/packages/react-strict-dom/tests/css/css-create-test.native.js b/packages/react-strict-dom/tests/css/css-create-test.native.js index 2067238f..e769825a 100644 --- a/packages/react-strict-dom/tests/css/css-create-test.native.js +++ b/packages/react-strict-dom/tests/css/css-create-test.native.js @@ -1746,6 +1746,32 @@ describe('css.create()', () => { ); }); + test('skew transform transition does not use the native driver', () => { + const skewStyles = css.create({ + skew: (transform) => ({ + transform: transform ?? 'skewX(0deg)', + transitionDelay: 0, + transitionDuration: 1000, + transitionProperty: 'transform', + transitionTimingFunction: 'ease-out' + }) + }); + let root; + act(() => { + root = create(); + }); + act(() => { + root.update(); + }); + // Skew transforms are not supported by the native animation driver. + expect(Animated.timing).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ + useNativeDriver: false + }) + ); + }); + test('width transition', () => { let root; // width transition