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.

I'm working on a standard for displaying version support on React-Native module README files. I would love your feedback: react-native-version-support-table

On Android, when the screen display is turned off, any determinate circles disappear until they are next updated. For determinate circles that are static and never updated, this means they permanently disappear after the screen display is toggled.

See the gif below of the Example app for a visual, with the update timeouts slowed down a bit. Note that the circles disappear until the next timeout update; at the end, after the periodic updates are complete, the circles are permanently gone.

Tested on Android 7.1.1 Nexus 5X simulator, and also seen in external use on Samsung Galaxy S7 and Samsung Galaxy S7 Edge devices running Android 7+.

Any ideas on potential fixes? A hacky solution for now for external apps might be to listen for React Native AppState updates and force re-rendering of these circles when the app becomes foreground/screen is turned back on, but obviously this is sub-optimal.

how to close the progress after progress=100%?
I use modal,put progress in modal ,but didn't work?

Hi good day,

I was testing out the code and I used the Progress.Circle component as per the sample code given.

Whenever I set the direction as clockwise or not set the props for direction, I will get a full circle, with no animation.

However, if i set the direction as counter-clockwise, it will work as expected.

May I know if I just came across a bug? Anyone who got the same error?

Cheers

I am using Bar component and passing borderRadius value but it is setting borderRadius only of unfilled View while for filled view it is not setting .It is coming only in Android?

I am fetching data and getting a JSON response back that returns a number like this 7.5833 and because this progress bar can only handle 0 thru 1 I multiply my number by .1 which will return .7583300000000001

I am doing the following and it is just an empty bar with a border. This was working but not anymore.
<Progress.Bar progress={this.state.data.progress * .1} width={200} />

What could be wrong?

It could be great to have animated progress fill on component load.

I'm trying to get the Pie to be transparent on the color property:
<Progress.Pie color={'rgba(255,255,255,0)'} unfilledColor={'rgba(255,255,255, 0.15)' progress={0.5} .../>

Seems like the color property can't handle complete transparency?

Hey there,

During I debug the react native application, I find out if the progress set there quite long, it will lead the some porblem as the follow shows. I don't have any enough technic to solve it. Can anyone help me?

W/WindowAnimator: Failed to dispatch window animation state change.
                                                 android.os.DeadObjectException
                                                     at android.os.BinderProxy.transactNative(Native Method)
                                                     at android.os.BinderProxy.transact(Binder.java:503)
                                                     at android.view.IWindow$Stub$Proxy.onAnimationStopped(IWindow.java:534)
                                                     at com.android.server.wm.WindowAnimator.updateWindowsLocked(WindowAnimator.java:286)
                                                     at com.android.server.wm.WindowAnimator.animateLocked(WindowAnimator.java:678)
                                                     at com.android.server.wm.WindowAnimator.-wrap0(WindowAnimator.java)
                                                     at com.android.server.wm.WindowAnimator$1.doFrame(WindowAnimator.java:123)
                                                     at android.view.Choreographer$CallbackRecord.run(Choreographer.java:856)
                                                     at android.view.Choreographer.doCallbacks(Choreographer.java:670)
                                                     at android.view.Choreographer.doFrame(Choreographer.java:603)
                                                     at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844)
                                                     at android.os.Handler.handleCallback(Handler.java:739)
                                                     at android.os.Handler.dispatchMessage(Handler.java:95)
                                                     at android.os.Looper.loop(Looper.java:148)
                                                     at android.os.HandlerThread.run(HandlerThread.java:61)
                                                     at com.android.server.ServiceThread.run(ServiceThread.java:46)

Hello
Would anyone be aware of any way to put the progress Bar vertically?
I could not find a way to do so..
Thank you!!
Fabrice

Hey there, thanks for the lib.
I get a warning while running the debugger: Warning: View.propTypes has been deprecated and will be removed in a future version of ReactNative. Use ViewPropTypes instead. which I think is caused by these four files.

Would it be ok if I submit a PR to fix the warning? (I saw a PR about it but was closed, wondering if there was any particular reason for that)

Hi,
I'm getting this issue thrown. Is this occurring for anyone else?

Setup:
"react": "15.4.2",
"react-native": "^0.40.0",
"react-native-progress": "^3.2.0",

Error:

[__NSArrayI length]: unrecognized selector sent to instance 0x131a20af0
Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSArrayI length]: unrecognized selector sent to instance 0x131a20af0'

Code;

