@jobber/components-native 0.105.1 → 0.105.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.105.1",
+  "version": "0.105.3",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -71,7 +71,7 @@
   "devDependencies": {
     "@babel/runtime": "^7.29.2",
     "@gorhom/bottom-sheet": "^5.2.8",
-    "@jobber/design": "0.102.0",
+    "@jobber/design": "0.103.0",
     "@jobber/hooks": "2.21.0",
     "@react-native-community/datetimepicker": "^8.4.5",
     "@react-native/babel-preset": "^0.82.1",
@@ -122,5 +122,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "fff8aa8019d89e4a0d517f1eb963c8442935a16d"
+  "gitHead": "85613843d134dfa6dee673b87293f5e0ceb3bfa5"
 }

package/src/ActivityIndicator/ActivityIndicator.test.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { AccessibilityInfo } from "react-native";
 import { render } from "@testing-library/react-native";
 import { useReducedMotion } from "react-native-reanimated";
+import type { ReactTestInstance } from "react-test-renderer";
 import { ActivityIndicator } from "./index";
 
 // `useReducedMotion` is mocked globally in src/__mocks__/__mocks.ts and
@@ -41,7 +42,7 @@ describe("ActivityIndicator", () => {
 
     it("renders at the base (44px) size by default", () => {
       const { getByTestId } = render(<ActivityIndicator />);
-      const root = getByTestId(testId);
+      const root = getByTestId(testId).children[0] as ReactTestInstance;
       const flattenedStyle = Array.isArray(root.props.style)
         ? Object.assign({}, ...root.props.style.flat(Infinity).filter(Boolean))
         : root.props.style;
@@ -53,7 +54,7 @@ describe("ActivityIndicator", () => {
   describe("size variants", () => {
     it("renders the small ring at 28px", () => {
       const { getByTestId } = render(<ActivityIndicator size="small" />);
-      const root = getByTestId(testId);
+      const root = getByTestId(testId).children[0] as ReactTestInstance;
       const flattenedStyle = Array.isArray(root.props.style)
         ? Object.assign({}, ...root.props.style.flat(Infinity).filter(Boolean))
         : root.props.style;
@@ -63,7 +64,7 @@ describe("ActivityIndicator", () => {
 
     it("renders the base ring at 44px when size is explicit", () => {
       const { getByTestId } = render(<ActivityIndicator size="base" />);
-      const root = getByTestId(testId);
+      const root = getByTestId(testId).children[0] as ReactTestInstance;
       const flattenedStyle = Array.isArray(root.props.style)
         ? Object.assign({}, ...root.props.style.flat(Infinity).filter(Boolean))
         : root.props.style;
@@ -85,7 +86,7 @@ describe("ActivityIndicator", () => {
 
     it('maps size="large" to size="base" visually', () => {
       const { getByTestId } = render(<ActivityIndicator size="large" />);
-      const root = getByTestId(testId);
+      const root = getByTestId(testId).children[0] as ReactTestInstance;
       const flattenedStyle = Array.isArray(root.props.style)
         ? Object.assign({}, ...root.props.style.flat(Infinity).filter(Boolean))
         : root.props.style;
@@ -172,7 +173,7 @@ describe("ActivityIndicator", () => {
     it("renders the reduced-motion ring when the OS setting is on", () => {
       (useReducedMotion as jest.Mock).mockReturnValue(true);
       const { getByTestId } = render(<ActivityIndicator />);
-      const root = getByTestId(testId);
+      const root = getByTestId(testId).children[0] as ReactTestInstance;
       // The reduced-motion presentation renders a single static <Circle>
       // wrapped in one Animated.View — the full-motion presentation renders
       // three nested Animated.Views. We can distinguish by the children

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -270,9 +270,9 @@ function FullMotionRing({
 
   return (
     <Animated.View
-      style={[{ width: pixelSize, height: pixelSize }, style]}
-      testID={testID}
+      style={[{ justifyContent: "center", alignItems: "center" }, style]}
       {...a11yProps}
+      testID={testID}
     >
       <Animated.View
         style={[{ width: pixelSize, height: pixelSize }, outerStyle]}
@@ -369,24 +369,28 @@ function ReducedMotionRing({
 
   return (
     <Animated.View
-      style={[{ width: pixelSize, height: pixelSize }, animatedStyle, style]}
+      style={[{ justifyContent: "center", alignItems: "center" }, style]}
       testID={testID}
       {...a11yProps}
     >
-      <Svg
-        width={pixelSize}
-        height={pixelSize}
-        viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}
+      <Animated.View
+        style={[{ width: pixelSize, height: pixelSize }, animatedStyle]}
       >
-        <Circle
-          cx={CENTER}
-          cy={CENTER}
-          r={RADIUS}
-          fill="none"
-          stroke={ringColor}
-          strokeWidth={strokeWidth}
-        />
-      </Svg>
+        <Svg
+          width={pixelSize}
+          height={pixelSize}
+          viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}
+        >
+          <Circle
+            cx={CENTER}
+            cy={CENTER}
+            r={RADIUS}
+            fill="none"
+            stroke={ringColor}
+            strokeWidth={strokeWidth}
+          />
+        </Svg>
+      </Animated.View>
     </Animated.View>
   );
 }