Disable react-native-reanimated globally for tests

Question

We'd like to disable react-native-reanimated animations for tests based on a context variable, especially when we do UI snapshot tests to avoid flakes. For example, if there's a loading spinner, we don't want variations of its spinning animation lifecycle to be diffed and considered a change in the UI.

We've tried to wrap useAnimatedStyle in our own hook to pass the updater as ()=>({}) if we're in a test env, but there are a variety of issues that we're calling a JS from the UI thread:

const useLibraryAnimatedStyle = <T extends AnimatedStyle>(
  updater: () => T,
  deps?: DependencyList | null,
) => {
  const { areAnimationsEnabled } = useLibraryGlobals();
  const enabled = useSharedValue(areAnimationsEnabled);

  useEffect(() => {
    if (enabled.value !== areAnimationsEnabled) {
      enabled.value = areAnimationsEnabled;
    }
  }, [areAnimationsEnabled, enabled]);

  return useAnimatedStyle(enabled.value ? updater : () => ({}), deps);
};

Error: Tried to synchronously call anonymous function from a different thread

Wrapping updater as a worklet didn't seem to work, because the useAnimatedStyle does that anyway according to the Reanimated documentation.

score 0 · Answer 1 · answered Jan 25 '23 at 19:28

Turned out that I did have to add "worklet" to the updater i was passing in:

const animatedStyles = useLibraryAnimatedStyle(() => {
  "worker";

  return {
    transform: [{ rotateZ: "100deg" }],
  };
});

vs what you normally pass to useAnimatedStyle

const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ rotateZ: "100deg" }],
});

Disable react-native-reanimated globally for tests

1 Answers1