DEV Community

loading...

Animating Text Content with Redash and Reanimated 2

Murphy Randle
I’m a professional software writer specialized in Web technologies and engaged in indie application development. I consider myself to be a man of faith. I pursue honesty, integrity, and compassion.
Originally published at mrmurphy.dev on ・1 min read

On Cyber Monday I sprang for William Candillon's course on animation with React Native. I love his style. And I like how beautiful his examples are. However, it took me a few minutes to understand that he's basing all his work on two libraries, Redash, and Reanimated. These tools are super powerful, and I'm off to a strong start building lovely app animations, but I ran into a couple of problems while getting started.

  1. TypeError: global.__reanimatedWorkletInit is not a function

I got this error the first time I tried to use Redash. I had installed both it and reanimated, imported a hook, and tried to use it. But the app immediately crashed. I resolved it by importing reanimated at the top of the file:

import "react-native-reanimated";
import ...
Enter fullscreen mode Exit fullscreen mode
  1. Animated string values would cause a rerender in the UI.

With useDerivedValue I transitioned a string into existence by animating its length. However, when I passed the Animation.SharedValue<string> to a Retext component and tested it out in my app, there was no animation.

Thanks to an answer this github issue I fixed that problem by whitelisting text as an animatable prop:

Animated.addWhitelistedNativeProps({ text: true });
Enter fullscreen mode Exit fullscreen mode

After adding that line to the top of the file, my views updated without a problem as the text animated.

Discussion (0)