ProgressBar.js

import styled from 'styled-components/native';

const ProgressBar = ({progress, height = 8, outerBackgroundColor, innerBackgroundColor, padded = true}) => (
  
<Container
   height={height}
   padded={padded}
   outerBackgroundColor={outerBackgroundColor}
 >
   <Content 
     height={height}
     padded={padded}
     progress={progress} 
     innerBackgroundColor={innerBackgroundColor}
   />
 </Container>
);

const Container = styled.View`
   width: "100%";
   borderRadius: 16;
   alignItems: flex-start;
   justifyContent: center;
   height: ${props => props.height};
   backgroundColor: ${props => props.outerBackgroundColor};
   paddingHorizontal: ${props => props.padded ? 3 : 0};
`;

const Content = styled.View`
   borderRadius: 16;
   height: ${props => props.padded ? (props.height / 2) : props.height};
   backgroundColor: ${props => props.innerBackgroundColor};
   width: ${props => props.progress}%;
`;