@applicaster/zapp-react-native-ui-components 16.0.0-rc.92 → 16.0.0-rc.93

package/Components/LinkHandler/LinkHandler.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
   inflateString,
   objectToReadableString,
@@ -40,12 +39,8 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const plugins = usePlugins();
 
-  const ScreenPlugin = findPluginByIdentifier(
-    WEBVIEW_SCREEN_IDENTIFIER,
-    plugins
-  );
+  const ScreenPlugin = getPluginByIdentifier(WEBVIEW_SCREEN_IDENTIFIER);
 
   const Component =
     R.path(["module", "Component"], ScreenPlugin) ||

package/Components/MasterCell/DefaultComponents/LiveImage/executePreloadHooks.ts

@@ -1,5 +1,4 @@
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { loggerLiveImageManager } from "../../../VideoLive/loggerHelper";
 
 const { log_debug, log_error } = loggerLiveImageManager;
@@ -74,10 +73,9 @@ export async function executePreloadHooks({
   let payload: any = entry;
 
   let needsAbort = false;
-  const plugins = appStore.get("plugins");
 
   for (const hookConfig of sortedHooks) {
-    const plugin = findPluginByIdentifier(hookConfig.identifier, plugins, true);
+    const plugin = getPluginByIdentifier(hookConfig.identifier, true);
 
     if (!plugin?.module) {
       log_debug(

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -8,7 +8,7 @@ import Image from "../Image";
 import { useTrackCurrentAutoScrollingElement } from "@applicaster/zapp-react-native-utils/reactHooks/autoscrolling/useTrackCurrentAutoScrollingElement";
 import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { getPropComponentType } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useAccessibilityState } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type LiveImageProps = {
@@ -249,9 +249,8 @@ const LiveImageComponent = (props: LiveImageProps) => {
     getPlayerConfig(player_screen_id, actionIdentifier) ?? {};
 
   const playableEntry = playerPluginId ? getPlayableEntry(item) : null;
-  const plugins = appStore.get("plugins");
 
-  const playerPlugin = findPluginByIdentifier(playerPluginId, plugins);
+  const playerPlugin = getPluginByIdentifier(playerPluginId);
 
   const isShouldRender =
     playerPlugin &&

package/Components/ModalComponent/AudioPlayer/Components/Header.tsx

@@ -1,11 +1,10 @@
 /**
  * Modal Building Block — Header
  *
- * Single-file Expo Snack demo for the Header building block spec.
- *
  * Green (configurable): title, closeButton (enable + asset), actionButtons styling
- * White (hardcoded): container, action button layout/enable/actions, close dimensions,
- *   action button padding/radius, action labels
+ *   (incl. Clear padding/radius for Variant 3 / section_header Studio keys)
+ * White (hardcoded): container gutters, action button slot enablement/actions,
+ *   close dimensions, default action labels (overridable via HeaderData.clearLabel)
  */
 
 import React, { useCallback, useState } from "react";
@@ -94,6 +93,12 @@ export type ActionButtonsStyleConfiguration = {
   iosLetterSpacing: number;
   androidLetterSpacing: number;
   textTransform: TextTransform;
+  /** Green Variant 3 fields — defaults match ACTION_BUTTON_LAYOUT_SPEC. */
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  cornerRadius?: number;
 };
 
 export type HeaderConfiguration = {
@@ -133,6 +138,11 @@ export const DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION: ActionButtonsStyleConfi
     iosLetterSpacing: 0,
     androidLetterSpacing: 0,
     textTransform: "default",
+    paddingTop: 6,
+    paddingRight: 10,
+    paddingBottom: 6,
+    paddingLeft: 10,
+    cornerRadius: 16,
   };
 
 // ---------------------------------------------------------------------------
@@ -141,6 +151,8 @@ export const DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION: ActionButtonsStyleConfi
 
 export type HeaderData = {
   title: string;
+  /** Localization override for Clear; falls back to ACTION_LABELS.clear. */
+  clearLabel?: string;
 };
 
 export type AudioPlayerHeaderProps = {
@@ -437,6 +449,7 @@ type HeaderActionButtonProps = {
   actionType: HeaderActionType;
   configuration: ActionButtonsStyleConfiguration;
   focused?: boolean;
+  label?: string;
   onPress?: () => void;
 };
 
@@ -444,8 +457,24 @@ function HeaderActionButton({
   actionType,
   configuration,
   focused = false,
+  label,
   onPress,
 }: HeaderActionButtonProps) {
+  const paddingTop =
+    configuration.paddingTop ?? ACTION_BUTTON_LAYOUT_SPEC.paddingTop;
+
+  const paddingRight =
+    configuration.paddingRight ?? ACTION_BUTTON_LAYOUT_SPEC.paddingRight;
+
+  const paddingBottom =
+    configuration.paddingBottom ?? ACTION_BUTTON_LAYOUT_SPEC.paddingBottom;
+
+  const paddingLeft =
+    configuration.paddingLeft ?? ACTION_BUTTON_LAYOUT_SPEC.paddingLeft;
+
+  const cornerRadius =
+    configuration.cornerRadius ?? ACTION_BUTTON_LAYOUT_SPEC.cornerRadius;
+
   return (
     <Pressable
       onPress={onPress}
@@ -454,11 +483,11 @@ function HeaderActionButton({
           pressed || focused
             ? configuration.focusedBackgroundColor
             : configuration.defaultBackgroundColor,
-        borderRadius: ACTION_BUTTON_LAYOUT_SPEC.cornerRadius,
-        paddingTop: ACTION_BUTTON_LAYOUT_SPEC.paddingTop,
-        paddingRight: ACTION_BUTTON_LAYOUT_SPEC.paddingRight,
-        paddingBottom: ACTION_BUTTON_LAYOUT_SPEC.paddingBottom,
-        paddingLeft: ACTION_BUTTON_LAYOUT_SPEC.paddingLeft,
+        borderRadius: cornerRadius,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
       })}
     >
       <Text
@@ -481,7 +510,7 @@ function HeaderActionButton({
         }}
         numberOfLines={1}
       >
-        {ACTION_LABELS[actionType]}
+        {label || ACTION_LABELS[actionType]}
       </Text>
     </Pressable>
   );
@@ -594,14 +623,20 @@ export function AudioPlayerHeader({
   onClear,
 }: AudioPlayerHeaderProps) {
   const modalBlocksStyle = useModalBlocksStyle();
-  const headerBlock = modalBlocksStyle?.header;
+
+  // Next Up section header uses sectionHeader — never Theme modal `header`,
+  // so the Queue title styles do not collide with the section title.
+  const styleBlock =
+    configuration.variant === "section"
+      ? modalBlocksStyle?.sectionHeader
+      : modalBlocksStyle?.header;
 
   const effectiveConfig = React.useMemo(() => {
-    return mergeHeaderConfiguration(configuration, headerBlock);
-  }, [configuration, headerBlock]);
+    return mergeHeaderConfiguration(configuration, styleBlock);
+  }, [configuration, styleBlock]);
 
   const { variant, title, closeButton, actionButtons } = effectiveConfig;
-  const { title: titleText } = data;
+  const { title: titleText, clearLabel } = data;
 
   const container = CONTAINER_SPEC[variant];
   const behavior = ACTION_BUTTONS_BEHAVIOR[variant];
@@ -612,16 +647,24 @@ export function AudioPlayerHeader({
     behavior.sectionEnabled
   );
 
-  const showTrailingAction = shouldShowActionSlot(
-    behavior.trailing,
-    behavior.sectionEnabled
-  );
+  const showTrailingAction =
+    shouldShowActionSlot(behavior.trailing, behavior.sectionEnabled) &&
+    (behavior.trailing.actionType !== "clear" || !!onClear);
+
+  const actionLabelFor = (actionType?: HeaderActionType) => {
+    if (actionType === "clear" && clearLabel) {
+      return clearLabel;
+    }
+
+    return actionType ? ACTION_LABELS[actionType] : undefined;
+  };
 
   const leadingContent = showLeadingAction ? (
     <HeaderActionButton
-      actionType={behavior.leading.actionType}
+      actionType={behavior.leading.actionType as HeaderActionType}
       configuration={actionButtons}
       focused={focusedLeadingAction}
+      label={actionLabelFor(behavior.leading.actionType)}
       onPress={onCancel}
     />
   ) : onBack ? (
@@ -630,9 +673,10 @@ export function AudioPlayerHeader({
 
   const trailingContent = showTrailingAction ? (
     <HeaderActionButton
-      actionType={behavior.trailing.actionType}
+      actionType={behavior.trailing.actionType as HeaderActionType}
       configuration={actionButtons}
       focused={focusedTrailingAction}
+      label={actionLabelFor(behavior.trailing.actionType)}
       onPress={behavior.trailing.actionType === "done" ? onDone : onClear}
     />
   ) : closeButton.enabled && !isCenterAligned ? (

package/Components/ModalComponent/AudioPlayer/Components/NowPlayingHeaderSection.tsx

@@ -14,12 +14,14 @@ type NowPlayingHeaderSectionProps = {
   onClear?: () => void;
   nextUpTitle?: string;
   nowPlayingTitle?: string;
+  clearLabel?: string;
 };
 
 export function NowPlayingHeaderSection({
   onClear,
   nextUpTitle = "Next Up",
   nowPlayingTitle = "Now Playing",
+  clearLabel,
 }: NowPlayingHeaderSectionProps) {
   const player = usePlayer();
   const playerState = usePlayerState("queue-now-playing-section");
@@ -74,7 +76,7 @@ export function NowPlayingHeaderSection({
       {renderNowPlayingTrack()}
       <AudioPlayerHeader
         configuration={VARIANT_SECTION_HEADER}
-        data={{ title: nextUpTitle }}
+        data={{ title: nextUpTitle, clearLabel }}
         onClear={onClear}
       />
     </View>

package/Components/ModalComponent/AudioPlayer/utils/__tests__/mergeStyles.test.ts

@@ -1,7 +1,12 @@
 import {
   mergeItemConfiguration,
   mergeButtonConfiguration,
+  mergeHeaderConfiguration,
 } from "../mergeStyles";
+import {
+  VARIANT_SECTION_HEADER,
+  VARIANT_SINGLE_LINE_HEADER,
+} from "../../Components/Header";
 
 const base = {
   background: {
@@ -246,3 +251,106 @@ describe("mergeButtonConfiguration background", () => {
     expect(merged.title.textTransform).toBe("uppercase");
   });
 });
+
+describe("mergeHeaderConfiguration section header (Variant 3)", () => {
+  it("merges section title + Clear action button styles", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: {
+        default: {
+          fontColor: "#ABCDEF",
+          fontSize: 15,
+          lineHeight: 36,
+          fontFamily: "CustomSection",
+          letterSpacing: -0.2,
+          textTransform: "uppercase",
+          alignment: "left",
+        },
+      },
+      actionButtons: {
+        default: {
+          backgroundColor: "rgba(10, 10, 10, 1)",
+          fontColor: "#EEEEEE",
+          fontSize: 12,
+          borderRadius: 20,
+          paddingTop: 8,
+          paddingRight: 12,
+          paddingBottom: 8,
+          paddingLeft: 12,
+        },
+        focused: {
+          backgroundColor: "rgba(20, 20, 20, 1)",
+          fontColor: "#FFDD00",
+        },
+      },
+    });
+
+    expect(merged.title.fontColor).toBe("#ABCDEF");
+    expect(merged.title.fontSize).toBe(15);
+    expect(merged.title.lineHeight).toBe(36);
+    expect(merged.title.iosFontFamily).toBe("CustomSection");
+    expect(merged.title.androidFontFamily).toBe("CustomSection");
+    expect(merged.title.iosLetterSpacing).toBe(-0.2);
+    expect(merged.title.textTransform).toBe("uppercase");
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe(
+      "rgba(10, 10, 10, 1)"
+    );
+
+    expect(merged.actionButtons.focusedBackgroundColor).toBe(
+      "rgba(20, 20, 20, 1)"
+    );
+
+    expect(merged.actionButtons.fontColor).toBe("#EEEEEE");
+    expect(merged.actionButtons.focusedFontColor).toBe("#FFDD00");
+    expect(merged.actionButtons.fontSize).toBe(12);
+    expect(merged.actionButtons.cornerRadius).toBe(20);
+    expect(merged.actionButtons.paddingTop).toBe(8);
+    expect(merged.actionButtons.paddingLeft).toBe(12);
+  });
+
+  it("uses title.default when only platform font and letter spacing are set", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: {
+        default: {
+          iosFontFamily: "SFProText-Semibold",
+          androidFontFamily: "Roboto-Medium",
+          iosLetterSpacing: -0.4,
+          androidLetterSpacing: 0,
+        },
+      },
+    });
+
+    expect(merged.title.iosFontFamily).toBe("SFProText-Semibold");
+    expect(merged.title.androidFontFamily).toBe("Roboto-Medium");
+    expect(merged.title.iosLetterSpacing).toBe(-0.4);
+    expect(merged.title.androidLetterSpacing).toBe(0);
+    expect(merged.title.fontSize).toBe(VARIANT_SECTION_HEADER.title.fontSize);
+  });
+
+  it("does not change section defaults when block is empty", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: { default: {} },
+      actionButtons: { default: {} },
+    });
+
+    expect(merged.title.fontSize).toBe(VARIANT_SECTION_HEADER.title.fontSize);
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe(
+      VARIANT_SECTION_HEADER.actionButtons.defaultBackgroundColor
+    );
+  });
+
+  it("leaves single-line header title size untouched when only actionButtons set", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SINGLE_LINE_HEADER, {
+      actionButtons: {
+        default: { backgroundColor: "#123456" },
+      },
+    });
+
+    expect(merged.title.fontSize).toBe(
+      VARIANT_SINGLE_LINE_HEADER.title.fontSize
+    );
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe("#123456");
+  });
+});

package/Components/ModalComponent/AudioPlayer/utils/mergeStyles.ts

@@ -9,6 +9,7 @@ import {
 } from "../Components/Item";
 import {
   TitleConfiguration as HeaderTitleConfiguration,
+  ActionButtonsStyleConfiguration as HeaderActionButtonsStyleConfiguration,
   HeaderConfiguration,
 } from "../Components/Header";
 import {
@@ -210,6 +211,122 @@ function mergeHeaderTitle(
     ...base,
     ...(override.fontColor ? { fontColor: override.fontColor } : {}),
     ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+    ...(override.lineHeight !== undefined
+      ? { lineHeight: override.lineHeight }
+      : {}),
+    ...(typeof override.fontFamily === "string"
+      ? {
+          iosFontFamily: override.fontFamily,
+          androidFontFamily: override.fontFamily,
+        }
+      : {}),
+    ...(override.iosFontFamily
+      ? { iosFontFamily: override.iosFontFamily }
+      : {}),
+    ...(override.androidFontFamily
+      ? { androidFontFamily: override.androidFontFamily }
+      : {}),
+    ...(override.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: override.letterSpacing,
+          androidLetterSpacing: override.letterSpacing,
+        }
+      : {}),
+    ...(override.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: override.iosLetterSpacing }
+      : {}),
+    ...(override.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: override.androidLetterSpacing }
+      : {}),
+    ...(override.textTransform
+      ? { textTransform: override.textTransform }
+      : {}),
+    ...(override.alignment ? { alignment: override.alignment } : {}),
+  };
+}
+
+function mergeHeaderActionButtons(
+  base: HeaderActionButtonsStyleConfiguration,
+  defaultOverride?: Record<string, any>,
+  focusedOverride?: Record<string, any>
+): HeaderActionButtonsStyleConfiguration {
+  if (!defaultOverride && !focusedOverride) return base;
+
+  const focusedBackgroundColor =
+    focusedOverride?.backgroundColor ??
+    defaultOverride?.focusBackgroundColor ??
+    defaultOverride?.focusedBackgroundColor;
+
+  const focusedFontColor =
+    focusedOverride?.fontColor ??
+    defaultOverride?.focusFontColor ??
+    defaultOverride?.focusedFontColor;
+
+  return {
+    ...base,
+    ...(defaultOverride?.backgroundColor
+      ? { defaultBackgroundColor: defaultOverride.backgroundColor }
+      : {}),
+    ...(focusedBackgroundColor != null && focusedBackgroundColor !== ""
+      ? { focusedBackgroundColor }
+      : {}),
+    ...(defaultOverride?.fontColor
+      ? { fontColor: defaultOverride.fontColor }
+      : {}),
+    ...(focusedFontColor != null && focusedFontColor !== ""
+      ? { focusedFontColor }
+      : {}),
+    ...(defaultOverride?.fontSize !== undefined
+      ? { fontSize: defaultOverride.fontSize }
+      : {}),
+    ...(defaultOverride?.lineHeight !== undefined
+      ? { lineHeight: defaultOverride.lineHeight }
+      : {}),
+    ...(typeof defaultOverride?.fontFamily === "string"
+      ? {
+          iosFontFamily: defaultOverride.fontFamily,
+          androidFontFamily: defaultOverride.fontFamily,
+        }
+      : {}),
+    ...(defaultOverride?.iosFontFamily
+      ? { iosFontFamily: defaultOverride.iosFontFamily }
+      : {}),
+    ...(defaultOverride?.androidFontFamily
+      ? { androidFontFamily: defaultOverride.androidFontFamily }
+      : {}),
+    ...(defaultOverride?.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: defaultOverride.letterSpacing,
+          androidLetterSpacing: defaultOverride.letterSpacing,
+        }
+      : {}),
+    ...(defaultOverride?.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: defaultOverride.iosLetterSpacing }
+      : {}),
+    ...(defaultOverride?.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: defaultOverride.androidLetterSpacing }
+      : {}),
+    ...(defaultOverride?.textTransform
+      ? { textTransform: defaultOverride.textTransform }
+      : {}),
+    ...(defaultOverride?.borderRadius !== undefined
+      ? { cornerRadius: defaultOverride.borderRadius }
+      : {}),
+    ...(defaultOverride?.cornerRadius !== undefined
+      ? { cornerRadius: defaultOverride.cornerRadius }
+      : {}),
+    ...(defaultOverride?.paddingTop !== undefined
+      ? { paddingTop: defaultOverride.paddingTop }
+      : {}),
+    ...(defaultOverride?.paddingRight !== undefined
+      ? { paddingRight: defaultOverride.paddingRight }
+      : {}),
+    ...(defaultOverride?.paddingBottom !== undefined
+      ? { paddingBottom: defaultOverride.paddingBottom }
+      : {}),
+    ...(defaultOverride?.paddingLeft !== undefined
+      ? { paddingLeft: defaultOverride.paddingLeft }
+      : {}),
   };
 }
 
