How can i change the centre colour of my progress circle

<View style={styles.loadingBar}>
   <Progress.CircleSnail color={'#5719a8'}  indeterminate={true}/>
</View>

I have read the documentation and cant find a property to change this color, please see the below image

I have no idea why this bug happens, but the workaround I figured out (after looking in the source code) is the following:

Inside /node_modules/react-native-progress/CircleSnail.js, in the render() function, add fill = 'transparent' (before the ...restProps):

render() {
  const {
    animating,
    children,
    color,
    ...,
    strokeCap,
    fill = 'transparent', // <---
    ...restProps
  } = this.props;

  ...
}

and in the <AnimatedArc> component that's being returned add the fill property:

<Svg width={size} height={size}>
  <AnimatedArc
    direction={
      direction === 'counter-clockwise'
        ? 'clockwise'
        : 'counter-clockwise'
      }
    radius={radius}
    ...
    strokeWidth={thickness}
    fill={fill} // <---
  />
</Svg>

You can now simply use:

import * as Progress from 'react-native-progress'
// or import ProgressCircleSnail from 'react-native-progress/CircleSnail'

<Progress.CircleSnail // or ProgressCircleSnail (depending how you chose to import)
  thickness={12}
  size={160}
  color="#f00"
  strokeCap="round"
  fill="yellow" // skip this prop altogether for a transparent fill
/>

You can use Circle Progress instead of CircleSnail -

import React from 'react';
import { StyleSheet, View } from 'react-native';
import * as Progress from 'react-native-progress'

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Progress.Circle size={40} indeterminate={true} unfilledColor={"#ff0000"} fill={"#00ff00"} />

      <Progress.Circle size={40} indeterminate={true} unfilledColor={"None"} fill={"None"} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  }
});
export default MyComponent;

You can try check this code here -
https://snack.expo.dev/fc0Gg2NlQ

The reason I got this bug was because, I was using "react-native-svg@13.9.0" which as of the time of this writing, was not the recommended version for the SDK I was using; thus, downgrading to a recommended version solved this issue for me.

from "react-native-svg@13.9.0" ---> to "react-native-svg@13.4.0"

You might want to check the version you're using and ensure that its compatible with the current version of the SDK you're using.