Unlike on native platforms, when adding a suffix on web it appears far away from the progress value due to the input width.
Also, having multiple on the same screen with different gradients doesn't appear to be working. Both inherit the same gradient.

Hello,

Great library!
I don't know if this an issue.. but when circleBackgroundColor is set, it makes the inActiveStrokeWidth != activeStrokeWidth. When it's transparent.. the strokeWidth is fine

the code:

          <CircularProgress
            value={30}
            radius={65}
            duration={1000}
            textColor={Colors.lightBlue}
            textStyle={{fontSize: 16, fontFamily: 'Nunito-Bold'}}
            maxValue={100}
            title={undefined}
            titleFontSize={16}
            titleColor={'#333'}
            titleStyle={{fontWeight: 'bold'}}
            circleBackgroundColor={'#333'}
            activeStrokeColor={'#2465FD'}
            activeStrokeSecondaryColor={'#C3305D'}
            inActiveStrokeColor={themeColors.text}
          />

Following the example on NPM, strokeColorConfig doesn't work and crashes the app.
I get this screenshot:

Hello, I was trying to install this package but came across an error when trying to import the CircularProgress component:

// eslint caught this as 'unable to resolve path to module react-native-circular-progress-indicator'
import CircularProgress from 'react-native-circular-progress-indicator';

I have installed the required dependencies, including react-native-svg and react-native-reanimated, and did a gradle clean

Node version: v16.13.0

My package.json

"react": "17.0.2",
"react-native": "0.67.4",
"react-native-circular-progress-indicator": "^2.0.6",
"react-native-reanimated": "^2.5.0",
"react-native-svg": "^12.3.0",

Trying to run the app regardless returns these errors on the devtools:

D:\IMPORTANT\PROJECTS\krowdzReactNative\node_modules\react-native\Libraries\Core\ExceptionsManager.js:149 
Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.

Error: Requiring module "node_modules\react-native-circular-progress-indicator\src\circularProgress\index.tsx", 
which threw an exception: Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.

Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: 
Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

 Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.

Any help would be greatly appreciated.

Thanks a lot for creating this library!
Just one little question?
Is it possible to achieve the style of the picture below?

Thank you again for all your hard work.

I implemented the progress indicator so that onLong pressing the bar fills up with a rate dictated by the duration. I need to get onRelease the value at which the progress indicator has arrived. Is it possible?

I developed an app with

"react-native-reanimated": "2.9.1",
"react-native-svg": "12.4.4",

After upgrading packaged to the latest versions app is not working

"react-native-reanimated": "^2.10.0",
"react-native-svg": "^13.0.0",

There are no errors or any kind of output. It is just not working with dynamic values, or sometimes not working at all

Is there some way how to refresh the countdown animation or I just have to re-render my component?

Experiencing the error below when running npm install with Expo 47.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined      
npm ERR! Found: [email protected]
npm ERR! node_modules/react-native-svg
npm ERR!   react-native-svg@"13.4.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-svg@"^12.1.1" from [email protected]
npm ERR! node_modules/react-native-circular-progress-indicator
npm ERR!   react-native-circular-progress-indicator@"^4.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Passing --force or --legacy-peer-deps works and package works as expected.

Hey,

First of all, great library, I love it!.

Now to the question...is font scaling enabled for title, value and subtitle? Because i would like to have fixed size font, independent of system scaling. Is this possible using this library? It works great on iOS i have issues on Android.

Is there a way to implement something like this:

https://mui.com/material-ui/react-progress/#circular-indeterminate

Hello,

I have installed all the prereq for the dependencies both the react-native-svg
and react-native-reanimated-v2 I have also installed react-native-reanimated as well, but the error message still persist.

Here's the error message I am receiving:

The dependencies installed:

Here's also my babel file babel.config.js

the active progress keep appearing even though the value is 0, it's only happen on android

i cant use this package component when is use this package component i am getting this error

The option '**strokeColorConfig**' is not working as expected. I have used the same code in the documentation. But when I add the **strokeColorConfig** the app is crashing with out any warning or error message. Once I remove that the progress is working.

