React-native-reanimated: How correctly path Animated Value to the SVG Text component

[troublediehard]

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>
  );
};

[mikedemarais]

@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

[troublediehard]

@mikedemarais thanks, not sure if it something I'm looking for, but I'll check it anyway.

[grean]

Have you finally found something that helps you displaying animated string value to text on svg ?

[troublediehard]

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

[jkadamczyk]

This is not a direct issue of reanimated. This is more of Stack Overflow like question. That's why I am closing this issue.

[troublediehard]

hi @jkadamczyk, is it issue of react-native-svg. On what side it is possible to fix, what do you think?

[jkadamczyk]

@troublediehard I am not sure whether this is an issue of either react-native-svg nor react-native-reanimated. But as far as the question is concerned I guess it is more of a react-native-svg question rather than react-native-reanimated question 🙂.

Have a good day!