question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How correctly path Animated Value to the SVG Text component

See original GitHub issue

How can I render animated value inside Svg Text component? I’ve tried it like this, but no luck.

import Svg, { Text } from "react-native-svg";
import Animated from "react-native-reanimated";

const AnimatedText = Animated.createAnimatedComponent(Text);

export default () => {
  const numberValue = new Animated.Value(10);
  return (
    <Svg style={styles.container} viewBox="0 0 212 239">
      <AnimatedText>{numberValue}</AnimatedText>
    </Svg>
  );
};

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
dimaportenkocommented, Apr 6, 2020

@grean looks like it is not possible with SVG text right now.

1reaction
mikedemaraiscommented, Mar 24, 2020

@troublediehard checkout the <ReText> component from react-native-redash… it uses an uneditable TextInput to display Animated Value https://wcandillon.github.io/react-native-redash/strings#retext

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I get SVG textPath to work with animated path?
Actual behavior: The text appears correctly on the path upon load, but when clicking update path, the text does not appear in the...
Read more >
A Guide to SVG Animations (SMIL)
Animating an element's attribute from one value to another over a duration of time, and specifying the end state: from , by ,...
Read more >
Animating text along a path (it's easy) - Rob O'Leary
It is easy to animate text along a path. You can use it to make some fun effects. All you need is some...
Read more >
SVG Animations with React Native - YouTube
Learn React Native Gestures and Animations at https://start-react-native.dev/Source code: ...
Read more >
SVG Animation With Text Tutorial | HTML CSS - YouTube
Let me know if you want to see more complex SVG animations with tools like bodymoving/lottie. Try to get creative and apply the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found