added the circular progress bar

app/components/CourseCard.tsx

@@ -41,10 +41,9 @@ export const CourseCard = observer(function CourseCard(props: CourseCardProps) {
         style={$image}
       />
       <View style={$subContainer}>
-        <View>
+        <View style={$subContainerChild}>
           <Text style={$title} text="Cohort 3.0 | Web Dev" />
-          {/* TODO: Change this to a circular progress */}
-          <Progress progress={50} />
+          <Progress preset="circularProgress" progress={50} size={50} />
         </View>
         <Button onPress={handleViewContentPress} text="View Content" />
         <TouchableOpacity activeOpacity={0.8} onPress={handleJoinDiscordPress} style={$footer}>
@@ -74,6 +73,12 @@ const $subContainer: ViewStyle = {
   gap: spacing.md,
 }
 
+const $subContainerChild: ViewStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+}
+
 const $title: TextStyle = {
   color: colors.content.primary,
   fontFamily: typography.primary.bold,

app/components/Progress.tsx

@@ -1,50 +1,150 @@
-import * as React from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
+import React, { useState } from "react"
+import { View, StyleProp, TextStyle, ViewStyle, StyleSheet } from "react-native"
 import { observer } from "mobx-react-lite"
-import { spacing } from "app/theme"
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedProps,
+  useDerivedValue,
+  withTiming,
+} from "react-native-reanimated"
+import { Svg, Circle } from "react-native-svg"
 import { Text } from "app/components/Text"
+import { spacing } from "app/theme"
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle)
 
