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.

Wrong text in Circle when `animated` is true

See original GitHub issue

Hello,

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:open
  • Created 6 years ago
  • Reactions:10
  • Comments:16 (3 by maintainers)

github_iconTop GitHub Comments

7reactions
phantom1299commented, Nov 8, 2017

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.

1reaction
LolnationCHcommented, May 28, 2018

@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 😃

Read more comments on GitHub >

github_iconTop 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 >

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