Change progress bar style

3 files changed, 17 insertions, 9 deletions

diff --git a/package.json b/package.json
index fea5aa11..0977914d 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "react-native-photo-manipulator": "^1.2.4",
     "react-native-picker-select": "^7.0.0",
     "react-native-pinchable": "^0.2.1",
+    "react-native-progress": "^5.0.0",
     "react-native-push-notification": "^7.4.0",
     "react-native-push-notifications": "^3.0.10",
     "react-native-reanimated": "2.0.0-rc.0",
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index c232986d..57c42654 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -14,14 +14,14 @@ import {
 } from 'react-native';
 // @ts-ignore
 import Pinchable from 'react-native-pinchable';
+import * as Progress from 'react-native-progress';
 import Animated, {EasingNode} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import SimpleGradientProgressbarView from 'react-native-simple-gradient-progressbar-view';
 import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TaggedUsersDrawer} from '.';
 import PauseIcon from '../../assets/icons/pause-icon.svg';
-import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants/constants';
+import {TAGG_PURPLE} from '../../constants/constants';
 import {headerBarOptions} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
 import {deleteMomentTag, loadMomentTags} from '../../services';
@@ -262,14 +262,14 @@ const MomentPost: React.FC<MomentPostProps> = ({
 
   const ProgressBar = () => (
     <View style={styles.progressBaContainer}>
-      <SimpleGradientProgressbarView
+      <Progress.Bar
         progress={videoProgress}
-        style={styles.progressBar}
-        fromColor={TAGG_PURPLE}
-        toColor={TAGG_LIGHT_BLUE_2}
-      />
-      <View
-        style={[styles.progressDot, {left: videoProgress * SCREEN_WIDTH - 5}]}
+        width={SCREEN_WIDTH}
+        color={'white'}
+        borderRadius={0}
+        borderWidth={0}
+        height={3}
+        unfilledColor={'rgba(255,255,255,0.4)'}
       />
     </View>
   );
diff --git a/yarn.lock b/yarn.lock
index 040ea980..e2c27786 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7388,6 +7388,13 @@ react-native-pinchable@^0.2.1:
   resolved "https://registry.yarnpkg.com/react-native-pinchable/-/react-native-pinchable-0.2.1.tgz#93cf6ce78f65cef2f1364187320e363170d2e212"
   integrity sha512-LRSLCrizUX/XtYwwBxyuYL4xDLUhyPbBvD/tUpzns0PX2Zs0pR0fd/LsFm/n6tEigCLL/0KlDrOVhOdW3wtz+Q==
 
+react-native-progress@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-progress/-/react-native-progress-5.0.0.tgz#f5ac6ceaeee27f184c660b00f29419e82a9d0ab0"
+  integrity sha512-KjnGIt3r9i5Kn2biOD9fXLJocf0bwxPRxOyAgXEnZTJQU2O+HyzgGFRCbM5h3izm9kKIkSc1txh8aGmMafCD9A==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-native-push-notification@^7.4.0:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/react-native-push-notification/-/react-native-push-notification-7.4.0.tgz#81192356eddfee8eeaf72a9a696c7c90bf5b0ece"