- (instancetype) initWithPathString:(NSString *)d
{
    if (self = [super init]) {
        NSRegularExpression* decimalRegularExpression = [[NSRegularExpression alloc] initWithPattern:@"(\\.\\d+)(?=\\-?\\.)" options:0 error:nil];
        _originD = d;

         // ERROR ON THE LINE BELOW //
        _d = [decimalRegularExpression stringByReplacingMatchesInString:d options:0 range:NSMakeRange(0, [d length]) withTemplate:@"$1\,"];
         // ERROR ON THE LINE ABOVE // 


        _pathRegularExpression = [[NSRegularExpression alloc] initWithPattern:@"[a-df-z]|[\\-+]?(?:[\\d.]e[\\-+]?|[^\\s\\-+,a-z])+" options:NSRegularExpressionCaseInsensitive error:nil];
    }
    return self;
}

Hi, i just used your progress Bar and it's working perfectly fine with iOS but not with Android device.
Actually, in the correspondent page it shows completed then it comes back to 0 and continue progressing. In the constructor i specified that progress= 0 .. Do you have any idea ? Thanks

Is there a way to add text inside of the progress bar?

We updated our react native to version 0.44.3 and since then, we have strange problems on Android (iOS works fine).

In our component, we have a "time bar" and a "point bar".
There are two major problems:

• we I give a default e.g. just to the time progress bar... both change accordingly to the time progress bar value...
• With 0, the bar is completely full (0 should be empty), with a fixed value of 0.0001 it is empty...

default value 0:

fixed value of 0.5 in the time bar:

https://youtu.be/pwe0b6H1xoE

Hi guys,
I have a problem with library, it is crashed after few minutes running.
This is code that I'm using:

<View style={styles.header}> <Image style={styles.mark} source={require('./res/ic_mark.png')}/> </View> <View style={styles.progressPos}> <Progress.CircleSnail size={160} indeterminate={true} colors={['#F44336', '#2196F3', '#009688']} thickness={5}/> </View>

Thanks and Best Regards!

PS: How can I get the crash log? I'm newbie with ReactNative

So my use case is that I present this in a loading indicator modal and I have noticed it not animating when I show/hide the loading indictor modal. To note, the modal could be displayed less than a second. The loading modal is mounted only once.

Is there a way to appropriately embed content within a

<Progress.Circle>

</Progress.Circle>

When I test the following code onAndroid,

   let arr = [];
        for (var i=0; i<10; i++) {
            arr.push(<ProcessCircle
                animated
            borderWidth={0} progress={i/10}
             color="blue"
             unfilledColor="red"
             size={50}
              direction="counter-clockwise"/>);
        }

the first two works fine, but the follow seven don't draw the progress circle as expected.

It would be nice to add clockwise and counter-clockwise direction prop for the Progress.CircleSnail

Hello Joel and RNP community,

Thanks for creating and open sourcing such a helpful lib. I'm using it for all my react-native projects.

In one of those projects, I need to set the width of the progress bar to 100%. I did it by passing width={null} to progress bar. This sets the width to 100 %, but the progress animation is hindered (gif attached).

How to go about this ?

Thank you.

<Progress.Bar progress={this.state.top_progress} width={200} height={10} color={this.state.top_color} unfilledColor={'#FFFFFF'} borderWidth={5} borderColor={'#7B7B7B'} />

In the progress bar, progress is not increasing just like the animation shown in the example. What I want is the step by step progress not the repeat animation.

Please help.

i got a module that when i change the language, the progress.bar has to change its direction too. any suggest?

How can i display Text with <Progress.CircleSnail /> , ?

Everything is in the title

Getting:

No component found for view with name "ARTSurfaceView"
No component found for view with name "ARTShape"

Hi,

I'm trying to use react-native-progress-image (with react-native-progress), i've add ART.xcodeproj to my libraries in xcode and link libART.a with libraries in buildphase but when i try with this exemple :

<Image 
    indicator={Progress.Bar}
    indicatorProps={{
         size: 80,
         borderWidth: 0,
         color: 'rgba(150, 150, 150, 1)',
         unfilledColor: 'rgba(200, 200, 200, 0.2)'
    }}
    source={{uri: this.props.url}} 
    style={{height: this.state.height, resizeMode: 'contain'}} 
/>

i get this error :

undefined is not an object (evaluating '_reactNativeProgress2.default.Bar')
2016-09-27 10:02:46.399 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: undefined is not an object (evaluating '_reactNativeProgress2.default.Bar')
2016-09-27 10:02:46.490 [warn][tid:com.facebook.react.JavaScript] Possible Unhandled Promise Rejection (id: 0):
undefined is not an object (evaluating '_reactNativeProgress2.default.Bar')

how can i fix that?

thank's

