andy9775 / React Native Circularprogress
Licence: mit
A pure React Native Component for circular progress bars
Stars: ✭ 44
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Circularprogress
ExploreRN
新版本RN项目,Base on 0.66.4,包含众多RN组件,先实践后使用,累积方案应对各种场景,后端地址:https://github.com/supervons/ExploreKoa
Stars: ✭ 112 (+154.55%)
Mutual labels: react-native-component
React Native Tabbar Interaction
Tabbar Component For React-Native
Stars: ✭ 457 (+938.64%)
Mutual labels: react-native-component
React Native Sortable List
React Native Sortable List component
Stars: ✭ 678 (+1440.91%)
Mutual labels: react-native-component
React Native Mentions
Mentions textbox for React Native. Works on both ios and android. 🐳
Stars: ✭ 277 (+529.55%)
Mutual labels: react-native-component
React Native Material Menu
Pure JavaScript material menu component for React Native
Stars: ✭ 327 (+643.18%)
Mutual labels: react-native-component
Calendarpicker
CalendarPicker Component for React Native
Stars: ✭ 568 (+1190.91%)
Mutual labels: react-native-component
react-native-bouncing-ball
react native component bouncing ball for iOS and Android
Stars: ✭ 36 (-18.18%)
Mutual labels: react-native-component
React Native Stager
A performant wizard-like multi stages component for React Native without a router
Stars: ✭ 16 (-63.64%)
Mutual labels: react-native-component
React Native Drag Sort
🔥🔥🔥Drag and drop sort control for react-native
Stars: ✭ 397 (+802.27%)
Mutual labels: react-native-component
React Native Material Bottom Navigation
💅🔧👌 a beautiful, customizable and easy-to-use material design bottom navigation for react-native
Stars: ✭ 659 (+1397.73%)
Mutual labels: react-native-component
React Native Maps Super Cluster
A Clustering-enabled map for React Native
Stars: ✭ 284 (+545.45%)
Mutual labels: react-native-component
React Native Gl Model View
📺 Display and animate textured Wavefront .OBJ 3D models with 60fps - native bridge to GLView (iOS) and jPCT-AE (Android)
Stars: ✭ 313 (+611.36%)
Mutual labels: react-native-component
React Native Onboarding Swiper
🛳 Delightful onboarding for your React-Native app
Stars: ✭ 596 (+1254.55%)
Mutual labels: react-native-component
react-native-gesture-detector
Create and detect custom, complex gestures in React Native. 🍭
Stars: ✭ 75 (+70.45%)
Mutual labels: react-native-component
React Native Star Rating
A React Native component for generating and displaying interactive star ratings
Stars: ✭ 724 (+1545.45%)
Mutual labels: react-native-component
monalisa-ui
MonalisaUI ✨ React Native UI Library
Stars: ✭ 37 (-15.91%)
Mutual labels: react-native-component
React Native Video Controls
A React Native video component with controls
Stars: ✭ 479 (+988.64%)
Mutual labels: react-native-component
React Native Cached Image
CachedImage component for react-native
Stars: ✭ 890 (+1922.73%)
Mutual labels: react-native-component
React Native Sglistview
SGListView is a memory minded implementation of React Native's ListView
Stars: ✭ 745 (+1593.18%)
Mutual labels: react-native-component
React Native Qrcode Scanner View
A highly customizable QR code scanning component for React Native
Stars: ✭ 658 (+1395.45%)
Mutual labels: react-native-component
React-Native-CircularProgress
A pure React Native Component for circular progress bars for iOS.
Demo
Installation
- Install library
npm i --save react-native-progress-circular
- Include in your project
var CircularProgressDisplay = require('react-native-progress-circular');
Issues
As of react-native 0.17:
Due to react-native not yet supporting individual corner radius properties on android, support is lacking.
Basic Usage
'use strict';
var React = require('react-native');
var CircularProgressDisplay = require('react-native-progress-circular');
var {View, Text} = React;
module.exports = React.createClass({
getInitialState(){
return { progress:0};
},
componentDidMount(){
// automatically increment the progress
var time = 150;
var count = 0;
setInterval(() => {
if (++count < 15){
return;
}
var progress = this.state.progress + Math.round((Math.random() * 4));
if (progress >100) {
progress = 0;
count = 0;
}
this.setState({progress: progress});
}, time);
},
render() {
var progress = this.state.progress;
// displayed inside of the component
var innerDisplay = (
<View style={{width: 200, height: 200, flex:1, justifyContent: 'center',
alignItems: 'center', backgroundColor: '#036282'}}>
<Text style={{fontSize: 30}}>{progress + "%"}</Text>
</View>
);
return (<View style={{backgroundColor: 'orange',flex:1, flexDirection: 'row'}}>
<View style={{ flex: 1, top:200, left: 20}}>
<CircularProgressDisplay.Hollow size={200}
progressBarWidth={20} outlineWidth={0} outlineColor={'black'}
backgroundColor={'orange'} progressBarColor={'#02BAF7'}
innerComponent={innerDisplay} rotate={((progress/100)*360)}/>
</View>
</View>);
}
});
Hollow Progress Bar Props
-
size
(Number:ReactComponent) - The size of the component. The resulting components height and width are equal -
progressBarWidth
(Integer) - The width of the circular progress bar. -
progressBarColor
(String) - The color of the progress bar. -
backgroundColor
(String) - The color of the center of the component and the zero progress area. -
outlineWidth
(Integer) - If this prop is present, the resulting component has a round border of this width. -
outlineColor
(String) - The color of the border outlining the component. -
rotate
(Integer) - The current progress to track specified in degrees. E.G. 270. Can take a value between 0 and 360, inclusive. -
innerComponent
(ReactComponent) - A component to display inside of the round hollow progress bar. Can be used display an inner progress bar, or track the current progress with a<Text>
component.
Filled Progress Bar Props
-
size
(Number:ReactComponent) - The size of the component. The resulting components height and width are equal -
rotate
(Integer) - The current progress to track specified in degrees. E.G. 270. Can take a value between 0 and 360, inclusive. -
backgroundColor
(String) - The color of the center of the component and the zero progress area. This is the color of the component when no progress has been made. -
progressBarColor
(String) - The color of the progress bar. This is the color when progress has been made.
MIT Licensed
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].