Animated transform styles do not work on Android when `useNativeDriver` is `true`. #13550

lynndylanhurley · 2017-04-17T23:30:09Z

Description

Animated transform styles do not work on Android when useNativeDriver is true.

In my code, I'm trying to animate the transition between two screens using the transform style attr. This works as expected in iOS, but not on Android (see attached).

One more thing to note is that I have an addListener event attached to the Animated.Value that fires on iOS but never fires on Android.

iOS (working)

Android (not working)

Reproduction Steps and Sample Code

Code Sample

// render
{oldChildren ? (
  <View style={[ss.container, ss.animContainer, style]}>
    <Animated.View
      style={{
        ...styles.animPane,
        ...transition.oldChild(pos),
      }}
    >
      <View style={styles.container}>
        {oldChildren}
      </View>
    </Animated.View>

    <Animated.View
      style={{
        ...styles.animPane,
        ...transition.newChild(pos),
      }}
    >
      <View style={styles.container}>
        {children}
      </View>
    </Animated.View>
  </View>
) : (
  <View style={[ss.container, style]}>
    {children}
  </View>
)}

// functions for generating the transform styles
export function oldChild(pos) {
  return {
    transform: [{
      translateX: pos.interpolate({
        inputRange: [0, 0.8],
        outputRange: [0, 400],
      })
    }, {
      scale: pos.interpolate({
        inputRange: [0, 0.8],
        outputRange: [1, 0.7],
      }),
    }, { perspective: 1000 }],
    opacity: pos.interpolate({
      inputRange: [0, 0.8],
      outputRange: [1, 0]
    })
  };
}

export function newChild(pos) {
  return {
    transform: [{
      translateX: pos.interpolate({
        inputRange: [0, 1],
        outputRange: [-400, 0],
      }),
    }, {
      scale: pos.interpolate({
        inputRange: [0, 1],
        outputRange: [1.1, 1],
      }),
    }, { perspective: 1000 }],
    opacity: pos.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1]
    })
  };
}

// code to start the animation
Animated.timing(this.state.pos, {
  toValue: 1,
  duration: 300,
  easing: Easing.elastic(0.7),
  useNativeDriver: true, // <-- works when this is set to false
}).start();

Additional Information

React Native version: 0.43.3, 0.44.0-rc.0
Platform: Android
Development Operating System: MacOS
Dev tools: Genymotion

Thanks!!!

The text was updated successfully, but these errors were encountered:

lynndylanhurley · 2017-04-17T23:33:55Z

#13522 had the same issue and suggested adding { perspective: 1000 } to each transform. I tried with and without { perspective: 1000 } and I get the same results either way.

lynndylanhurley · 2017-04-17T23:41:25Z

adb is showing a bunch of errors:

04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: Unable to update properties for view tag 99
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: com.facebook.react.uimanager.IllegalViewOperationException: ViewManager for tag 99 could not be found
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.uimanager.NativeViewHierarchyManager.resolveViewManager(NativeViewHierarchyManager.java:106)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.uimanager.NativeViewHierarchyManager.updateProperties(NativeViewHierarchyManager.java:123)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.uimanager.UIImplementation.synchronouslyUpdateViewOnUIThread(UIImplementation.java:240)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.animated.PropsAnimatedNode.updateView(PropsAnimatedNode.java:69)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.animated.NativeAnimatedNodesManager.updateNodes(NativeAnimatedNodesManager.java:469)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.animated.NativeAnimatedNodesManager.runUpdates(NativeAnimatedNodesManager.java:380)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.animated.NativeAnimatedModule$1.doFrameGuarded(NativeAnimatedModule.java:117)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:31)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:129)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:107)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:869)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.view.Choreographer.doCallbacks(Choreographer.java:683)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.view.Choreographer.doFrame(Choreographer.java:616)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:857)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.os.Handler.handleCallback(Handler.java:751)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.os.Handler.dispatchMessage(Handler.java:95)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.os.Looper.loop(Looper.java:154)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.app.ActivityThread.main(ActivityThread.java:6077)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at java.lang.reflect.Method.invoke(Native Method)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:865)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:755)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: Unable to update properties for view tag 130
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: com.facebook.react.uimanager.IllegalViewOperationException: ViewManager for tag 130 could not be found
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.uimanager.NativeViewHierarchyManager.resolveViewManager(NativeViewHierarchyManager.java:106)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.uimanager.NativeViewHierarchyManager.updateProperties(NativeViewHierarchyManager.java:123)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.uimanager.UIImplementation.synchronouslyUpdateViewOnUIThread(UIImplementation.java:240)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.animated.PropsAnimatedNode.updateView(PropsAnimatedNode.java:69)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.animated.NativeAnimatedNodesManager.updateNodes(NativeAnimatedNodesManager.java:469)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.animated.NativeAnimatedNodesManager.runUpdates(NativeAnimatedNodesManager.java:380)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.animated.NativeAnimatedModule$1.doFrameGuarded(NativeAnimatedModule.java:117)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:31)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:129)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:107)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:869)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.view.Choreographer.doCallbacks(Choreographer.java:683)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.view.Choreographer.doFrame(Choreographer.java:616)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:857)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.os.Handler.handleCallback(Handler.java:751)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.os.Handler.dispatchMessage(Handler.java:95)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.os.Looper.loop(Looper.java:154)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at android.app.ActivityThread.main(ActivityThread.java:6077)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at java.lang.reflect.Method.invoke(Native Method)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:865)
04-17 19:20:53.410  6405  6405 E NativeViewHierarchyManager: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:755)
04-17 19:20:53.423  6405  6405 E NativeViewHierarchyManager: Unable to update properties for view tag 99

