CODEWITHSUNDEEP
react-nativereact-native-component
a programer
a programer

Reputation: 121

How to fill progress at one or more specified positions on a circle in React Native

How can i assign one or more progress on circle progress as shown below I'm using the library react-native-circular-progress

Current: enter image description here

Expect: enter image description here

Thanks all !

Upvotes: 0

Views: 2222

Answers (1)

user17210172
user17210172

Reputation:

You can install react-native-circular-gradient-progress to implement this.

If you are using npm then please write

npm install react-native-circular-gradient-progress

If you are using yarn then please write

yarn add react-native-circular-gradient-progress

You can use it like below:

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;

And u will get result like this:

enter image description here

For further explanation of props you can read documentation.

Upvotes: 4

Related Questions