create progress bar component (#560)

app/src/component/fileListItem/view.js

@@ -3,7 +3,6 @@ import { normalizeURI, parseURI } from 'lbry-redux';
 import {
   ActivityIndicator,
   Platform,
-  ProgressBarAndroid,
   Text,
   TouchableOpacity,
   View
@@ -15,6 +14,7 @@ import FileItemMedia from 'component/fileItemMedia';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import Link from 'component/link';
 import NsfwOverlay from 'component/nsfwOverlay';
+import ProgressBar from 'component/progressBar';
 import fileListStyle from 'styles/fileList';
 
 class FileListItem extends React.PureComponent {
@@ -88,7 +88,7 @@ class FileListItem extends React.PureComponent {
                          title={(title || name)}
                          thumbnail={thumbnail} />
           {(fileInfo && fileInfo.completed && fileInfo.download_path) &&
-            <Icon style={fileListStyle.downloadedIcon} solid={true} color={Colors.BrightGreen} name={"folder"} size={16} />}
+            <Icon style={fileListStyle.downloadedIcon} solid={true} color={Colors.NextLbryGreen} name={"folder"} size={16} />}
           <View style={fileListStyle.detailsContainer}>
             {featuredResult && <Text style={fileListStyle.featuredUri} numberOfLines={1}>{uri}</Text>}
 
@@ -112,13 +112,15 @@ class FileListItem extends React.PureComponent {
               <DateTime style={fileListStyle.publishInfo} textStyle={fileListStyle.infoText} timeAgo uri={uri} />
             </View>
 
-            {fileInfo &&
+            {(fileInfo && fileInfo.download_path) &&
               <View style={fileListStyle.downloadInfo}>
                 {!fileInfo.completed &&
-                  <View style={fileListStyle.progress}>
+                  <ProgressBar
-                    <View style={[fileListStyle.progressCompleted, { flex: this.getDownloadProgress(fileInfo) } ]} />
+                    borderRadius={3}
-                    <View style={[fileListStyle.progressRemaining, { flex: (100 - this.getDownloadProgress(fileInfo)) } ]} />
+                    color={Colors.NextLbryGreen}
-                  </View>}
+                    height={3}
+                    style={fileListStyle.progress}
+                    progress={this.getDownloadProgress(fileInfo)} />}
               </View>
             }
           </View>

app/src/component/progressBar/index.js

@@ -0,0 +1,4 @@
+import { connect } from 'react-redux';
+import ProgressBar from './view';
+
+export default connect()(ProgressBar);

app/src/component/progressBar/view.js

@@ -0,0 +1,54 @@
+// @flow
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
+
+const defaultHeight = 5;
+const defaultBorderRadius = 5;
+const minProgress = 0;
+const maxProgress = 100;
+
+class ProgressBar extends React.PureComponent {
+  static propTypes = {
+    borderRadius: PropTypes.number,
+    color: PropTypes.string.isRequired,
+    height: PropTypes.number,
+    progress: function(props, propName, componentName) {
+      const value = parseInt(props[propName], 10);
+      if (isNaN(value) || props[propName] < minProgress || props[propName] > maxProgress) {
+        return new Error('progress should be between 0 and 100');
+      }
+    },
+    style: PropTypes.any
+  };
+
+  render() {
+    const { borderRadius, color, height, progress, style } = this.props;
+    const currentProgress = Math.ceil(progress);
+
+    let styles = [];
+    if (style) {
+      if (style.length) {
+        styles = styles.concat(style);
+      } else {
+        styles.push(style);
+      }
+    }
+
+    styles.push({
+      borderRadius: borderRadius || defaultBorderRadius,
+      flexDirection: 'row',
+      height: height || defaultHeight,
+      overflow: 'hidden'
+    });
+
+    return (
+      <View style={styles}>
+        <View style={{ backgroundColor: color, borderRadius: borderRadius || defaultBorderRadius, flex: currentProgress }} />
+        <View style={{ backgroundColor: color, opacity: 0.2, flex: (100 - currentProgress) }} />
+      </View>
+    );
+  }
+}
+
+export default ProgressBar;

app/src/page/splash/view.js

@@ -5,7 +5,6 @@ import {
   Linking,
   NativeModules,
   Platform,
-  ProgressBarAndroid,
   Text,
   View
 } from 'react-native';
@@ -14,6 +13,7 @@ import { decode as atob } from 'base-64';
 import { navigateToUri } from 'utils/helper';
 import moment from 'moment';
 import AsyncStorage from '@react-native-community/async-storage';
+import ProgressBar from 'component/progressBar';
 import PropTypes from 'prop-types';
 import Colors from 'styles/colors';
 import Constants from 'constants';
@@ -271,12 +271,11 @@ class SplashScreen extends React.PureComponent {
     return (
       <View style={splashStyle.container}>
         <Text style={splashStyle.title}>LBRY</Text>
-        {'android' === Platform.OS && this.state.isDownloadingHeaders &&
+        {this.state.isDownloadingHeaders &&
-        <ProgressBarAndroid color={Colors.White}
+          <ProgressBar
-                            indeterminate={false}
+            color={Colors.White}
-                            styleAttr={"Horizontal"}
             style={splashStyle.progress}
-                            progress={this.state.headersDownloadProgress/100.0} />}
+            progress={this.state.headersDownloadProgress} />}
         {!this.state.isDownloadingHeaders && <ActivityIndicator color={Colors.White} style={splashStyle.loading} size={"small"} />}
         <Text style={splashStyle.message}>{message}</Text>
         <Text style={splashStyle.details}>{details}</Text>

app/src/styles/fileList.js

@@ -71,9 +71,6 @@ const fileListStyle = StyleSheet.create({
   },
   progress: {
     marginTop: (screenWidthPixels <= 720) ? 2 : 4,
-    height: 3,
-    flex: 1,
-    flexDirection: 'row'
   },
   progressCompleted: {
     backgroundColor: Colors.LbryGreen