@draftbit/core 48.5.6 → 48.5.7-efd08d.2

package/src/components/Progress/CircularProgress/index.tsx

@@ -1,28 +1,28 @@
-import React from "react";
-import IndeterminateProgress from "../IndeterminateProgress";
-import {
-  CircularProgressProps,
-  IndeterminateProgressProps,
-  ValueProgressProps,
-} from "../ProgressCommon";
-import { CircularProgress as CircularProgressComponent } from "./CircularProgress";
-import { withTheme } from "../../../theming";
-
-const CircularProgress: React.FC<
-  ValueProgressProps & IndeterminateProgressProps & CircularProgressProps
-> = (props) => {
-  if (props.indeterminate) {
-    return (
-      <IndeterminateProgress
-        ProgressComponent={
-          CircularProgressComponent as React.FunctionComponent<ValueProgressProps>
-        }
-        {...props}
-      />
-    );
-  } else {
-    return <CircularProgressComponent {...props} />;
-  }
-};
-
-export default withTheme(CircularProgress);
+import React from "react";
+import IndeterminateProgress from "../IndeterminateProgress";
+import {
+  CircularProgressProps,
+  IndeterminateProgressProps,
+  ValueProgressProps,
+} from "../ProgressCommon";
+import { CircularProgress as CircularProgressComponent } from "./CircularProgress";
+import { withTheme } from "../../../theming";
+
+const CircularProgress: React.FC<
+  ValueProgressProps & IndeterminateProgressProps & CircularProgressProps
+> = (props) => {
+  if (props.indeterminate) {
+    return (
+      <IndeterminateProgress
+        ProgressComponent={
+          CircularProgressComponent as React.FunctionComponent<ValueProgressProps>
+        }
+        {...props}
+      />
+    );
+  } else {
+    return <CircularProgressComponent {...props} />;
+  }
+};
+
+export default withTheme(CircularProgress);

package/src/components/Progress/IndeterminateProgress.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { runOnJS, useAnimatedReaction, useSharedValue, withTiming, } from "react-native-reanimated";
+import { DEFAULT_ANIMATION_DURATION, } from "./ProgressCommon";
+const IndeterminateProgress = ({ ProgressComponent, ...rest }) => {
+    const [pathWidth, setPathWidth] = React.useState(0);
+    const [value, setValue] = React.useState(0);
+    const [dashOffset, setDashOffset] = React.useState(0);
+    const animationDuration = rest.animationDuration || DEFAULT_ANIMATION_DURATION;
+    const currentOffset = useSharedValue(0);
+    // dashOffset animation done through state due to it not being a 'native' prop that reanimated can animate on the native thread
+    useAnimatedReaction(() => currentOffset.value, (result) => runOnJS(setDashOffset)(result));
+    const repeatIndeterminateAnimation = React.useCallback(() => {
+        if (value === 0) {
+            setValue(100);
+            currentOffset.value = withTiming(pathWidth, {
+                duration: animationDuration,
+            });
+        }
+        else {
+            setValue(0);
+            currentOffset.value = withTiming(0, {
+                duration: animationDuration,
+            });
+        }
+    }, [currentOffset, value, animationDuration, pathWidth]);
+    React.useEffect(() => {
+        const timeout = setTimeout(() => {
+            repeatIndeterminateAnimation();
+        }, animationDuration);
+        return () => clearTimeout(timeout);
+    }, [animationDuration, repeatIndeterminateAnimation]);
+    return (React.createElement(ProgressComponent, { ...rest, testID: rest.testID || "indeterminate-progress", onFullPathWidth: (width) => {
+            var _a;
+            setPathWidth(width);
+            (_a = rest.onFullPathWidth) === null || _a === void 0 ? void 0 : _a.call(rest, width);
+        }, dashOffset: dashOffset, dashGap: pathWidth / 2, dashWidth: pathWidth / 2, animationDuration: animationDuration, minimumValue: 0, maximumValue: 100, value: 100 }));
+};
+export default IndeterminateProgress;
+//# sourceMappingURL=IndeterminateProgress.js.map