@@ -221,9 +338,39 @@ export function mergeHeaderConfiguration(
 
   const bgOverride = headerBlock.container?.default?.backgroundColor;
 
+  const actionButtonsDefault =
+    headerBlock.actionButtons?.default || headerBlock.actionButtons;
+
+  const actionButtonsFocused =
+    headerBlock.actionButtons?.focused || headerBlock.actionButtons?.focus;
+
+  // Parser shape is title.default.*; hydrate() returns a flat title object.
+  const titleDefault = headerBlock.title?.default;
+
+  const titleOverride =
+    titleDefault &&
+    (titleDefault.fontColor !== undefined ||
+      titleDefault.fontSize !== undefined ||
+      titleDefault.lineHeight !== undefined ||
+      titleDefault.fontFamily ||
+      titleDefault.iosFontFamily ||
+      titleDefault.androidFontFamily ||
+      titleDefault.letterSpacing !== undefined ||
+      titleDefault.iosLetterSpacing !== undefined ||
+      titleDefault.androidLetterSpacing !== undefined ||
+      titleDefault.textTransform ||
+      titleDefault.alignment)
+      ? titleDefault
+      : headerBlock.title;
+
   return {
     ...base,
-    title: mergeHeaderTitle(base.title, headerBlock.title?.default),
+    title: mergeHeaderTitle(base.title, titleOverride),
+    actionButtons: mergeHeaderActionButtons(
+      base.actionButtons,
+      actionButtonsDefault,
+      actionButtonsFocused
+    ),
     ...(bgOverride ? { backgroundColor: bgOverride } : {}),
   };
 }

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -150,17 +150,81 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     [plugins, themePluginId]
   );
 
