From 03526474c9cb727fe0aaa6e90d2be295850135c3 Mon Sep 17 00:00:00 2001
From: Nathania Elvina <nathaniaelvina@hotmail.com>
Date: Fri, 1 Nov 2019 19:15:03 +0700
Subject: [PATCH] fix(exoflex): fix unable to change inner bar height (#159)

* style(exoflex): change progress bar styling

* docs(exoflex): update example
---
 .../src/examples/ProgressBarExample.tsx       |  1 -
 .../exoflex/src/components/ProgressBar.tsx    | 19 ++++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/exoflex/example/src/examples/ProgressBarExample.tsx b/packages/exoflex/example/src/examples/ProgressBarExample.tsx
index 8b37ecafd..0b76713d4 100644
--- a/packages/exoflex/example/src/examples/ProgressBarExample.tsx
+++ b/packages/exoflex/example/src/examples/ProgressBarExample.tsx
@@ -31,7 +31,6 @@ let styles = StyleSheet.create({
   root: {
     padding: 16,
     backgroundColor: '#eeeeee',
-    alignItems: 'center',
   },
 });
 
diff --git a/packages/exoflex/src/components/ProgressBar.tsx b/packages/exoflex/src/components/ProgressBar.tsx
index fa3bc0035..6a1271576 100644
--- a/packages/exoflex/src/components/ProgressBar.tsx
+++ b/packages/exoflex/src/components/ProgressBar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View, Animated } from 'react-native';
+import { StyleSheet, View, Animated, ViewStyle } from 'react-native';
 import { ProgressBarProps } from 'react-native-paper';
 import { useAnimation } from 'react-native-animation-hooks';
 import useTheme from '../helpers/useTheme';
@@ -20,7 +20,9 @@ export default function ProgressBar(props: Props) {
     duration: 500,
   });
 
-  let height = (style && style.height) || 8;
+  let flattenedStyle = StyleSheet.flatten<ViewStyle>(style) || {};
+  let height = flattenedStyle.height || 8;
+  let borderRadius = flattenedStyle.borderRadius || roundness;
 
   if (!visible) {
     return <View style={{ height }} />;
@@ -31,9 +33,10 @@ export default function ProgressBar(props: Props) {
       style={[
         styles.container,
         {
+          height,
+          borderRadius,
           borderColor: colors.border,
           backgroundColor: colors.surface,
-          borderRadius: roundness,
         },
         style,
       ]}
@@ -42,8 +45,7 @@ export default function ProgressBar(props: Props) {
         style={[
           styles.bar,
           {
-            height,
-            borderRadius: roundness,
+            borderRadius,
             backgroundColor: color || colors.primary,
             width: animatedValue.interpolate({
               inputRange: [0, 1],
@@ -62,13 +64,12 @@ ProgressBar.defaultProps = {
 
 const styles = StyleSheet.create({
   bar: {
-    justifyContent: 'center',
-    position: 'absolute',
+    flex: 1,
   },
   container: {
-    height: 8,
-    justifyContent: 'center',
+    overflow: 'hidden',
     width: '100%',
+    height: 8,
     borderWidth: 1,
   },
 });