indatastar-styled-progress-bars 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,37 +1,149 @@
|
|
|
1
|
-
# styled-progress-bars
|
|
1
|
+
# indatastar-styled-progress-bars
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A React Native library providing **beautiful animated progress bars**, including:
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
- **SemiCircularProgressBar** – animated semicircle progress
|
|
6
|
+
- **WaveProgressBar** – horizontal animated wave progress
|
|
6
7
|
|
|
8
|
+
Built with **React Native**, **React Native SVG**, and **Animated API**.
|
|
9
|
+
---
|
|
10
|
+
## ✨ Features
|
|
7
11
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
12
|
+
- 🎨 **Gradient Support** – Easily apply smooth gradients to your progress bars.
|
|
13
|
+
- ⚡ **Animated Progress** – Smooth, performant animations using React Native’s Animated API.
|
|
14
|
+
- 📐 **Customizable Sizes** – Adjust width, height, radius, stroke width, and wave height to fit your design.
|
|
15
|
+
- 🎯 **Flexible Progress Range** – Set your own maximum (`end`) value for precise control.
|
|
16
|
+
- 💻 **TypeScript Ready** – Fully typed props for IntelliSense and safer coding.
|
|
17
|
+
- 🔄 **Auto & Manual Updates** – Works with dynamic values or manual state updates.
|
|
18
|
+
- ✅ **Expo & React Native Compatible** – Works in both Expo and bare React Native projects.
|
|
19
|
+
- 🌊 **Multiple Styles** – Choose between semicircular and wave-style progress indicators.
|
|
11
20
|
|
|
12
21
|
|
|
13
|
-
##
|
|
22
|
+
## Installation
|
|
14
23
|
|
|
24
|
+
```bash
|
|
25
|
+
# Using npm
|
|
26
|
+
npm install indatastar-styled-progress-bars react-native-svg
|
|
15
27
|
|
|
16
|
-
|
|
17
|
-
|
|
28
|
+
# Using yarn
|
|
29
|
+
yarn add indatastar-styled-progress-bars react-native-svg
|
|
30
|
+
```
|
|
18
31
|
|
|
19
|
-
|
|
32
|
+
## 🚀 Usage
|
|
20
33
|
|
|
21
|
-
|
|
34
|
+
#### 🌊 WaveProgressBar
|
|
22
35
|
```
|
|
36
|
+
import React, { useState, useEffect } from 'react';
|
|
37
|
+
import { SafeAreaView, StyleSheet } from 'react-native';
|
|
38
|
+
import { WaveProgressBar } from 'indatastar-styled-progress-bars';
|
|
39
|
+
|
|
40
|
+
export default function WaveProgressDemo() {
|
|
41
|
+
const [progress, setProgress] = useState(0);
|
|
42
|
+
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
const interval = setInterval(() => {
|
|
45
|
+
setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
|
|
46
|
+
}, 500);
|
|
47
|
+
return () => clearInterval(interval);
|
|
48
|
+
}, []);
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<SafeAreaView style={styles.container}>
|
|
52
|
+
<WaveProgressBar
|
|
53
|
+
progress={progress}
|
|
54
|
+
width={250}
|
|
55
|
+
height={40}
|
|
56
|
+
end={50}
|
|
57
|
+
waveHeight={10}
|
|
58
|
+
colors={['#ff6a00', '#ee0979']}
|
|
59
|
+
duration={500}
|
|
60
|
+
borderRadius={20}
|
|
61
|
+
showLabel={false}
|
|
62
|
+
backgroundColor="transparent"
|
|
63
|
+
/>
|
|
64
|
+
</SafeAreaView>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
const styles = StyleSheet.create({
|
|
69
|
+
container: {
|
|
70
|
+
flex: 1,
|
|
71
|
+
justifyContent: 'center',
|
|
72
|
+
alignItems: 'center',
|
|
73
|
+
padding: 20,
|
|
74
|
+
},
|
|
75
|
+
});
|
|
23
76
|
|
|
77
|
+
```
|
|
78
|
+
### 📋 Props
|
|
79
|
+
| Prop | Type | Default | Description |
|
|
80
|
+
|-----------------|-----------|----------------------------|---------------------------------------|
|
|
81
|
+
| progress | number | 0 | Current progress value |
|
|
82
|
+
| end | number | 50 | Maximum progress value |
|
|
83
|
+
| width | number | 300 | Width of the progress bar |
|
|
84
|
+
| height | number | 50 | Height of the progress bar |
|
|
85
|
+
| waveHeight | number | 10 | Height of the wave |
|
|
86
|
+
| colors | string[] | ['#4c669f', '#3b5998'] | Gradient colors |
|
|
87
|
+
| duration | number | 1000 | Animation duration in milliseconds |
|
|
88
|
+
| backgroundColor | string | #e0e0e0 | Background color of the container |
|
|
89
|
+
| borderRadius | number | 10 | Border radius of the container |
|
|
90
|
+
| showLabel | boolean | true | Whether to show percentage label |
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
#### 🌓SemiCircularProgressBar
|
|
94
|
+
```
|
|
95
|
+
import React, { useState, useEffect } from 'react';
|
|
96
|
+
import { SafeAreaView, StyleSheet } from 'react-native';
|
|
97
|
+
import { SemiCircularProgressBar } from 'indatastar-styled-progress-bars';
|
|
98
|
+
|
|
99
|
+
export default function SemiCircularProgressDemo() {
|
|
100
|
+
const [progress, setProgress] = useState(0);
|
|
101
|
+
|
|
102
|
+
useEffect(() => {
|
|
103
|
+
const interval = setInterval(() => {
|
|
104
|
+
setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
|
|
105
|
+
}, 500);
|
|
106
|
+
return () => clearInterval(interval);
|
|
107
|
+
}, []);
|
|
108
|
+
|
|
109
|
+
return (
|
|
110
|
+
<SafeAreaView style={styles.container}>
|
|
111
|
+
<SemiCircularProgressBar
|
|
112
|
+
progress={progress}
|
|
113
|
+
radius={80}
|
|
114
|
+
end={50}
|
|
115
|
+
strokeWidth={12}
|
|
116
|
+
colors={['#00c6ff', '#0072ff']}
|
|
117
|
+
duration={500}
|
|
118
|
+
/>
|
|
119
|
+
</SafeAreaView>
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
const styles = StyleSheet.create({
|
|
124
|
+
container: {
|
|
125
|
+
flex: 1,
|
|
126
|
+
justifyContent: 'center',
|
|
127
|
+
alignItems: 'center',
|
|
128
|
+
padding: 20,
|
|
129
|
+
},
|
|
130
|
+
});
|
|
24
131
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
132
|
+
```
|
|
133
|
+
### 📋 Props
|
|
134
|
+
|
|
135
|
+
| Prop | Type | Default | Description |
|
|
136
|
+
|------------|-----------|---------------------|------------------------------|
|
|
137
|
+
| progress | number | 0 | Current progress value |
|
|
138
|
+
| end | number | 50 | Maximum progress value |
|
|
139
|
+
| radius | number | 50 | Radius of semicircle |
|
|
140
|
+
| strokeWidth | number | 10 | Width of the stroke |
|
|
141
|
+
| colors | string[] | ['#4c669f', '#3b5998'] | Gradient colors |
|
|
142
|
+
| duration | number | 500 | Animation duration in milliseconds |
|
|
143
|
+
|
|
144
|
+
## 📄 License
|
|
145
|
+
MIT
|
|
30
146
|
|
|
31
|
-
## License
|
|
32
147
|
|
|
33
|
-
MIT
|
|
34
148
|
|
|
35
|
-
---
|
|
36
149
|
|
|
37
|
-
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|