react-native-boxes 1.4.65 → 1.4.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-boxes",
-  "version": "1.4.65",
+  "version": "1.4.66",
   "description": "A react native library for rapid development of UI using boxes",
   "main": "src/index.js",
   "scripts": {

package/src/Bar.tsx

@@ -261,4 +261,35 @@ export function DividerView(props: DividerProps) {
             }} />
         </Center>
     )
+}
+
+
+export type ProgressBarViewProps = ViewProps & {
+    progress: number
+    progressColor?: String
+    pendingColor?: String
+}
+export function ProgressBarView(props: ProgressBarViewProps) {
+    const { progress } = props
+    const theme = useContext(ThemeContext)
+    return (
+        <View style={[{
+            marginTop: theme.dimens.space.md,
+            flexDirection: 'row',
+            height: theme.dimens.icon.sm / 3,
+            width: '100%',
+            backgroundColor: '#d3d3d3',
+            borderRadius: 5,
+            overflow: 'hidden',
+        }, props.style]}>
+            <View style={{
+                width: `${progress}%`,
+                backgroundColor: `${props.progressColor || theme.colors.accentLight}`,
+            }} />
+            <View style={{
+                width: `${100 - progress}%`,
+                backgroundColor: `${props.pendingColor || theme.colors.background}`,
+            }} />
+        </View>
+    );
 }