@jobber/components-native 0.108.0 → 0.108.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.108.0",
+  "version": "0.108.1",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -124,5 +124,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "d5470a957047c13206da81b769b223f08e670d92"
+  "gitHead": "7d8b08e91839f535411288b03a8603f2df310a8e"
 }

package/src/ContentOverlay/ContentOverlay.tsx

@@ -36,7 +36,10 @@ import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-import { useAtlantisTheme } from "../AtlantisThemeContext";
+import {
+  AtlantisThemeContextProvider,
+  useAtlantisTheme,
+} from "../AtlantisThemeContext";
 
 /**
  * Signals whether keyboard handling inside a ContentOverlay is delegated to
@@ -96,7 +99,7 @@ export function ContentOverlay({
 
   const styles = useStyles();
   const { t } = useAtlantisI18n();
-  const { tokens } = useAtlantisTheme();
+  const { theme, tokens } = useAtlantisTheme();
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
   const behavior = computeContentOverlayBehavior(
@@ -318,34 +321,42 @@ export function ContentOverlay({
       topInset={topInset}
       onDismiss={() => onClose?.()}
     >
-      <ContentOverlayKeyboardContext.Provider value={scrollEnabled}>
-        {scrollEnabled ? (
-          <BottomSheetKeyboardAwareScrollView
-            ref={scrollViewRef}
-            contentContainerStyle={{ paddingBottom: insets.bottom }}
-            keyboardShouldPersistTaps={
-              keyboardShouldPersistTaps ? "handled" : "never"
-            }
-            showsVerticalScrollIndicator={false}
-            onScroll={handleOnScroll}
-            stickyHeaderIndices={[0]}
-            bottomOffset={KEYBOARD_TOP_PADDING_AUTO_SCROLL}
-          >
-            {renderHeader()}
-            <View testID="ATL-Overlay-Children">{children}</View>
-          </BottomSheetKeyboardAwareScrollView>
-        ) : (
-          <BottomSheetView>
-            {renderHeader()}
-            <View
-              style={{ paddingBottom: insets.bottom }}
-              testID="ATL-Overlay-Children"
+      {/*
+        BottomSheetModal renders its children through a portal mounted outside
+        this component's subtree, so the AtlantisThemeContext is lost. Re-apply
+        the active theme here so descendants (e.g. the header title) resolve the
+        correct themed tokens.
+      */}
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme={theme}>
+        <ContentOverlayKeyboardContext.Provider value={scrollEnabled}>
+          {scrollEnabled ? (
+            <BottomSheetKeyboardAwareScrollView
+              ref={scrollViewRef}
+              contentContainerStyle={{ paddingBottom: insets.bottom }}
+              keyboardShouldPersistTaps={
+                keyboardShouldPersistTaps ? "handled" : "never"
+              }
+              showsVerticalScrollIndicator={false}
+              onScroll={handleOnScroll}
+              stickyHeaderIndices={[0]}
+              bottomOffset={KEYBOARD_TOP_PADDING_AUTO_SCROLL}
             >
-              {children}
-            </View>
-          </BottomSheetView>
-        )}
-      </ContentOverlayKeyboardContext.Provider>
+              {renderHeader()}
+              <View testID="ATL-Overlay-Children">{children}</View>
+            </BottomSheetKeyboardAwareScrollView>
+          ) : (
+            <BottomSheetView>
+              {renderHeader()}
+              <View
+                style={{ paddingBottom: insets.bottom }}
+                testID="ATL-Overlay-Children"
+              >
+                {children}
+              </View>
+            </BottomSheetView>
+          )}
+        </ContentOverlayKeyboardContext.Provider>
+      </AtlantisThemeContextProvider>
     </BottomSheetModal>
   );
 }