feat: add currentValueLabel in Linear/Circular Progress View

data/components.json

@@ -539,6 +539,16 @@
           "type": "component",
           "optional": true,
           "description": "Custom thumb component to display at progress position"
+        },
+        "label": {
+          "type": "component",
+          "optional": true,
+          "description": "Label content for the progress indicator"
+        },
+        "currentValueLabel": {
+          "type": "component",
+          "optional": true,
+          "description": "Custom text for current value label"
         }
       }
     },
@@ -587,6 +597,16 @@
           "type": "number",
           "optional": true,
           "description": "Width of the stroke line"
+        },
+        "label": {
+          "type": "component",
+          "optional": true,
+          "description": "Label content for the progress indicator"
+        },
+        "currentValueLabel": {
+          "type": "component",
+          "optional": true,
+          "description": "Custom text for current value label"
         }
       }
     },

example/app/testing-grounds/progress.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import ProgressTestingScreen from '~/screens/testing-grounds/progress/ProgressTestingScreen'
+
+export default function ProgressPage() {
+  return <ProgressTestingScreen />
+}

example/screens/testing-grounds/TestingGroundsScreen.tsx

@@ -34,6 +34,13 @@ const TESTING_GROUNDS_SECTIONS = [
       'Learn about static, relative, and absolute positioning modes. See how left, top, and zIndex properties work with visual examples.',
     route: '/testing-grounds/positioning',
   },
+  {
+    id: 'progress',
+    title: 'Progress Indicators',
+    description:
+      'Explore linear and circular progress indicators. Test determinate, indeterminate, and timer-based modes with custom labels and styling.',
+    route: '/testing-grounds/progress',
+  },
   {
     id: 'components',
     title: 'Components',

example/screens/testing-grounds/components/ComponentsScreen.tsx

@@ -150,10 +150,21 @@ const COMPONENTS_DATA = [
     title: 'Progress Components',
     description: 'Linear and circular progress indicators for showing completion states.',
     renderExample: () => (
-      <VoltraView style={{ width: '100%', height: 120, backgroundColor: '#1E293B', padding: 16 }}>
-        <Voltra.VStack style={{ backgroundColor: '#334155', padding: 12 }}>
-          <Voltra.LinearProgressView value={50} progressColor="#8232FF" />
-          <Voltra.CircularProgressView value={50} progressColor="#8232FF" />
+      <VoltraView style={{ width: '100%', height: 160, backgroundColor: '#1E293B', padding: 16 }}>
+        <Voltra.VStack style={{ backgroundColor: '#334155', padding: 12 }} spacing={12}>
+          <Voltra.LinearProgressView
+            value={75}
+            progressColor="#8232FF"
+            label={<Voltra.Text>Downloading...</Voltra.Text>}
+            currentValueLabel={<Voltra.Text>75%</Voltra.Text>}
+          />
+          <Voltra.CircularProgressView
+            value={45}
+            progressColor="#00D1FF"
+            label={<Voltra.Text style={{ fontSize: 10 }}>Uptime</Voltra.Text>}
+            currentValueLabel={<Voltra.Text style={{ fontSize: 10 }}>45%</Voltra.Text>}
+            style={{ width: 60, height: 60 }}
+          />
         </Voltra.VStack>
       </VoltraView>
     ),