Hello Guys,
Am I wrong or the progress circle text (current percentage) does not show when the current progress is 0?
Right now if I send progress={0} , no text at all will be shown.

I'm getting this screen when I try and add react-native-progress

I ran through the instructions for installation in Xcode, can't seem to get it working. Any suggestions?

My Versions:

"react": "15.3.2",
"react-native": "0.35.0",
"react-native-progress": "^3.1.0",

This is the code I'm using:

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ActivityIndicator
} from 'react-native'
import * as Progress from 'react-native-progress'

export default class Loading extends Component {
  render() {
    return (
      <Progress.CircleSnail
        size={108}
        colors={['red', 'green', 'blue']}
        direction='clockwise'
        thickness={2}
        />
    )
  }
}

Can we release a new version to include the following commit: 7b40242

The above along with pull #24 for the docs.

The documentation is out of date with the current library release.

facebook/react-native@27ac047
https://github.com/facebook/react-native/releases

my android version is 5.0.2

There is an issue in android when progress value is 0, because of react-native issue when transform scaleX value is 0. The workaround would be to set progress to 0.001 value, it would be great if you put that in documentation.

Hi,

As you may see on the screenshots, Progress.Circle component rotating weirdly..

Component is re-applied on every induction. Can't reset it to initial state.

I can't see why this is happening from reading the source.

My inspector shows that strokeCap: 'round' is set on progress circle, but the Arc objects below are still 'butt'.

have confirmed using version:
[email protected]

Would this be worth making a PR for?

<Progress.Circle animated={true} speed={nn} />

CircleSnail's "unfilledColor" prop does not work. (Or lacks proper examples). Please help.

Hi guys,

I am facing with rendering component problem whenever i try to add CircleSnail in some of my screens. It cause my app unstable rendering component on the screen, some component missing, unexpected behavior ... i tried to run it on debug and release, genymotion and real devices. All the results are same! I post the issue to ask for any solution. Thank in advance !

Here my code and environment

i update my code on gist

https://gist.github.com/nhuthuynh/009dee73675c1dbed41d34a86b359057

Genymotion: 2.9.0
Virtual Devices: Google Nexus 5X - 7.0.0 - API 24 - 1080x1920

I have what I think is some really strange behavior happening.. I setup a Progress Pie and it was working wonderfully. Then it stopped appearing. Thinking I accidentally changed something, I played with every property - with no luck. Then I changed the progress pie, to a CircleSnail... voila, it was back... So I reverted back to the Pie, and it once again was working (even though according to Git, the file never changed).

Soon enough it disappeared again... Any ideas?

Hi,

I am using RN 0.14.2 (probably why..but cannot change the version a the moment).

I get the red screen of death when launching the app saying "Cannot read property 'Surface' of undefined" from line 11:0 in Circle.js, even though I have added the .xcodeproject and linked the lib as indicated. Any help/insight is appreciate!
Thanks

I love this library btw.
I have a <ListView> which loads more content when it reaches the bottom(end).

renderFooter() {
  if (noMore) return null
  return (
    <View style={{justifyContent: 'center', alignItems: 'center', height: 50}}>
      <Progress.Circle
        size={20}
        indeterminate={true}
        color={"#000"} />
    </View>
  )
}

render() {
  return (
  <ListView
    style={{flex: 1}}
    refreshControl={
      <RefreshControl
        ...
      />
    }
    onEndReached={this.loadMore.bind(this)}
    onEndReachedThreshold={10}
    scrollEventThrottle={150}
    dataSource={new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 }).cloneWithRows(articles)}
    ...     
    renderFooter={this.renderFooter.bind(this)} />
  )
}

When it reaches the bottom, the animation on it stops or goes to a crawl.
I've tested this on an iPhone 5S, iPhone 7 simulator, and Nexus 6P.

android 系统不支持 overflow 。
height borderRadius 设大点的值是 在android手机上会有显示问题

eg:
<Progress.Bar progress={0.3} width={200} borderRadius={20} height={40}/>

8527f96

Would love to see possibility to add a color array for e.g. Progress.Circle as the Progress.CircleSnail

It seems that after upgrading to react-native 0.20 the Easing function composition of Easing.quad(Easing.inOut) [in CircleSnail.js] returns an NaN whereas Easing.inOut(Easing.quad) works just fine. Please investigate?

I am getting the following error:

/node_modules/react-native-progress/index.js: 'import' and 'export' may only appear at the top level (2:0)

I am using ES6 in my REACT component that I am developing. I have done the following import statement that is causing the error:

import * as Progress from 'react-native-progress';

Please let me know what I can do to resolve this issue.

Thank you.