lynndylanhurley · 2017-04-18T00:19:21Z

Workaround

Set backgroundColor: "transparent" to the views that have the animated transform styles.

This totally solves the issue but I'm leaving this open because it seems like a bug.

janicduplessis · 2017-04-19T18:14:47Z

Thanks for reporting this. I'm pretty sure this happens because of view optimisations we do on android, adding a background color prevents the view from being optimized away. I have a PR up to fix this but has not been merged yet. #12983

hramos · 2017-07-25T22:35:53Z

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

pintocarlos · 2018-05-31T20:12:25Z

This is still happening. I get this error when trying to perform a translationY transformation on Android.
It runs perfectly fine on iOS.

janicduplessis added the Animated label Apr 19, 2017

hramos added the Icebox label Jul 25, 2017

hramos closed this as completed Jul 25, 2017

Slessi mentioned this issue Dec 19, 2017

Custom Transitioner only animates once when useNativeDriver is true react-navigation/react-navigation#3157

Closed

facebook locked as resolved and limited conversation to collaborators Jul 25, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 25, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Animated transform styles do not work on Android when `useNativeDriver` is `true`. #13550

Animated transform styles do not work on Android when `useNativeDriver` is `true`. #13550

lynndylanhurley commented Apr 17, 2017 •

edited

Loading

lynndylanhurley commented Apr 17, 2017

lynndylanhurley commented Apr 17, 2017 •

edited

Loading

lynndylanhurley commented Apr 18, 2017

janicduplessis commented Apr 19, 2017 •

edited

Loading

hramos commented Jul 25, 2017 •

edited

Loading

pintocarlos commented May 31, 2018

Animated transform styles do not work on Android when useNativeDriver is true. #13550

Animated transform styles do not work on Android when useNativeDriver is true. #13550

Comments

lynndylanhurley commented Apr 17, 2017 • edited Loading

Description

iOS (working)

Android (not working)

Reproduction Steps and Sample Code

Code Sample

Additional Information

lynndylanhurley commented Apr 17, 2017

lynndylanhurley commented Apr 17, 2017 • edited Loading

lynndylanhurley commented Apr 18, 2017

Workaround

janicduplessis commented Apr 19, 2017 • edited Loading

hramos commented Jul 25, 2017 • edited Loading

pintocarlos commented May 31, 2018

Animated transform styles do not work on Android when `useNativeDriver` is `true`. #13550

Animated transform styles do not work on Android when `useNativeDriver` is `true`. #13550

lynndylanhurley commented Apr 17, 2017 •

edited

Loading

lynndylanhurley commented Apr 17, 2017 •

edited

Loading

janicduplessis commented Apr 19, 2017 •

edited

Loading

hramos commented Jul 25, 2017 •

edited

Loading