I am testing in Android. (Still haven't checked in iOS)

If it's an issue please solve this as soon as possible. Or if there are any solutions please provide that

This is an absolutely amazing library, it was so easy to get going, very well documented. I love it! ❤️ ❤️❤️

Just one little question?

Are there any props to target the prefix and/or suffix strings, similar to progressValueStyle

I'm trying to achieve the effect shown on the attached design, the suffix( s ) is much smaller in comparison to the timer( 45 ) font size.

Thank you again for all your hard work.

titleFontSize doesn't appear to work on 4.4.0?

"react-native-circular-progress-indicator": "^4.4.0",

with because newer svg package and reanimated didn't work

"react-native-svg": "12.4.4",
"react-native-reanimated": "2.9.1",

Fixed: was looking to style the value not the title. different property

setNativeProps is not implemented in react-native-web, and it causes performance bottlenecks with frequent re-renders (which is common in this type of progress indicator). This module should be refactored to avoid using the setNativeProps API.

As the title says, the progress font has a weird behavior on Android when the radius is relatively small (like 20 and less). However this does not occurs on iOS.
I tried both dynamic font scaling and fixed font size.

Could it be a OS-related issue and not something we can fix?

Here is a side-by-side comparison with dynamic font size:

And the same one with a progress font size fixed to 12:

And the code used:

      <CircularProgress
        value={25}
        duration={0}
        radius={12}
        inActiveStrokeWidth={2}
        activeStrokeWidth={2}
        valueSuffix="%"
      />
      <View style={{height: 10}} />
      <CircularProgress
        value={50}
        duration={0}
        radius={18}
        inActiveStrokeWidth={2}
        activeStrokeWidth={2}
        valueSuffix="%"
      />
      <View style={{height: 10}} />
      <CircularProgress
        value={75}
        duration={0}
        radius={25}
        inActiveStrokeWidth={2}
        activeStrokeWidth={2}
        valueSuffix="%"
      />

I got an error:

It would be interesting to have the ability to turn off the animation, the component works only statically. This is very useful for list in order to optimize loading.

After including your project, a typecheck fails (even with --skipLibCheck):

node_modules/react-native-circular-progress-indicator/src/circularProgress/index.tsx:184:31 - error TS7006: Parameter 'props' implicitly has an 'any' type.

184 export const dynamicStyles = (props) => {
                                  ~~~~~
Found 1 error.

You can either fix your implicit anys or compile your project to a type definition and commonjs source and publish that instead of the plain typescript source.

We're using the latest Expo SDK 45 with react-native-web 0.17.7 and get the following error:

TypeError: undefined is not an object (evaluating 'component._touchableNode.setAttribute')

The component does render fine, but but only in its inactive state. The progress value is always 0, no matter what you set it to.

Thanks a lot for creating this library!
I was thinking about how to go about adding a thumb at the end of the progress bar. Is there way to target the last piece of progress so I can attach a thumb?

Hey there, it seems that no matter the value I provide, the circular progress shows 0 and does not update.

Using on Android:
react-native-circular-progress-indicator: 4.4.2
expo: 47.0.13
react-native-reanimated: 2.12.0
react-native: 0.70.5
react-native-svg: 13.4.0

I created a fresh Expo project but the Circle is not showing on the browser.

My setup:

expo init .

yarn add react-native-reanimated
yarn add react-native-svg

# Fixed depencencies
expo doctor --fix-dependencies

npm i react-native-circular-progress-indicator

I start the app with yarn web.

Then my App.js looks like this:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CircularProgress from 'react-native-circular-progress-indicator';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />

      <CircularProgress value={58} />

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Should not subtitle prop have string type not StyleProp<TextStyle>?

Hi. I get the following error once I install the package and run react-native run-ios

ERROR Invariant Violation: Native module cannot be null.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

I have tried the following script to solve it, but without success.

npm start --reset-cache && killall -9 node && rm -rf node_modules && npm install && cd ios && rm -rf Pods && pod cache clean --all && pod install && cd ..

But still I get the same error.
Do you have any suggestions on how I could solve it?
Thanks!

Hi is there any way to add a user id integer from an api fetch as a json key, from an object into the value of the progress circle, instead of having a fixed number, as i'm trying to get a tally of results from a database table to show as a percentage progress (i.e. attendance results ).
any help or advice would be much appreciated.

the alpha doesn't show

<CircularProgress
showProgressValue={false}
activeStrokeColor={'rgba(255, 0, 0, 0.5)'}
activeStrokeSecondaryColor={'rgba(255, 0, 0, 1)'}
radius={100}
value={20} />

Hi,
Thanks for this amazing package. it will be better if you add color props for inactive stroke

This isn't a real issue, but I just wanted to say a huge thank you for this package. It's amazing and worked wonderfully!

I'm trying to insert an icon inside the progress circle, but the component isn't being rendered. Am I doing sth wrong? My code is like:

<CircularProgressBase
    radius={15}
    activeStrokeColor={colors.primary}
    circleBackgroundColor={'transparent'}
    activeStrokeWidth={3}
    inActiveStrokeWidth={1}
    inActiveStrokeOpacity={0.2}
    value={downloadProgress}
    showProgressValue={false} 
> 
{ <TouchableOpacity> 
      <CustomIcon 
        style={{ color: colors.primary }}
        name={'stop'} 
        size={10} type={'Ionicons'} 
      />
  </TouchableOpacity> 
} </CircularProgressBase>

When i run jest i get this error:

    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

    Check the render method of `UploadingProgressIndicator`.

my code is as below:

import CircularProgress from 'react-native-circular-progress-indicator'

const progressPropTypes = {
  progress: PropTypes.number.isRequired,
  copy: PropTypes.objectOf(PropTypes.any).isRequired
}

const UploadingProgressIndicator = ({
  progress = 0,
  copy = { uploading: '' }
}) => (
  <>
    <CircularProgress
      value={progress * 100}
      radius={16}
      textColor={'transparent'}
      activeStrokeColor={COLORS.white}
      inActiveStrokeColor={COLORS.white}
      inActiveStrokeOpacity={0.5}
      activeStrokeWidth={6}
      inActiveStrokeWidth={6}
    />
    <Text style={styles.loadingText}>{copy.uploading}</Text>
  </>
)

my test

import MediaProgressOverlay from './MediaProgressOverlay'

describe('<MediaProgressOverlay />', () => {
  test('render component with empty states', () => {
    const { container } = render(
      <MediaProgressOverlay
        uploadingImages={{}}
        compressVideo={{}}
        image={{}}
        copy={{}}
      />
    )

    expect(container.child).toBeUndefined()
  })

however, when i import react-native-circular-progress-indicator in the test, the test pass

but I don't see why should I import the library in my test in this case?

I've created the YouTube video tutorial just as reference, but your code its almost. copy-pasted.

Original YouTube video tutorial: https://www.youtube.com/watch?v=x2LtzCxbWI0

When using the circular progress container we can see that the element has it's own padding. Can we remove this or add a prop to customize container styles ?

is it possible to change the color based on value with an animation like this?

https://codepen.io/matousek/pen/LZEyQa

The Facebook messenger video upload indicator is a simple transparent grey pie that fills. Would be good if that was added as an option to this library

I get an error when running on Expo 46. I'm using Progress Indicator with Draftbit, so can't go back to using Expo V44.0.0, which was working.

Here's a link to a snack I made where I uncommented line 21 in app.js, but that didn't fix it: https://snack.expo.dev/@karlso/react-native-circular-progress-indicator

Any idea how to fix this?

Can we have an abstracted way to pause/resume the animation?

My app has installed redash v12.x which does not include withPause leading to undefined is not a function from useAnimation.ts. I had to explicitly install the latest version (v18.x) of redash. This may help someone else :-)

Getting error while requiring package, it says: new NativeEventEmitter requires a non-null argument.
I use the latest react native version.
Installed react-native-svg package.
pod install

Invariant Violation 'new NativeEventEmitter()' requires a non-null argument.

I am having a issue with the circle bar, i have a list where im using this component and some of the circles have low quality. (first and last in the flatlist). How can I fix this?