@jobber/components-native 0.114.12 → 0.114.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.114.12",
+  "version": "0.114.13",
   "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": "0991c3a7ba2e5b5bce8aa8adea0eb60aa9d360f8"
 }

package/src/AtlantisThemeContext/AtlantisThemeContext.guide.md

@@ -62,3 +62,15 @@ surface that visually leaves the normal React subtree.
 Important: a forced subtree preserves the selected theme semantics from the
 nearest non-forced provider. Calling `setTheme` inside the forced subtree still
 updates the upstream selected theme; only the rendered tokens stay forced.
+
+## Themed style cache
+
+`buildThemedStyles` returns a module-scope `useStyles` hook. Each generated hook
+owns a `WeakMap` keyed by the `tokens` object from the nearest Atlantis theme
+context, so repeated component instances under the same theme reuse the same
+`StyleSheet.create` result.
+
+Call `buildThemedStyles` at module scope, keep the style factory pure over its
+`tokens` argument, and treat the returned styles as immutable. If the active
+theme changes and the context returns a different `tokens` object, the generated
+hook creates and caches a separate style object for that token identity.

package/src/AtlantisThemeContext/buildThemedStyles.test.tsx

@@ -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";
 
@@ -47,6 +48,67 @@ describe("buildThemedStyles", () => {
     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: Array<ReturnType<typeof useTestStyles>> = [];
+
+    function TestComponent() {
+      const styles = useTestStyles();
+      renderedStyles.push(styles);
+
+      return <Text style={styles.container}>Test</Text>;
+    }
+
+    render(
+      <AtlantisThemeContextProvider>
+        <TestComponent />
+        <TestComponent />
+        <TestComponent />
+      </AtlantisThemeContextProvider>,
+    );
+
+    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: Array<ReturnType<typeof useTestStyles>> = [];
+
+    function TestComponent() {
+      const styles = useTestStyles();
+      renderedStyles.push(styles);
+
+      return <Text style={styles.container}>Test</Text>;
+    }
+
+    const { rerender } = render(
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="light">
+        <TestComponent />
+      </AtlantisThemeContextProvider>,
+    );
+
+    rerender(
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+        <TestComponent />
+      </AtlantisThemeContextProvider>,
+    );
+
+    expect(styleFactory).toHaveBeenCalledTimes(2);
+    expect(renderedStyles[1]).not.toBe(renderedStyles[0]);
+  });
+
   it("handles empty style objects", () => {
     const useTestStyles = buildThemedStyles(() => ({}));
 

package/src/AtlantisThemeContext/buildThemedStyles.ts

@@ -1,5 +1,4 @@
 import { StyleSheet } from "react-native";
-import { useMemo } from "react";
 import type { AtlantisThemeContextValue } from "./types";
 import { useAtlantisTheme } from "./AtlantisThemeContext";
 
@@ -35,9 +34,19 @@ import { useAtlantisTheme } from "./AtlantisThemeContext";
 export function buildThemedStyles<
   T extends Parameters<typeof StyleSheet.create>[0],
 >(styleFactory: (tokens: AtlantisThemeContextValue["tokens"]) => T) {
+  const stylesByTokens = new WeakMap<AtlantisThemeContextValue["tokens"], T>();
+
   return function useStyles() {
     const { tokens } = useAtlantisTheme();
+    const cached = stylesByTokens.get(tokens);
+
+    if (cached !== undefined) {
+      return cached;
+    }
+
+    const themedStyles = StyleSheet.create(styleFactory(tokens));
+    stylesByTokens.set(tokens, themedStyles);
 
-    return useMemo(() => StyleSheet.create(styleFactory(tokens)), [tokens]);
+    return themedStyles;
   };
 }