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