npm install react-native-circular-gradient-progress --save
import React from "react";
import { CircularProgress } from "react-native-circular-gradient-progress";
const HomePage: React.FunctionComponent = () => (
<CircularProgress
color="#F00"
size={size}
progress={progress}
/>
)
export default HomePage;
Component accepts several self-descriptive properties:
-
color
(String) - Color for the circle.
-
startColor
(String) - Start Color for the circle. -
middleColor
(String) - MIddle Color for the circle. -
endColor
(String) - End Color for the circle.
-
id
(String | null) - The html id attribute. -
size
(Number) - This is diameter of the circle. -
progress
(Number) - The progress. (0 to 100). -
strokeWidth
(Number) - This weight of the circle. (default is 6px). -
emptyColor
(String) - The color of the circle that is not filled. (default is lightgrey). -
withSnail
(Boolean | null) - A dot at the end of the circle that follows the progress. -
classes
(Object | null) - Class names that can be applied to the component.
classes?: {
indicator: {
progression: string;
container: string;
empty: string;
};
snail: string;
textContent: {
container: string;
text: string;
};
};