-export interface ProgressProps {
-  /** a required prop to specify the progress. */
+export interface ProgressDisplayProps {
+  preset?: "linearProgress" | "circularProgress"
   progress: number
-  /** an optional style override useful for padding & margin. */
-  style?: StyleProp<ViewStyle>
+
+  // Linear Progress specific props
+  linearStyle?: StyleProp<ViewStyle>
+
+  // Circular Progress specific props
+  size?: number
+  strokeWidth?: number
+  showLabel?: boolean
+  outerCircleColor?: string
+  progressCircleColor?: string
+  labelColor?: string
+  labelStyle?: StyleProp<TextStyle>
+  labelSize?: number
 }
 
-export const Progress = observer(function Progress(props: ProgressProps) {
-  const { progress, style } = props
-  const $styles = [$container, style]
+export const Progress = observer(function ProgressDisplay(props: ProgressDisplayProps) {
+  const {
+    preset = "linearProgress",
+    progress,
+    linearStyle,
+    size = 80,
+    strokeWidth = (5 * size) / 100,
+    showLabel = true,
+    labelSize = (20 * size) / 100,
+    labelColor = "white",
+    outerCircleColor = "white",
+    progressCircleColor = "dodgerblue",
+    labelStyle,
+  } = props
+
+  if (preset === "circularProgress") {
+    const radius = (size - strokeWidth) / 2
+    const circum = radius * 2 * Math.PI
+    const [LabelText, SetLabelText] = useState(0)
+
+    const derivedProgressValue = useDerivedValue(() => {
+      if (showLabel) runOnJS(SetLabelText)(Math.min(progress, 100))
+      return withTiming(progress)
+    }, [progress])
+
+    const circleAnimatedProps = useAnimatedProps(() => {
+      const SVG_Progress = interpolate(
+        derivedProgressValue.value,
+        [0, 100],
+        [100, 0],
+      )
+
+      return {
+        strokeDashoffset: radius * Math.PI * 2 * (SVG_Progress / 100),
+      }
+    })
+
+    return (
+      <View style={styles.container}>
+        <Svg width={size} height={size}>
+          <Circle
+            stroke={outerCircleColor}
+            fill="none"
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+          />
+
+          <AnimatedCircle
+            stroke={progressCircleColor}
+            fill="none"
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeDasharray={`${circum} ${circum}`}
+            strokeLinecap="round"
+            transform={`rotate(-90, ${size / 2}, ${size / 2})`}
+            strokeWidth={strokeWidth}
+            animatedProps={circleAnimatedProps}
+          />
+        </Svg>
+        {showLabel && (
+          <View style={[styles.labelView, { width: size, height: size }]}>
+            <Animated.Text style={[{ color: labelColor, fontSize: labelSize }, labelStyle]}>
+              {`${LabelText}%`}
+            </Animated.Text>
+          </View>
+        )}
+      </View>
+    )
+  }
 
   return (
-    <View style={$styles}>
-      <View style={$bar}>
-        <View style={[$fill, { width: `${progress}%` }]} />
+    <View style={[styles.linearContainer, linearStyle]}>
+      <View style={styles.linearBar}>
+        <View style={[styles.linearFill, { width: `${progress}%` }]} />
       </View>
-      <Text style={$text}>{progress}%</Text>
+      <Text style={styles.linearText}>{progress}%</Text>
     </View>
   )
 })
 
-const $container: ViewStyle = {
-  flexDirection: "row",
-  alignItems: "center",
-}
-
-const $bar: ViewStyle = {
-  backgroundColor: "#0e1829",
-  borderRadius: spacing.xxs,
-  flex: 1,
-  height: spacing.xs,
-}
-
-const $fill: ViewStyle = {
-  backgroundColor: "#1d3255",
-  borderRadius: spacing.xxxs,
-  height: "100%",
-}
-
-const $text: TextStyle = {
-  color: "#9CA3AF",
-  fontSize: spacing.md,
-  marginLeft: spacing.sm,
-}
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  labelView: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  linearContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  linearBar: {
+    backgroundColor: "#0e1829",
+    borderRadius: spacing.xxs,
+    flex: 1,
+    height: spacing.xs,
+  },
+  linearFill: {
+    backgroundColor: "#1d3255",
+    borderRadius: spacing.xxxs,
+    height: "100%",
+  },
+  linearText: {
+    color: "#9CA3AF",
+    fontSize: spacing.md,
+    marginLeft: spacing.sm,
+  },
+})

app/models/RootStore.ts

@@ -1,31 +1,21 @@
 import { Instance, SnapshotOut, types } from "mobx-state-tree"
 import { UserStoreModel } from "./UserStore"
-import { ToastPreset } from "app/constants"
 import { ToastModel } from "./ToastStore"
+import { toastStoreDefaults, userStoreDefaults } from "./helpers/defaultValues"
 
 /**
  * A RootStore model.
  */
 export const RootStoreModel = types.model("RootStore").props({
-  userStore: types.optional(UserStoreModel, {
-    authToken: undefined,
-    email: "",
-    password: "",
-    username: "",
-  }),
-  // TODO: Check how to remove the default values from here and move it in a separate file maybe
-  toastStore: types.optional(ToastModel, {
-    message: null,
-    preset: ToastPreset.Success,
-    showToast: false,
-  }),
+  userStore: types.optional(UserStoreModel, userStoreDefaults),
+  toastStore: types.optional(ToastModel, toastStoreDefaults),
 })
 
 /**
  * The RootStore instance.
  */
-export interface RootStore extends Instance<typeof RootStoreModel> {}
+export interface RootStore extends Instance<typeof RootStoreModel> { }
 /**
  * The data of a RootStore.
  */
-export interface RootStoreSnapshot extends SnapshotOut<typeof RootStoreModel> {}
+export interface RootStoreSnapshot extends SnapshotOut<typeof RootStoreModel> { }

app/models/helpers/defaultValues.ts

@@ -0,0 +1,15 @@
+import { ToastPreset } from "app/constants"
+
+export const userStoreDefaults = {
+  authToken: undefined,
+  email: "",
+  password: "",
+  username: "",
+}
+
+export const toastStoreDefaults = {
+  message: null,
+  preset: ToastPreset.Success,
+  showToast: false,
+}
+