-  const styleOverrides = useMemo(() => {
-    if (propStyleOverrides) {
-      return propStyleOverrides;
-    }
-
+  const styleOverrides = useMemo<ModalBlocksConfig | null>(() => {
     const configuration =
       plugin?.configuration || (plugin as any)?.configuration_json;
 
-    if (!configuration || !themePluginId) return null;
+    const parsed =
+      configuration && themePluginId
+        ? parseModalBlocksConfiguration(configuration, themePluginId)
+        : null;
+
+    if (!propStyleOverrides) {
+      return parsed;
+    }
+
+    // hydrate(QueueStyles) only emits sectionHeader after the plugin class
+    // includes it. Until then, Studio/local keys in configuration_json still
+    // apply via the parser.
+    const hydratedSection = propStyleOverrides.sectionHeader;
+
+    const hasTitleStyle = (style?: Record<string, any>) =>
+      Boolean(
+        style &&
+          (style.fontColor ||
+            style.fontSize !== undefined ||
+            style.lineHeight !== undefined ||
+            style.fontFamily ||
+            style.iosFontFamily ||
+            style.androidFontFamily ||
+            style.letterSpacing !== undefined ||
+            style.iosLetterSpacing !== undefined ||
+            style.androidLetterSpacing !== undefined ||
+            style.textTransform ||
+            style.alignment)
+      );
+
+    const hasActionStyle = (style?: Record<string, any>) =>
+      Boolean(
+        style &&
+          (style.backgroundColor ||
+            style.fontColor ||
+            style.fontSize !== undefined ||
+            style.lineHeight !== undefined ||
+            style.fontFamily ||
+            style.iosFontFamily ||
+            style.androidFontFamily ||
+            style.letterSpacing !== undefined ||
+            style.iosLetterSpacing !== undefined ||
+            style.androidLetterSpacing !== undefined ||
+            style.textTransform ||
+            style.borderRadius !== undefined ||
+            style.cornerRadius !== undefined ||
+            style.paddingTop !== undefined ||
+            style.paddingRight !== undefined ||
+            style.paddingBottom !== undefined ||
+            style.paddingLeft !== undefined)
+      );
 
-    return parseModalBlocksConfiguration(configuration, themePluginId);
+    const actionNode = hydratedSection?.actionButtons;
+
+    // An empty `default: {}` is truthy and would hide fields set on the flat
+    // object or on the focused bucket.
+    const hasHydratedSection =
+      hasTitleStyle(hydratedSection?.title?.default) ||
+      hasTitleStyle(hydratedSection?.title) ||
+      hasActionStyle(actionNode?.default) ||
+      hasActionStyle(actionNode?.focused) ||
+      hasActionStyle(actionNode?.focus) ||
+      hasActionStyle(actionNode);
+
+    return {
+      ...parsed,
+      ...propStyleOverrides,
+      sectionHeader: hasHydratedSection
+        ? hydratedSection
+        : parsed?.sectionHeader,
+    };
   }, [propStyleOverrides, plugin, themePluginId]);
 
   const pluginLocalizations = useLocalizedStrings({
@@ -178,17 +242,26 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
   const nextUpTitle =
     pluginLocalizations?.next_up_title ||
     (normalizedPluginId
-      ? pluginLocalizations?.[`${normalizedPluginId}_next_up_title`]
+      ? pluginLocalizations?.[`${normalizedPluginId}_next_up_title`] ||
+        pluginLocalizations?.[`${normalizedPluginId}_label_next_up`]
       : undefined) ||
     "Next Up";
 
   const nowPlayingTitle =
     pluginLocalizations?.now_playing_title ||
     (normalizedPluginId
-      ? pluginLocalizations?.[`${normalizedPluginId}_now_playing_title`]
+      ? pluginLocalizations?.[`${normalizedPluginId}_now_playing_title`] ||
+        pluginLocalizations?.[`${normalizedPluginId}_label_now_playing`]
       : undefined) ||
     "Now Playing";
 
+  const clearLabel =
+    pluginLocalizations?.clear_label ||
+    (normalizedPluginId
+      ? pluginLocalizations?.[`${normalizedPluginId}_label_clear`]
+      : undefined) ||
+    "Clear";
+
   const resolvedTitle = props.title || localizedHeaderTitle || title;
 
   const itemsToRender = viewModel ? fetchedItems : items;
@@ -336,6 +409,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
             onClear={hasClearAll ? handleDeleteCollection : undefined}
             nextUpTitle={nextUpTitle}
             nowPlayingTitle={nowPlayingTitle}
+            clearLabel={clearLabel}
           />
         ),
       });
@@ -361,6 +435,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     handleDeleteCollection,
     nextUpTitle,
     nowPlayingTitle,
+    clearLabel,
     hasAdd,
     handleCreatePlaylist,
   ]);
