JackPu / React Native Percentage Circle
Licence: mit
🐳 React Native Percentage Circle
Stars: ✭ 311
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Native Percentage Circle
leaflet-paintpolygon
Leaflet plugin to create polygon with circle as paint
Stars: ✭ 38 (-87.78%)
Mutual labels: circle
bubble-layout
An Android ViewGroup that displays avatar bubbles... similar to the chat bubbles on Facebook Messenger.
Stars: ✭ 46 (-85.21%)
Mutual labels: circle
circle-stdlib
Standard C and C++ Library Support for Circle
Stars: ✭ 58 (-81.35%)
Mutual labels: circle
circles
👪 Create groups with other users on a Nextcloud instance and share with them
Stars: ✭ 121 (-61.09%)
Mutual labels: circle
geometer
A simple drawing program to replicate construction with a compass and straightedge
Stars: ✭ 19 (-93.89%)
Mutual labels: circle
RoundImage
This library is used for converting Bitmap or Drawable images to Round or Circular Shape. Round image view for Android or Circular Image View for Android.Tags Android Round Circularimageview Circle Rounded Corner imageview library.
Stars: ✭ 42 (-86.5%)
Mutual labels: circle
Program-Matematika
Program Matematika adalah sebuah repository GitHub yang berisi program yang dapat memudahkan para pelajar atau guru dalam menyelesaikan masalah Matematika dengan Terminal
Stars: ✭ 15 (-95.18%)
Mutual labels: circle
ALProgressView
Animated and fully customizable progress view with 2 styles: ring and bar.
Stars: ✭ 72 (-76.85%)
Mutual labels: circle
HorizontalAndCircleTimeView
自定义水平刻度尺和圆形钟表刻度 可点击 可拖动 刻度 水平刻度划分为60份 圆形刻度划分为24份 可自定义修改
Stars: ✭ 14 (-95.5%)
Mutual labels: circle
rn-circular-slider
React Native circular slider based on react-native-svg
Stars: ✭ 25 (-91.96%)
Mutual labels: circle
Tau.jl
A Julia module providing the definition of the circle constant Tau (2π)
Stars: ✭ 33 (-89.39%)
Mutual labels: circle
unity circle menu
Circle Menu is a C# script used in Unity to quickly and easily create GUI circular menus, a great way to add intuitive and ergonomic menus to your applications and games.
Stars: ✭ 44 (-85.85%)
Mutual labels: circle
Cirque
An iOS component that enables you to draw multi color circle strokes with gradient trasitions between colors
Stars: ✭ 23 (-92.6%)
Mutual labels: circle
cypress-example-circleci-orb
Demo of using the Cypress CircleCI Orb
Stars: ✭ 26 (-91.64%)
Mutual labels: circle
react-native-percentage-circle
React Native Version >= 0.25
React-Native-Percentage-Cirlce is a component which supports you define your percent and draw the circle.And also you can use it as a progress bar.And you can show some data in a circle you want.
This is a screenshot of the Demo
Start
npm i react-native-percentage-circle --save
import PercentageCircle from 'react-native-percentage-circle';
//...
render() {
<View>
<PercentageCircle radius={35} percent={50} color={"#3498db"}></PercentageCircle>
</View>
<View>
<PercentageCircle radius={35} percent={50} color={"#3498db"}>
<Image style={{width:20,height:20}} source={{require('your image')}} />
</PercentageCircle>
</View>
}
Options
| Props | Type | Example | Description |
|---|---|---|---|
| color | string | '#000' | the color of border |
| bgcolor | string | '#e3e3e3' | the background color of the circle |
| innerColor | string | '#fff' | the color of the inside of the circle |
| percent | Number | 30 | the percent you need |
| radius | Number | 20 | how large the circle is |
| borderWidth | Number(default 2) | 5 | the width of percentage progress bar |
| textStyle | Array | {fontSize: 24, color: 'red'} | define the style of the text which in the circle |
| children | jsx | <Text>123</Text> |
define the children component in the circle |
Contributions
Your contributions and suggestions are welcome 😄😄😄
MIT License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].