[Animated] Cannot animate string transform properties (v0.19)

[Aashu-Dubey]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

It seems that after rn-web v0.19, it is recommended to use space-separated string functions on web instead of array, as we get these deprecation warnings

though they work fine on web, but we can't apply animations using them as of now, as I'm getting this error even when using the styles without animation on any Animated component

Expected behavior

animation on these new string functions should work fine, as it is working in case of array transform right now.

Steps to reproduce

You can clearly see the issue in the attached sandbox.

For a bigger example, I had the issue when I was recently trying to fix these warning on this sample app (Web Demo), there are few places where I'm using these styles and they are working fine, but can't use them where animations are needed.

Test case

https://codesandbox.io/s/rn-web-string-transform-bug-g1eqvy

Additional comments

Currently I'm using ...Platform.select({ web : { transform: 'rotate(45deg)' } }) approach to apply these styles, as they don't yet seems to be cross compatible with native platforms.

Do let me know if there's any particular approach to apply animations here or if this is something to be fix in future version of the package.

Thanks!

[necolas]

This is a bug in React Native too 34425

[dan-doyon-endear]

Here is patch that works for us in interim

diff --git a/node_modules/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTransform.js b/node_modules/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTransform.js
index 66072d9..b92ada1 100644
--- a/node_modules/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTransform.js
+++ b/node_modules/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTransform.js
@@ -16,7 +16,7 @@ import NativeAnimatedHelper from '../NativeAnimatedHelper';
 class AnimatedTransform extends AnimatedWithChildren {
   constructor(transforms) {
     super();
-    this._transforms = transforms;
+    this._transforms = transforms || [];
   }
   __makeNative() {
     this._transforms.forEach(transform => {

[necolas]

That doesn't "work", it just skips over the issue

[dan-doyon-endear]

That doesn't "work", it just skips over the issue

Fair enough, we're not doing a lot with transforms and it enabled us to migrate to latest version.

[necolas]

Aashu-Dubey in the test case, you're trying to stringify an animated object:

web: { transform: `rotate(${rotate})` }

That will never work.

What you can do is interpolate the whole string value (which will work in RN), or animate only therotate property (which will work only on web for now)

   const rotate = anim.current.interpolate({
     inputRange: [0, 1],
     outputRange: ["rotate(0deg)", "rotate(45deg)"]
   });

// ...

{ transform: rotate }

Or

   const rotate = anim.current.interpolate({
     inputRange: [0, 1],
     outputRange: ["0deg", "45deg"]
   });

// ...

web: { rotate: rotate }

[getusha]

What you can do is interpolate the whole string value (which will work in RN)

@necolas it is not working on Animated.View

It appears to be functioning correctly with the View component; however, it seems that it is not supported within the Animation.View

<Animated.View style={ {transform: 'scale(2)'}} >
    ....
</Animated.View>

[Gregoirevda]

Is there a way to combine 2+ animated values into a single transform string?

  const translateX = Animated.divide(Animated.multiply(progress, progressBarWidth), 2).interpolate({
    inputRange: [0, 1],
    outputRange: ['translateX(0)', 'translateX(1)'],
  });

  const scaleX = Animated.multiply(progress, progressBarWidth).interpolate({
    inputRange: [0, 1],
    outputRange: ['scaleX(0)', 'scaleX(1)'],
  });

[kevtronkrueger]

I'll second the question from @Gregoirevda
I do not understand what the intended future-friendly implementation is for 2+ animated objects on a single Animated.View.