@@ -470,6 +545,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
             onClear={hasClearAll ? handleDeleteCollection : undefined}
             nextUpTitle={nextUpTitle}
             nowPlayingTitle={nowPlayingTitle}
+            clearLabel={clearLabel}
           />
         ) : null}
         {hasAdd ? (

package/Components/Screen/__tests__/Screen.test.tsx

@@ -141,6 +141,10 @@ const {
   useGetScreenOrientation,
 } = require("@applicaster/zapp-react-native-utils/appUtils/orientationHelper");
 
+const {
+  useIsScreenActive,
+} = require("@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive");
+
 const navigator = {};
 const navBarProps = { nav_items: [] };
 const screenData = {};
@@ -195,4 +199,24 @@ describe("<Screen Component />", () => {
       expect(toJSON()).toMatchSnapshot();
     });
   });
+
+  describe("when the screen is inactive", () => {
+    afterEach(() => {
+      useIsScreenActive.mockReturnValue(true);
+    });
+
+    it("hides the screen from VoiceOver (iOS) and TalkBack (Android)", () => {
+      useIsScreenActive.mockReturnValue(false);
+
+      const { UNSAFE_root } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
+      expect(UNSAFE_root.findByType(View).props).toMatchObject({
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+      });
+    });
+  });
 });

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   }
 >
   <View
+    accessibilityElementsHidden={false}
     importantForAccessibility="yes"
     style={
       {
@@ -58,6 +59,7 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   }
 >
   <View
+    accessibilityElementsHidden={false}
     importantForAccessibility="yes"
     style={
       {

package/Components/Screen/index.tsx

@@ -121,6 +121,11 @@ export function Screen(_props: Props) {
       ref={ref}
       style={style}
       importantForAccessibility={!isActive ? "no-hide-descendants" : "yes"}
+      // `importantForAccessibility` only affects Android (see RN docs).
+      // Without the iOS counterpart below, VoiceOver keeps traversing and
+      // focusing elements on an inactive/underlying screen (e.g. Albums In
+      // Order) even after a new screen (e.g. an Album) is pushed on top.
+      accessibilityElementsHidden={!isActive}
     >
       {isReady ? (
         <>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.92",
+  "version": "16.0.0-rc.93",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.92",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.92",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.92",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.92",
+    "@applicaster/applicaster-types": "16.0.0-rc.93",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.93",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.93",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.93",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",