Animations are not working

[iismato]

Steps to reproduce:

• clone repo
• add animation
• call npx expo prebuild --clean
• call `npx expo run:ios --device' (running it on iphone 14)

Desired scenario: The text should rotate in loop.
Actual result: The text does not rotate.

This is my code:

import React, { useState } from "react";
import { StyleSheet } from "react-native";
import {
  ViroARScene,
  ViroText,
  ViroTrackingStateConstants,
  ViroARSceneNavigator,
  ViroTrackingReason,
  ViroAnimations,
} from "@reactvision/react-viro";

const HelloWorldSceneAR = () => {
  const [text, setText] = useState("Hello World!");

  function onInitialized(state: any, reason: ViroTrackingReason) {
    console.log("AR tracking state:", state, reason);
    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
      setText("AR Ready!");
    } else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      setText("AR Unavailable");
    } else {
      setText("Initializing AR...");
    }
  }

  return (
    <ViroARScene onTrackingUpdated={onInitialized}>
      <ViroText
        text={text}
        scale={[0.5, 0.5, 0.5]}
        position={[0, 0, -1]}
        style={styles.helloWorldTextStyle}
        animation={{
          name: "loopRotate",
          run: true,
          loop: true
        }}
      />
    </ViroARScene>
  );
};

export default () => {
  return (
    <ViroARSceneNavigator
      autofocus={true}
      initialScene={{
        scene: HelloWorldSceneAR,
      }}
      style={styles.f1}
    />
  );
};

ViroAnimations.registerAnimations({
  loopRotate:{
    properties:{
      rotateY: "+=45"
    },
    easing: "Linear",
    duration: 200
  },
});

var styles = StyleSheet.create({
  f1: { flex: 1 },
  helloWorldTextStyle: {
    fontFamily: "Arial",
    fontSize: 30,
    color: "#ffffff",
    textAlignVertical: "center",
    textAlign: "center",
  },
});

[ultramathi]

If your ViroText shows up but never rotates, the most common cause right now is not your animation code — it’s that rotation/position/scale props aren’t being applied on some Android + @reactvision/react-viro versions / architectures, so an animation that changes rotateY won’t do anything either.

There’s an open/known report that in versions newer than 2.41.6, position/rotation/scale can fail in AR on Android (especially on the “old architecture”), and even on the new architecture it may not apply on the first render unless you “poke” the prop later (e.g., setTimeout + state update).

Quick way to confirm

Temporarily hard-code a rotation (no animation):

<ViroText
text="Test"
position={[0, 0, -1]}
rotation={[0, 45, 0]}
/>

If that also doesn’t rotate, you’re hitting the transform/props issue (so animations won’t rotate either).

Fix 1 (workaround): start the animation after a short delay / after tracking is normal

This forces a second prop-application pass, which is the workaround described in the bug report.

import React, { useEffect, useState } from "react";
import { StyleSheet } from "react-native";
import {
ViroARScene,
ViroText,
ViroTrackingStateConstants,
ViroARSceneNavigator,
ViroTrackingReason,
ViroAnimations,
} from "@reactvision/react-viro";

ViroAnimations.registerAnimations({
loopRotate: {
properties: { rotateY: "+=45" }, // valid anim property :contentReference[oaicite:2]{index=2}
easing: "Linear",
duration: 200,
},
});

const HelloWorldSceneAR = () => {
const [text, setText] = useState("Hello World!");
const [runAnim, setRunAnim] = useState(false);

function onInitialized(state: any, reason: ViroTrackingReason) {
if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
setText("AR Ready!");
// kick animation slightly later (workaround)
setTimeout(() => setRunAnim(true), 800);
}
}

return (

<ViroText
text={text}
scale={[0.5, 0.5, 0.5]}
position={[0, 0, -1]}
style={styles.helloWorldTextStyle}
animation={{ name: "loopRotate", run: runAnim, loop: true }}
/>

);
};

export default () => (
<ViroARSceneNavigator
autofocus={true}
initialScene={{ scene: HelloWorldSceneAR }}
style={styles.f1}
/>
);

const styles = StyleSheet.create({
f1: { flex: 1 },
helloWorldTextStyle: {
fontFamily: "Arial",
fontSize: 30,
color: "#ffffff",
textAlignVertical: "center",
textAlign: "center",
},
});

Fix 2: change versions / architecture (more “real” fix)

The report says 2.41.6 works for them on Android where newer versions didn’t.

Also, newer releases mention prop-related fixes and stability improvements, so upgrading to the latest may help in your setup.

If you tell me (1) Android or iOS, (2) your @reactvision/react-viro version, and (3) Expo or bare RN, I can point you to the most likely “best” combo. But the setTimeout + state workaround above usually unblocks rotation immediately.

One more thing (visibility)

Rotating flat text around Y can be subtle. If you want an obvious spin, try rotateZ in the animation, or give the text depth with extrusionDepth so Y-rotation is visually clear. (rotateY/rotateZ are valid anim props)