DEV Community

Murphy Randle
Murphy Randle

Posted on • Originally published at mrmurphy.dev on

Animating Text Content with Redash and Reanimated 2

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.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs