Wrong text in Circle when `animated` is true
See original GitHub issueHello,
I have an issue where the text inside the circle is always at 0 if I don’t setanimated={false}
. After looking at the code, it seems like this code is responsible :
componentWillMount() {
if (this.props.animated) {
this.props.progress.addListener((event) => {
this.progressValue = event.value;
if (this.props.showsText || this.progressValue === 1) {
this.forceUpdate();
}
});
}
}
It’s never entering the listener (I put some logs), so the progressValue
is always 0.
Thanks.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:10
- Comments:16 (3 by maintainers)
Top Results From Across the Web
After Effects - 3D Text Moving in a circle or Warp - YouTube
Your browser can't play this video. Learn more. Switch camera.
Read more >CSS / jQuery: Dynamically updated text appears right of ...
circleProgress({ value: 0.35, animation: false, fill: { gradient: ... circleProgress({ value: 0.6 }).on('circle-animation-progress', ...
Read more >How-To: Text Sliding out of a Circle 2D
To achieve rotation animation, rotate the text object. To create the curve start with a Bezier Circle. [Cyclic U] set to false since...
Read more >Set Text on a Circle | CSS-Tricks
This makes the whole knob wobble around a wrong emphasis. You can avoid this by creating a separate fake element just behind the...
Read more >text-anchor - SVG: Scalable Vector Graphics - MDN Web Docs
The text-anchor attribute is used to align (start-, middle- or ... the right side of the text is rendered at the initial text...
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
Hi there, I had the same issue. After some digging and experimenting, I got it to work by changing
{formatText(progressValue)}
in line 187 at Circle.js (node_modules\react-native-progress\Circle.js) to
{progress ? formatText(progress._value) : this.forceUpdate()}
Hope it helps.
@Clafouti You need to modify it yourself, the author does not seem to code on this anymore. You could always fork it and make it better 😃