Using Animations

The following limitations and restrictions apply because of limitations with the Roku BrightScript language and the limited resources provided by some Roku devices. Keep them in mind if you are designing an app to run on Roku devices:

  • Except for FocusIn and FocusOut, AE animations for list items are not supported. In particular, ImageNodeIn animations on list items should be removed in AE. Transitioning through list items triggers focus animations to be played locally on the Roku device. All other AE animations are ignored.

    Note: You.i TV recommends that you avoid using unsupported AE animations. For example, if you use an unsupported animation for opacity, the animated element may never become visible.

  • Playing an animation in reverse is supported.
  • For performance reasons, we recommend you keep animations simple on Roku. For more information, see Roku Performance FAQ.
  • The XML files, which are part of Roku Component Library and used for export, contain Focus animations only.
  • Stop(), Pause(), Abort(), and Seek() are not supported.
  • As promises complete immediately on Cloud Solution instead of waiting for animation to finish, chaining animations are not supported on Cloud Solution. For example, the following chaining animation is not supported on Cloud Solution:

    this.outTimeline.play().then(() => this.inTimeline.play());
    

Animations started by the app logic finish immediately when the command is sent to the Roku client to play locally. This behavior ensures consistent scene export state. Because of this, it is not possible to rely on the timing of animations to drive the application logic of Roku apps.

Facebook React Native Animation Support on Cloud Solution

There is currently no support for rotation animations created using the Facebook React Native Animated API for the Cloud Solution. If you want to create a rotation animation for an activity spinner, you can use the default activity spinner available for the Cloud Solution.

The Cloud Solution currently supports animating position (translation), scale and opacity. Any other properties, such as color or rotation, are not supported.

Animations will not work on list items unless they are using the Cloud Solution component scrolling view. Gesture animations are not supported on Roku using Facebook React Native components.

While the default value for the interpolate property in React Native is extend, the Cloud Solution will always treat animations as if they are using clamp.

For more information, see Facebook React Native Supported Components.

Note You.i TV does not recommend any RN prop updates during animations for Cloud Solution as it may result in unexpected behavior. Any RN prop update should be done after the animations are completed.

Using the Native Driver

To allow animations to be enabled on Cloud Solution for specific components for View, Text, and Image, apply useNativeDriver: true. Only animation done using the native driver will work with the Cloud Solution. If you are using the same codebase for Cloud Solution as well as other target platforms, the native driver will only work on Cloud Solution builds, so you will have to conditionally set the property for all other platforms you are building.

For more information, see the following link to React Native Animated API documentation.