package/src/components/Progress/IndeterminateProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndeterminateProgress.js","sourceRoot":"","sources":["IndeterminateProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,OAAO,EACP,mBAAmB,EACnB,cAAc,EACd,UAAU,GACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,0BAA0B,GAE3B,MAAM,kBAAkB,CAAC;AAM1B,MAAM,qBAAqB,GAAyC,CAAC,EACnE,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,iBAAiB,GACrB,IAAI,CAAC,iBAAiB,IAAI,0BAA0B,CAAC;IAEvD,MAAM,aAAa,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAExC,+HAA+H;IAC/H,mBAAmB,CACjB,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,EACzB,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAC3C,CAAC;IAEF,MAAM,4BAA4B,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1D,IAAI,KAAK,KAAK,CAAC,EAAE;YACf,QAAQ,CAAC,GAAG,CAAC,CAAC;YACd,aAAa,CAAC,KAAK,GAAG,UAAU,CAAC,SAAS,EAAE;gBAC1C,QAAQ,EAAE,iBAAiB;aAC5B,CAAC,CAAC;SACJ;aAAM;YACL,QAAQ,CAAC,CAAC,CAAC,CAAC;YACZ,aAAa,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE;gBAClC,QAAQ,EAAE,iBAAiB;aAC5B,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,4BAA4B,EAAE,CAAC;QACjC,CAAC,EAAE,iBAAiB,CAAC,CAAC;QACtB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,iBAAiB,EAAE,4BAA4B,CAAC,CAAC,CAAC;IAEtD,OAAO,CACL,oBAAC,iBAAiB,OACZ,IAAI,EACR,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,wBAAwB,EAC/C,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE;;YACzB,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,MAAA,IAAI,CAAC,eAAe,qDAAG,KAAK,CAAC,CAAC;QAChC,CAAC,EACD,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,SAAS,GAAG,CAAC,EACtB,SAAS,EAAE,SAAS,GAAG,CAAC,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,CAAC,EACf,YAAY,EAAE,GAAG,EACjB,KAAK,EAAE,GAAG,GACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/src/components/Progress/IndeterminateProgress.tsx

@@ -1,76 +1,76 @@
-import React from "react";
-import {
-  runOnJS,
-  useAnimatedReaction,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import {
-  BaseProgressProps,
-  DEFAULT_ANIMATION_DURATION,
-  ValueProgressProps,
-} from "./ProgressCommon";
-
-interface IndeterminateProgressProps extends BaseProgressProps {
-  ProgressComponent: React.FunctionComponent<ValueProgressProps>;
-}
-
-const IndeterminateProgress: React.FC<IndeterminateProgressProps> = ({
-  ProgressComponent,
-  ...rest
-}) => {
-  const [pathWidth, setPathWidth] = React.useState(0);
-  const [value, setValue] = React.useState(0);
-  const [dashOffset, setDashOffset] = React.useState(0);
-  const animationDuration =
-    rest.animationDuration || DEFAULT_ANIMATION_DURATION;
-
-  const currentOffset = useSharedValue(0);
-
-  // dashOffset animation done through state due to it not being a 'native' prop that reanimated can animate on the native thread
-  useAnimatedReaction(
-    () => currentOffset.value,
-    (result) => runOnJS(setDashOffset)(result)
-  );
-
-  const repeatIndeterminateAnimation = React.useCallback(() => {
-    if (value === 0) {
-      setValue(100);
-      currentOffset.value = withTiming(pathWidth, {
-        duration: animationDuration,
-      });
-    } else {
-      setValue(0);
-      currentOffset.value = withTiming(0, {
-        duration: animationDuration,
-      });
-    }
-  }, [currentOffset, value, animationDuration, pathWidth]);
-
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      repeatIndeterminateAnimation();
-    }, animationDuration);
-    return () => clearTimeout(timeout);
-  }, [animationDuration, repeatIndeterminateAnimation]);
-
-  return (
-    <ProgressComponent
-      {...rest}
-      testID={rest.testID || "indeterminate-progress"}
-      onFullPathWidth={(width) => {
-        setPathWidth(width);
-        rest.onFullPathWidth?.(width);
-      }}
-      dashOffset={dashOffset}
-      dashGap={pathWidth / 2}
-      dashWidth={pathWidth / 2}
-      animationDuration={animationDuration}
-      minimumValue={0}
-      maximumValue={100}
-      value={100}
-    />
-  );
-};
-
-export default IndeterminateProgress;
+import React from "react";
+import {
+  runOnJS,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import {
+  BaseProgressProps,
+  DEFAULT_ANIMATION_DURATION,
+  ValueProgressProps,
+} from "./ProgressCommon";
+
+interface IndeterminateProgressProps extends BaseProgressProps {
+  ProgressComponent: React.FunctionComponent<ValueProgressProps>;
+}
+
+const IndeterminateProgress: React.FC<IndeterminateProgressProps> = ({
+  ProgressComponent,
+  ...rest
+}) => {
+  const [pathWidth, setPathWidth] = React.useState(0);
+  const [value, setValue] = React.useState(0);
+  const [dashOffset, setDashOffset] = React.useState(0);
+  const animationDuration =
+    rest.animationDuration || DEFAULT_ANIMATION_DURATION;
+
+  const currentOffset = useSharedValue(0);
+
+  // dashOffset animation done through state due to it not being a 'native' prop that reanimated can animate on the native thread
+  useAnimatedReaction(
+    () => currentOffset.value,
+    (result) => runOnJS(setDashOffset)(result)
+  );
+
+  const repeatIndeterminateAnimation = React.useCallback(() => {
+    if (value === 0) {
+      setValue(100);
+      currentOffset.value = withTiming(pathWidth, {
+        duration: animationDuration,
+      });
+    } else {
+      setValue(0);
+      currentOffset.value = withTiming(0, {
+        duration: animationDuration,
+      });
+    }
+  }, [currentOffset, value, animationDuration, pathWidth]);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      repeatIndeterminateAnimation();
+    }, animationDuration);
+    return () => clearTimeout(timeout);
+  }, [animationDuration, repeatIndeterminateAnimation]);
+
+  return (
+    <ProgressComponent
+      {...rest}
+      testID={rest.testID || "indeterminate-progress"}
+      onFullPathWidth={(width) => {
+        setPathWidth(width);
+        rest.onFullPathWidth?.(width);
+      }}
+      dashOffset={dashOffset}
+      dashGap={pathWidth / 2}
+      dashWidth={pathWidth / 2}
+      animationDuration={animationDuration}
+      minimumValue={0}
+      maximumValue={100}
+      value={100}
+    />
+  );
+};
+
+export default IndeterminateProgress;

