11# react-native-simple-gradient-progressbar-view
22
3- Simple view that shows gedient progessbar view
3+ Simple gradient progressbar view for React Native
44
55## Installation
66
@@ -13,13 +13,68 @@ npm install react-native-simple-gradient-progressbar-view
1313``` js
1414import SimpleGradientProgressbarView from " react-native-simple-gradient-progressbar-view" ;
1515
16- // ...
16+ < View style= {styles .container }>
17+ < SimpleGradientProgressbarView
18+ style= {styles .box }
19+ fromColor= " #FF0000"
20+ toColor= " #0000FF"
21+ progress= {0.50 }
22+ maskedCorners= {[0 , 0 , 1 , 1 ]}
23+ cornerRadius= {7.0 }
24+ / >
25+ < SimpleGradientProgressbarView
26+ style= {styles .box }
27+ fromColor= " #FF0000"
28+ toColor= " #0000FF"
29+ progress= {0.75 }
30+ maskedCorners= {[1 , 1 , 1 , 1 ]}
31+ cornerRadius= {7.0 }
32+ / >
33+ < SimpleGradientProgressbarView
34+ style= {styles .box }
35+ fromColor= " #FF0000"
36+ toColor= " #0000FF"
37+ progress= {1.0 }
38+ / >
39+ < / View>
40+ );
1741
42+ const styles = StyleSheet .create ({
43+ container: {
44+ flex: 1 ,
45+ alignItems: ' center' ,
46+ justifyContent: ' center' ,
47+ },
48+ box: {
49+ width: 300 ,
50+ height: 30 ,
51+ marginVertical: 20 ,
52+ borderColor: ' #000000' ,
53+ borderWidth: 1 ,
54+ borderRadius: 7.0 ,
55+ },
56+ });
57+
58+ ```
59+
60+ ## Availabale properites
61+
62+ ``` js
63+ // Available properties
64+ type SimpleGradientProgressbarViewProps = {
65+ style: ViewStyle;
66+ fromColor: string; // color
67+ toColor: string; // color
68+ progress: number; // 0.0 - 1.0
69+ maskedCorners?: Array < number> ;
70+ cornerRadius?: number;
71+ };
1872```
1973
20- ## Contributing
74+ ## Screenshots
2175
22- See the [ contributing guide] ( CONTRIBUTING.md ) to learn how to contribute to the repository and the development workflow.
76+ ![ iPhone] ( /screenshots/iphone.png )
77+ ![ Android] ( /screenshots/android.png )
2378
2479## License
2580
0 commit comments