[MOO-2434]: Rewrite progress bar and progress circle

packages/pluggableWidgets/progress-bar-native/package.json

@@ -20,8 +20,7 @@
   },
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
-    "@mendix/piw-utils-internal": "1.0.0",
-    "react-native-progress": "5.0.1"
+    "@mendix/piw-utils-internal": "1.0.0"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "*"

packages/pluggableWidgets/progress-bar-native/src/ProgressBar.tsx

@@ -1,7 +1,6 @@
-import { flattenStyles } from "@mendix/piw-native-utils-internal";
+import { Bar, flattenStyles } from "@mendix/piw-native-utils-internal";
 import { isAvailable } from "@mendix/piw-utils-internal";
 import { Text, View } from "react-native";
-import { Bar } from "react-native-progress";
 import { JSX } from "react";
 
 import { ProgressBarProps } from "../typings/ProgressBarProps";
@@ -55,15 +54,28 @@ export function ProgressBar(props: ProgressBarProps<ProgressBarStyle>): JSX.Elem
 
     return (
         <View style={styles.container}>
-            <Bar
-                testID={props.name}
-                height={Number(styles.bar.height)}
-                width={null}
-                progress={progress}
-                color={styles.fill.backgroundColor}
-                borderWidth={styles.bar.borderWidth}
-                style={styles.bar}
-            />
+            <View
+                accessible
+                accessibilityRole="progressbar"
+                accessibilityValue={{
+                    min: isAvailable(props.minimumValue) ? props.minimumValue.value!.toNumber() : 0,
+                    max: isAvailable(props.maximumValue) ? props.maximumValue.value!.toNumber() : 100,
+                    now: isAvailable(props.progressValue) ? props.progressValue.value!.toNumber() : 0
+                }}
+                accessibilityLabel="Progress bar"
+            >
+                <Bar
+                    testID={props.name}
+                    height={Number(styles.bar.height)}
+                    width={null}
+                    progress={progress}
+                    color={styles.fill.backgroundColor}
+                    borderWidth={styles.bar.borderWidth as number | undefined}
+                    borderColor={styles.bar.borderColor}
+                    borderRadius={styles.bar.borderRadius as number | undefined}
+                    unfilledColor={styles.bar.backgroundColor}
+                />
+            </View>
             {validationMessages.length > 0 && (
                 <Text style={styles.validationMessage}>{validationMessages.join("\n")}</Text>
             )}

packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx

@@ -1,7 +1,7 @@
+import { Bar } from "@mendix/piw-native-utils-internal";
 import { dynamicValue } from "@mendix/piw-utils-internal";
 import { Big } from "big.js";
-import { Text } from "react-native";
-import { Bar } from "react-native-progress";
+import { Text, View } from "react-native";
 import { render } from "@testing-library/react-native";
 
 import { ProgressBar, Props } from "../ProgressBar";
@@ -47,6 +47,30 @@ describe("ProgressBar", () => {
         expect(component.UNSAFE_queryByType(Text)).toBeNull();
     });
 
+    it("has progressbar accessibility role", () => {
+        const component = render(<ProgressBar {...createProps(60, 0, 100)} />);
+        const views = component.UNSAFE_getAllByType(View);
+        // Find the View with accessibilityRole="progressbar"
+        const accessibleElement = views.find(view => view.props.accessibilityRole === "progressbar");
+        expect(accessibleElement).toBeDefined();
+        expect(accessibleElement?.props.accessibilityValue).toEqual({
+            min: 0,
+            max: 100,
+            now: 60
+        });
+    });
+
+    it("has correct accessibility values with different range", () => {
+        const component = render(<ProgressBar {...createProps(25, 10, 50)} />);
+        const views = component.UNSAFE_getAllByType(View);
+        const accessibleElement = views.find(view => view.props.accessibilityRole === "progressbar");
+        expect(accessibleElement?.props.accessibilityValue).toEqual({
+            min: 10,
+            max: 50,
+            now: 25
+        });
+    });
+
     it("preserves expected style key set", () => {
         const keys = Object.keys(defaultProgressBarStyle).sort();
         expect(keys).toEqual(["bar", "container", "fill", "validationMessage"]);

packages/pluggableWidgets/progress-bar-native/src/__tests__/__snapshots__/ProgressBar.spec.tsx.snap

@@ -5,58 +5,53 @@ exports[`ProgressBar renders 1`] = `
   style={{}}
 >
   <View
-    animated={true}
-    animationConfig={
+    accessibilityLabel="Progress bar"
+    accessibilityRole="progressbar"
+    accessibilityValue={
       {
-        "bounciness": 0,
+        "max": 100,
+        "min": 0,
+        "now": 50,
       }
     }
-    animationType="spring"
-    indeterminate={false}
-    indeterminateAnimationDuration={1000}
-    onLayout={[Function]}
-    progress={0.5}
-    style={
-      [
-        {
-          "backgroundColor": undefined,
-          "borderColor": "rgb(98,0,238)",
-          "borderRadius": 4,
-          "borderWidth": 0,
-          "overflow": "hidden",
-          "width": null,
-        },
-        {
-          "backgroundColor": "rgba(98,0,238, 0.2)",
-          "borderRadius": 0,
-          "borderWidth": 0,
-          "height": 6,
-        },
-      ]
-    }
-    testID="progress-bar-test"
-    useNativeDriver={false}
+    accessible={true}
   >
     <View
-      collapsable={false}
+      onLayout={[Function]}
       style={
-        {
-          "backgroundColor": "rgb(98,0,238)",
-          "height": 6,
-          "transform": [
-            {
-              "translateX": -0,
-            },
-            {
-              "translateX": -0,
-            },
-            {
-              "scaleX": 0.50005,
-            },
-          ],
-        }
+        [
+          {
+            "backgroundColor": "rgba(98,0,238, 0.2)",
+            "borderColor": "rgb(98,0,238)",
+            "borderRadius": 0,
+            "borderWidth": 0,
+            "overflow": "hidden",
+            "width": undefined,
+          },
+          undefined,
+        ]
       }
-    />
+      testID="progress-bar-test"
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "rgb(98,0,238)",
+            "height": 6,
+            "transform": [
+              {
+                "translateX": -0,
+              },
+              {
+                "scaleX": 0.5,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+        testID="progress-bar-test-fill"
+      />
+    </View>
   </View>
 </View>
 `;

packages/pluggableWidgets/progress-circle-native/package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
-    "react-native-progress": "5.0.1"
+    "react-native-svg": "15.15.4"
   },
   "devDependencies": {
     "@mendix/piw-utils-internal": "*",