package/src/components/Progress/LinearProgress/LinearProgress.js

@@ -0,0 +1,56 @@
+import React from "react";
+import Svg, { Line } from "react-native-svg";
+import { View } from "react-native";
+import Animated, { useAnimatedProps, useSharedValue, withTiming, } from "react-native-reanimated";
+import { DEFAULT_ANIMATION_DURATION, } from "../ProgressCommon";
+export const AnimatedLine = Animated.createAnimatedComponent(Line);
+export const LinearProgress = ({ theme, minimumValue = 0, maximumValue = 100, value = minimumValue, thickness = 10, trackThickness = thickness, color = theme.colors.primary, trackColor = theme.colors.divider, trackOpacity = 1, showTrack = true, animationDuration = DEFAULT_ANIMATION_DURATION, isAnimated = true, lineCap = "round", trackLineCap = lineCap, dashWidth, trackDashWidth, dashGap, trackDashGap, dashOffset, trackDashOffset, customDashArray, trackCustomDashArray, onFullPathWidth, style, testID, }) => {
+    const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
+    const dashArray = dashWidth !== undefined
+        ? `${dashWidth} ${dashGap || dashWidth}`
+        : undefined;
+    const trackDashArray = trackDashWidth !== undefined
+        ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
+        : undefined;
+    const maxThickness = Math.max(thickness, trackThickness);
+    const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
+    const progressLineWidth = svgContainerWidth - thicknessOffset;
+    const trackProgressLineWidth = svgContainerWidth - thicknessOffset;
+    const currentFillPercentage = value / (maximumValue + minimumValue);
+    const currentProgressLineWidth = useSharedValue(0);
+    const progressLineAnimatedProps = useAnimatedProps(() => {
+        const isBelowMinWidth = currentProgressLineWidth.value <= thicknessOffset;
+        return {
+            x2: Math.min(progressLineWidth, currentProgressLineWidth.value),
+            strokeOpacity: isBelowMinWidth ? 0.0 : 1.0,
+        };
+    });
+    React.useEffect(() => {
+        currentProgressLineWidth.value = withTiming(progressLineWidth * currentFillPercentage, {
+            duration: isAnimated ? animationDuration : 0,
+        });
+    }, [
+        value,
+        progressLineWidth,
+        currentFillPercentage,
+        animationDuration,
+        currentProgressLineWidth,
+        maximumValue,
+        minimumValue,
+        isAnimated,
+    ]);
+    return (React.createElement(View, { onLayout: (event) => {
+            const width = event.nativeEvent.layout.width;
+            setSvgContainerWidth(width);
+            onFullPathWidth === null || onFullPathWidth === void 0 ? void 0 : onFullPathWidth(width);
+        }, style: [
+            {
+                height: maxThickness,
+            },
+            style,
+        ] },
+        React.createElement(Svg, { testID: testID !== null && testID !== void 0 ? testID : "linear-progress-component", style: { flex: 1 } },
+            showTrack && (React.createElement(Line, { x1: thicknessOffset, y1: thicknessOffset, x2: trackProgressLineWidth, y2: thicknessOffset, stroke: trackColor, strokeWidth: trackThickness, strokeOpacity: trackOpacity, strokeLinecap: trackLineCap, strokeDasharray: trackCustomDashArray || trackDashArray, strokeDashoffset: trackDashOffset })),
+            React.createElement(AnimatedLine, { animatedProps: progressLineAnimatedProps, x1: thicknessOffset, y1: thicknessOffset, y2: thicknessOffset, stroke: color, strokeWidth: thickness, strokeLinecap: lineCap, strokeDasharray: customDashArray || dashArray, strokeDashoffset: dashOffset, onPress: () => { } }))));
+};
+//# sourceMappingURL=LinearProgress.js.map

