react-native-simple-gradient-progressbar-view
Simple gradient progressbar view for React Native
Installation
npm install react-native-simple-gradient-progressbar-view
Usage
import SimpleGradientProgressbarView from "react-native-simple-gradient-progressbar-view";
<View style={styles.container}>
<SimpleGradientProgressbarView
style={styles.box}
fromColor="#FF0000"
toColor="#0000FF"
progress={0.50}
maskedCorners={[0, 0, 1, 1]}
cornerRadius={7.0}
/>
<SimpleGradientProgressbarView
style={styles.box}
fromColor="#FF0000"
toColor="#0000FF"
progress={0.75}
maskedCorners={[1, 1, 1, 1]}
cornerRadius={7.0}
/>
<SimpleGradientProgressbarView
style={styles.box}
fromColor="#FF0000"
toColor="#0000FF"
progress={1.0}
/>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 300,
height: 30,
marginVertical: 20,
borderColor: '#000000',
borderWidth: 1,
borderRadius: 7.0,
},
});
Availabale properites
// Available properties
type SimpleGradientProgressbarViewProps = {
style: ViewStyle;
fromColor: string; // color
toColor: string; // color
progress: number; // 0.0 - 1.0
maskedCorners?: Array<number>;
cornerRadius?: number;
};
Masked Corners
Masked corners property will only affact iOS >= 11 and Android. By default masking of all corners is enabled. To disable corner radius masking on specific corner you need to use maskedCorners
property. Each value in array is coresponding to one corner:
- maskedCorners={[leftTop, rightTop, leftBottom, rightBottom]}, where 0 = maskedCorner disabled , 1 - maskedCorners enabled;
All 4 values are required, however the maskedCorners property is optional. Eg. to disable masking on leftTop and rightBottom corners you need to set: maskedCorners={[0, 1, 1, 0]}
.
Screenshots
iPhone
Android
License
MIT