Add circular progress bar

3 files changed, 39 insertions, 5 deletions

diff --git a/package.json b/package.json
index 63203775..42e94b39 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "react-native": "0.63.3",
     "react-native-animatable": "^1.3.3",
     "react-native-camera": "^3.44.1",
+    "react-native-circular-progress": "^1.3.7",
     "react-native-confirmation-code-field": "^6.5.0",
     "react-native-contacts": "^6.0.4",
     "react-native-controlled-mentions": "^2.2.5",
@@ -47,8 +48,8 @@
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-hyperlink": "^0.0.19",
     "react-native-image-crop-picker": "^0.36.0",
-    "react-native-image-picker": "^4.0.4",
     "react-native-image-pan-zoom": "^2.1.12",
+    "react-native-image-picker": "^4.0.4",
     "react-native-image-resizer": "^1.4.4",
     "react-native-inappbrowser-reborn": "^3.5.0",
     "react-native-linear-gradient": "^2.5.6",
@@ -61,7 +62,7 @@
     "react-native-share": "^5.1.7",
     "react-native-snap-carousel": "^3.9.1",
     "react-native-splash-screen": "^3.2.0",
-    "react-native-svg": "^12.1.0",
+    "react-native-svg": "^12.1.1",
     "react-native-vector-icons": "^7.0.0",
     "react-native-video": "^5.1.1",
     "react-promise-tracker": "^2.1.0",
@@ -111,4 +112,4 @@
       "./node_modules/react-native-gesture-handler/jestSetup.js"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index c759e5db..317a2b37 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -3,7 +3,13 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {RouteProp} from '@react-navigation/core';
 import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {createRef, useCallback, useEffect, useState} from 'react';
+import React, {
+  createRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {CameraType, FlashMode, RNCamera} from 'react-native-camera';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
@@ -17,6 +23,9 @@ import {
 import {MainStackParams} from '../../routes';
 import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils';
 import {showGIFFailureAlert, takePicture, takeVideo} from '../../utils/camera';
+import {AnimatedCircularProgress} from 'react-native-circular-progress';
+import {Easing} from 'react-native-reanimated';
+import {TAGG_LIGHT_PURPLE, TAGG_PURPLE} from '../../constants';
 
 type CameraScreenRouteProps = RouteProp<MainStackParams, 'CameraScreen'>;
 export type CameraScreenNavigationProps = StackNavigationProp<
@@ -30,12 +39,14 @@ interface CameraScreenProps {
 const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const {title, screenType} = route.params;
   const cameraRef = createRef<RNCamera>();
+  const circularProgress = createRef<AnimatedCircularProgress>();
   const tabBarHeight = useBottomTabBarHeight();
   const [cameraType, setCameraType] = useState<keyof CameraType>('front');
   const [flashMode, setFlashMode] = useState<keyof FlashMode>('off');
   const [mediaFromGallery, setMediaFromGallery] = useState<string>('');
   const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
   const [showSaveButton, setShowSaveButton] = useState<boolean>(false);
+  const [isRecording, setIsRecording] = useState<boolean>(false);
 
   useFocusEffect(
     useCallback(() => {
@@ -121,14 +132,17 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
           <FlipButton cameraType={cameraType} setCameraType={setCameraType} />
         )}
         <TouchableOpacity
+          activeOpacity={1}
           onLongPress={() => {
             takeVideo(cameraRef, (vid) => {
               navigateToCaptionScreen(true, vid.uri);
             });
+            setIsRecording(true);
           }}
           onPressOut={async () => {
             if (await cameraRef.current?.isRecording()) {
               cameraRef.current?.stopRecording();
+              setIsRecording(false);
             }
           }}
           onPress={() => {
@@ -140,6 +154,18 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
           style={styles.captureButtonContainer}>
           <View style={styles.captureButton} />
         </TouchableOpacity>
+        {isRecording && (
+          <AnimatedCircularProgress
+            size={93}
+            width={4}
+            fill={100}
+            rotation={0}
+            duration={60000 + 1000} // an extra second for UI to load
+            tintColor={TAGG_PURPLE}
+            style={styles.bottomContainer}
+            lineCap={'round'}
+          />
+        )}
         <View style={styles.bottomRightContainer}>
           {mediaFromGallery ? (
             <TaggSquareButton
diff --git a/yarn.lock b/yarn.lock
index 8dff89cf..0ec40a5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6434,6 +6434,13 @@ react-native-camera@^3.44.1:
   dependencies:
     prop-types "^15.6.2"
 
+react-native-circular-progress@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/react-native-circular-progress/-/react-native-circular-progress-1.3.7.tgz#cc430fbc612bd01134a8fc9667be107591ae6959"
+  integrity sha512-Lpe4Sb0Sdfdxopl6sEc3ooKnwlK5j1nKGq5lgi9UKDFKO6iBAszeH+PiUt6acGSRbKMH1av+9G9ni9r/6T0+nQ==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-native-confirmation-code-field@^6.5.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/react-native-confirmation-code-field/-/react-native-confirmation-code-field-6.7.0.tgz#81f5e646898addb3243cf89d41d884b0762ae962"
@@ -6657,7 +6664,7 @@ react-native-svg-transformer@^0.14.3:
     path-dirname "^1.0.2"
     semver "^5.6.0"
 
-react-native-svg@^12.1.0:
+react-native-svg@^12.1.1:
   version "12.1.1"
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.1.tgz#5f292410b8bcc07bbc52b2da7ceb22caf5bcaaee"
   integrity sha512-NIAJ8jCnXGCqGWXkkJ1GTzO4a3Md5at5sagYV8Vh4MXYnL4z5Rh428Wahjhh+LIjx40EE5xM5YtwyJBqOIba2Q==