customelement style (#1626)

Author: lidord-wix

src/components/progressBar/index.tsx

@@ -1,3 +1,4 @@
+import isUndefined from 'lodash/isUndefined';
 import React, {PureComponent} from 'react';
 import {Animated, Easing, StyleSheet, StyleProp, ViewStyle, LayoutChangeEvent} from 'react-native';
 import {asBaseComponent} from '../../commons/new';
@@ -6,7 +7,6 @@ import {Constants} from '../../helpers';
 import View from '../view';
 import {Colors, BorderRadiuses, Spacings} from '../../style';
 
-
 const CONTAINER_HEIGHT = Spacings.s2;
 const FULL_WIDTH_CONTAINER_HEIGHT = Spacings.s1;
 const TABLET_CONTAINER_HEIGHT = 6;
@@ -33,11 +33,11 @@ interface Props {
   /**
    * Progress color
    */
-  progressColor?: string,
+  progressColor?: string;
   /**
    * Custom element to render on top of the animated progress
    */
-  customElement?: JSX.Element
+  customElement?: JSX.Element;
 }
 export type ProgressBarProps = Props;
 
@@ -50,7 +50,7 @@ class ProgressBar extends PureComponent<Props, State> {
 
   static defaultProps: Partial<Props> = {
     progress: 0
-  }
+  };
 
   progressAnimation: Animated.Value;
 
@@ -78,7 +78,7 @@ class ProgressBar extends PureComponent<Props, State> {
   };
 
   animateProgress(toValue?: number) {
-    if (toValue) {
+    if (!isUndefined(toValue)) {
       Animated.timing(this.progressAnimation, {
         duration: 220,
         easing: Easing.ease,
@@ -130,7 +130,7 @@ class ProgressBar extends PureComponent<Props, State> {
 
     if (customElement) {
       return React.cloneElement(customElement, {
-        style: [customElement.props.style, styles.progress]
+        style: [customElement.props.style, styles.customElement]
       });
     }
   }
@@ -179,6 +179,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     overflow: 'hidden'
   },
+  customElement: {
+    height: '100%',
+    width: '100%'
+  },
   inlineBorderRadius: {
     borderRadius: BorderRadiuses.br100
   },