package/src/components/Progress/LinearProgress/LinearProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearProgress.js","sourceRoot":"","sources":["LinearProgress.tsx"],"names":[],"mappings":"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"}

package/src/components/Progress/LinearProgress/LinearProgress.tsx

@@ -1,133 +1,133 @@
-import React from "react";
-import Svg, { Line, LineProps } from "react-native-svg";
-import { View } from "react-native";
-import Animated, {
-  useAnimatedProps,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import {
-  DEFAULT_ANIMATION_DURATION,
-  ValueProgressProps,
-} from "../ProgressCommon";
-
-export const AnimatedLine = Animated.createAnimatedComponent(Line);
-
-export const LinearProgress: React.FC<ValueProgressProps> = ({
-  theme,
-  minimumValue = 0,
-  maximumValue = 100,
-  value = minimumValue,
-  thickness = 10,
-  trackThickness = thickness,
-  color = theme.colors.primary,
-  trackColor = theme.colors.divider,
-  trackOpacity = 1,
-  showTrack = true,
-  animationDuration = DEFAULT_ANIMATION_DURATION,
-  isAnimated = true,
-  lineCap = "round",
-  trackLineCap = lineCap,
-  dashWidth,
-  trackDashWidth,
-  dashGap,
-  trackDashGap,
-  dashOffset,
-  trackDashOffset,
-  customDashArray,
-  trackCustomDashArray,
-  onFullPathWidth,
-  style,
-  testID,
-}) => {
-  const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
-
-  const dashArray =
-    dashWidth !== undefined
-      ? `${dashWidth} ${dashGap || dashWidth}`
-      : undefined;
-  const trackDashArray =
-    trackDashWidth !== undefined
-      ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
-      : undefined;
-
-  const maxThickness = Math.max(thickness, trackThickness);
-  const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
-
-  const progressLineWidth = svgContainerWidth - thicknessOffset;
-  const trackProgressLineWidth = svgContainerWidth - thicknessOffset;
-
-  const currentFillPercentage = value / (maximumValue + minimumValue);
-  const currentProgressLineWidth = useSharedValue(0);
-
-  const progressLineAnimatedProps = useAnimatedProps<LineProps>(() => {
-    const isBelowMinWidth = currentProgressLineWidth.value <= thicknessOffset;
-    return {
-      x2: Math.min(progressLineWidth, currentProgressLineWidth.value), //Prevents going beyond the max width
-      strokeOpacity: isBelowMinWidth ? 0.0 : 1.0,
-    };
-  });
-
-  React.useEffect(() => {
-    currentProgressLineWidth.value = withTiming(
-      progressLineWidth * currentFillPercentage,
-      {
-        duration: isAnimated ? animationDuration : 0,
-      }
-    );
-  }, [
-    value,
-    progressLineWidth,
-    currentFillPercentage,
-    animationDuration,
-    currentProgressLineWidth,
-    maximumValue,
-    minimumValue,
-    isAnimated,
-  ]);
-
-  return (
-    <View
-      onLayout={(event) => {
-        const width = event.nativeEvent.layout.width;
-        setSvgContainerWidth(width);
-        onFullPathWidth?.(width);
-      }}
-      style={[
-        {
-          height: maxThickness,
-        },
-        style,
-      ]}
-    >
-      <Svg testID={testID ?? "linear-progress-component"} style={{ flex: 1 }}>
-        {showTrack && (
-          <Line
-            x1={thicknessOffset}
-            y1={thicknessOffset}
-            x2={trackProgressLineWidth}
-            y2={thicknessOffset}
-            stroke={trackColor}
-            strokeWidth={trackThickness}
-            strokeOpacity={trackOpacity}
-            strokeLinecap={trackLineCap}
-            strokeDasharray={trackCustomDashArray || trackDashArray}
-            strokeDashoffset={trackDashOffset}
-          />
-        )}
-        <AnimatedLine
-          animatedProps={progressLineAnimatedProps}
-          x1={thicknessOffset}
-          y1={thicknessOffset}
-          y2={thicknessOffset}
-          stroke={color}
-          strokeWidth={thickness}
-          strokeLinecap={lineCap}
-          strokeDasharray={customDashArray || dashArray}
-          strokeDashoffset={dashOffset}
-          onPress={() => {}} //Addresses reanimated issue with SVG (https://github.com/software-mansion/react-native-reanimated/issues/3321#issuecomment-1256983430)
-        />
-      </Svg>
-    </View>
-  );
-};
+import React from "react";
+import Svg, { Line, LineProps } from "react-native-svg";
+import { View } from "react-native";
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import {
+  DEFAULT_ANIMATION_DURATION,
+  ValueProgressProps,
+} from "../ProgressCommon";
+
+export const AnimatedLine = Animated.createAnimatedComponent(Line);
+
+export const LinearProgress: React.FC<ValueProgressProps> = ({
+  theme,
+  minimumValue = 0,
+  maximumValue = 100,
+  value = minimumValue,
+  thickness = 10,
+  trackThickness = thickness,
+  color = theme.colors.primary,
+  trackColor = theme.colors.divider,
+  trackOpacity = 1,
+  showTrack = true,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+  isAnimated = true,
+  lineCap = "round",
+  trackLineCap = lineCap,
+  dashWidth,
+  trackDashWidth,
+  dashGap,
+  trackDashGap,
+  dashOffset,
+  trackDashOffset,
+  customDashArray,
+  trackCustomDashArray,
+  onFullPathWidth,
+  style,
+  testID,
+}) => {
+  const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
+
+  const dashArray =
+    dashWidth !== undefined
+      ? `${dashWidth} ${dashGap || dashWidth}`
+      : undefined;
+  const trackDashArray =
+    trackDashWidth !== undefined
+      ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
+      : undefined;
+
+  const maxThickness = Math.max(thickness, trackThickness);
+  const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
+
+  const progressLineWidth = svgContainerWidth - thicknessOffset;
+  const trackProgressLineWidth = svgContainerWidth - thicknessOffset;
+
+  const currentFillPercentage = value / (maximumValue + minimumValue);
+  const currentProgressLineWidth = useSharedValue(0);
+
+  const progressLineAnimatedProps = useAnimatedProps<LineProps>(() => {
+    const isBelowMinWidth = currentProgressLineWidth.value <= thicknessOffset;
+    return {
+      x2: Math.min(progressLineWidth, currentProgressLineWidth.value), //Prevents going beyond the max width
+      strokeOpacity: isBelowMinWidth ? 0.0 : 1.0,
+    };
+  });
+
+  React.useEffect(() => {
+    currentProgressLineWidth.value = withTiming(
+      progressLineWidth * currentFillPercentage,
+      {
+        duration: isAnimated ? animationDuration : 0,
+      }
+    );
+  }, [
+    value,
+    progressLineWidth,
+    currentFillPercentage,
+    animationDuration,
+    currentProgressLineWidth,
+    maximumValue,
+    minimumValue,
+    isAnimated,
+  ]);
+
+  return (
+    <View
+      onLayout={(event) => {
+        const width = event.nativeEvent.layout.width;
+        setSvgContainerWidth(width);
+        onFullPathWidth?.(width);
+      }}
+      style={[
+        {
+          height: maxThickness,
+        },
+        style,
+      ]}
+    >
+      <Svg testID={testID ?? "linear-progress-component"} style={{ flex: 1 }}>
+        {showTrack && (
+          <Line
+            x1={thicknessOffset}
+            y1={thicknessOffset}
+            x2={trackProgressLineWidth}
+            y2={thicknessOffset}
+            stroke={trackColor}
+            strokeWidth={trackThickness}
+            strokeOpacity={trackOpacity}
+            strokeLinecap={trackLineCap}
+            strokeDasharray={trackCustomDashArray || trackDashArray}
+            strokeDashoffset={trackDashOffset}
+          />
+        )}
+        <AnimatedLine
+          animatedProps={progressLineAnimatedProps}
+          x1={thicknessOffset}
+          y1={thicknessOffset}
+          y2={thicknessOffset}
+          stroke={color}
+          strokeWidth={thickness}
+          strokeLinecap={lineCap}
+          strokeDasharray={customDashArray || dashArray}
+          strokeDashoffset={dashOffset}
+          onPress={() => {}} //Addresses reanimated issue with SVG (https://github.com/software-mansion/react-native-reanimated/issues/3321#issuecomment-1256983430)
+        />
+      </Svg>
+    </View>
+  );
+};

package/src/components/Progress/LinearProgress/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import IndeterminateProgress from "../IndeterminateProgress";
+import { LinearProgress as LinearProgressComponent } from "./LinearProgress";
+import { withTheme } from "../../../theming";
+const LinearProgress = (props) => {
+    if (props.indeterminate) {
+        return (React.createElement(IndeterminateProgress, { ProgressComponent: LinearProgressComponent, ...props }));
+    }
+    else {
+        return React.createElement(LinearProgressComponent, { ...props });
+    }
+};
+export default withTheme(LinearProgress);
+//# sourceMappingURL=index.js.map

package/src/components/Progress/LinearProgress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,qBAAqB,MAAM,0BAA0B,CAAC;AAK7D,OAAO,EAAE,cAAc,IAAI,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,cAAc,GAEhB,CAAC,KAAK,EAAE,EAAE;IACZ,IAAI,KAAK,CAAC,aAAa,EAAE;QACvB,OAAO,CACL,oBAAC,qBAAqB,IACpB,iBAAiB,EAAE,uBAAuB,KACtC,KAAK,GACT,CACH,CAAC;KACH;SAAM;QACL,OAAO,oBAAC,uBAAuB,OAAK,KAAK,GAAI,CAAC;KAC/C;AACH,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC,cAAc,CAAC,CAAC"}

package/src/components/Progress/LinearProgress/index.tsx

@@ -1,25 +1,25 @@
-import React from "react";
-import IndeterminateProgress from "../IndeterminateProgress";
-import {
-  IndeterminateProgressProps,
-  ValueProgressProps,
-} from "../ProgressCommon";
-import { LinearProgress as LinearProgressComponent } from "./LinearProgress";
-import { withTheme } from "../../../theming";
-
-const LinearProgress: React.FC<
-  ValueProgressProps & IndeterminateProgressProps
-> = (props) => {
-  if (props.indeterminate) {
-    return (
-      <IndeterminateProgress
-        ProgressComponent={LinearProgressComponent}
-        {...props}
-      />
-    );
-  } else {
-    return <LinearProgressComponent {...props} />;
-  }
-};
-
-export default withTheme(LinearProgress);
+import React from "react";
+import IndeterminateProgress from "../IndeterminateProgress";
+import {
+  IndeterminateProgressProps,
+  ValueProgressProps,
+} from "../ProgressCommon";
+import { LinearProgress as LinearProgressComponent } from "./LinearProgress";
+import { withTheme } from "../../../theming";
+
+const LinearProgress: React.FC<
+  ValueProgressProps & IndeterminateProgressProps
+> = (props) => {
+  if (props.indeterminate) {
+    return (
+      <IndeterminateProgress
+        ProgressComponent={LinearProgressComponent}
+        {...props}
+      />
+    );
+  } else {
+    return <LinearProgressComponent {...props} />;
+  }
+};
+
+export default withTheme(LinearProgress);

package/src/components/Progress/ProgressCommon.js

@@ -0,0 +1,2 @@
+export const DEFAULT_ANIMATION_DURATION = 500;
+//# sourceMappingURL=ProgressCommon.js.map