@jobber/components-native 0.114.12 → 0.114.13-JOB-182796-7b6fda7.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.114.12",
+    "version": "0.114.13-JOB-182796-7b6fda7.0+7b6fda7b",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -123,5 +123,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "a9ac41dfb966649048fcaf7cce2db45f2569fc29"
+    "gitHead": "7b6fda7bf9b386a9eb3676dd5f432d2a8b4050ae"
 }

package/dist/src/AtlantisThemeContext/buildThemedStyles.js

@@ -1,5 +1,4 @@
 import { StyleSheet } from "react-native";
-import { useMemo } from "react";
 import { useAtlantisTheme } from "./AtlantisThemeContext";
 /**
  * Creates a hook that generates themed styles using the current theme tokens.
@@ -31,8 +30,15 @@ import { useAtlantisTheme } from "./AtlantisThemeContext";
  * @see Related functions: {@link useAtlantisTheme}
  */
 export function buildThemedStyles(styleFactory) {
+    const stylesByTokens = new WeakMap();
     return function useStyles() {
         const { tokens } = useAtlantisTheme();
-        return useMemo(() => StyleSheet.create(styleFactory(tokens)), [tokens]);
+        const cached = stylesByTokens.get(tokens);
+        if (cached !== undefined) {
+            return cached;
+        }
+        const themedStyles = StyleSheet.create(styleFactory(tokens));
+        stylesByTokens.set(tokens, themedStyles);
+        return themedStyles;
     };
 }

package/dist/src/AtlantisThemeContext/buildThemedStyles.test.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { renderHook } from "@testing-library/react-native";
+import { Text } from "react-native";
+import { render, renderHook } from "@testing-library/react-native";
 import { buildThemedStyles } from "./buildThemedStyles";
 import { AtlantisThemeContextProvider } from "./AtlantisThemeContext";
 describe("buildThemedStyles", () => {
@@ -35,6 +36,47 @@ describe("buildThemedStyles", () => {
         expect(styleFactory).toHaveBeenCalledTimes(1);
         expect(result.current).toBe(initialResult);
     });
+    it("reuses cached styles across multiple instances of the same generated hook", () => {
+        const styleFactory = jest.fn(tokens => ({
+            container: {
+                backgroundColor: tokens["color-surface"],
+            },
+        }));
+        const useTestStyles = buildThemedStyles(styleFactory);
+        const renderedStyles = [];
+        function TestComponent() {
+            const styles = useTestStyles();
+            renderedStyles.push(styles);
+            return React.createElement(Text, { style: styles.container }, "Test");
+        }
+        render(React.createElement(AtlantisThemeContextProvider, null,
+            React.createElement(TestComponent, null),
+            React.createElement(TestComponent, null),
+            React.createElement(TestComponent, null)));
+        expect(styleFactory).toHaveBeenCalledTimes(1);
+        expect(renderedStyles[1]).toBe(renderedStyles[0]);
+        expect(renderedStyles[2]).toBe(renderedStyles[0]);
+    });
+    it("creates styles again when the theme tokens change", () => {
+        const styleFactory = jest.fn(tokens => ({
+            container: {
+                backgroundColor: tokens["color-surface"],
+            },
+        }));
+        const useTestStyles = buildThemedStyles(styleFactory);
+        const renderedStyles = [];
+        function TestComponent() {
+            const styles = useTestStyles();
+            renderedStyles.push(styles);
+            return React.createElement(Text, { style: styles.container }, "Test");
+        }
+        const { rerender } = render(React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "light" },
+            React.createElement(TestComponent, null)));
+        rerender(React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            React.createElement(TestComponent, null)));
+        expect(styleFactory).toHaveBeenCalledTimes(2);
+        expect(renderedStyles[1]).not.toBe(renderedStyles[0]);
+    });
     it("handles empty style objects", () => {
         const useTestStyles = buildThemedStyles(() => ({}));
         const { result } = renderHook(() => useTestStyles(), { wrapper });