How correctly path Animated Value to the SVG Text component
See original GitHub issueHow 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:
- Created 3 years ago
- Comments:7 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@grean looks like it is not possible with SVG text right now.
@troublediehard checkout the
<ReText>
component fromreact-native-redash
… it uses an uneditableTextInput
to display Animated Value https://wcandillon.github.io/react-native-redash/strings#retext