@applicaster/zapp-react-native-ui-components 13.0.0-rc.99 → 14.0.0-alpha.1216545755

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/audioPlayer.test.js

@@ -1,7 +1,11 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 
-import { AudioPlayer } from "../AudioPlayer";
+import { AudioPlayerTV } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
+  useArtworkImage: jest.fn(() => "artwork_url"),
+}));
 
 const audioPlayerProps = {
   audio_item: {
@@ -45,9 +49,9 @@ const audioPlayerProps = {
   styles: {},
 };
 
-describe("<AudioPlayer />", () => {
+describe("<AudioPlayerTV />", () => {
   it("renders correctly", () => {
-    const { toJSON } = render(<AudioPlayer {...audioPlayerProps} />);
+    const { toJSON } = render(<AudioPlayerTV {...audioPlayerProps} />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/AudioPlayer/{helpers.tsx → tv/helpers.tsx}

@@ -2,11 +2,8 @@ const defaults = {
   audio_player_title_color: "white",
   audio_player_summary_color: "white",
   audio_player_background_color: "black",
-  audio_player_artwork_aspect_ratio: "1:1",
+  audio_player_background_image: undefined,
   audio_player_rtl: false,
-  magic_background: false,
-  audio_player_background_image_query: "",
-  audio_player_background_image_default_color: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
@@ -28,14 +25,14 @@ export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
 const LTR = {
   flexDirection: "row",
   justifyContent: "flex-start",
-  textAlign: "right",
+  textAlign: "left",
   alignItems: "flex-end",
 };
 
 const RTL = {
   flexDirection: "row-reverse",
   justifyContent: "flex-end",
-  textAlign: "left",
+  textAlign: "right",
   alignItems: "flex-start",
 };
 

package/Components/AudioPlayer/{AudioPlayer.tsx → tv/index.tsx}

@@ -1,64 +1,24 @@
 import React, { useCallback, useMemo } from "react";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { AudioPlayerTVLayout } from "./Layout";
 
-import { AudioPlayerLayout } from "./AudioPlayerLayout";
 import { Channel } from "./Channel";
 import { Title } from "./Title";
 import { Summary } from "./Summary";
 import { Runtime } from "./Runtime";
 import { getPropertyFromEntryOrConfig } from "./helpers";
-import { ViewStyle } from "react-native";
-
-type Props = {
-  audio_item: ZappEntry & {
-    extensions?: {
-      audio_player_artwork_aspect_ratio?: string;
-      audio_player_background_image?: string;
-      audio_player_background_color?: string;
-      audio_player_channel_icon?: string;
-      audio_player_title_color?: string;
-      audio_player_summary_color?: string;
-      audio_player_rtl?: boolean;
-      magic_background?: boolean;
-      audio_player_background_image_query?: string;
-      audio_player_background_image_default_color?: string;
-      start_time?: string;
-      end_time?: string;
-    };
-  };
-  plugin_configuration: {
-    audio_player_background_color?: string;
-    audio_player_title_color?: string;
-    audio_player_summary_color?: string;
-    audio_player_rtl?: string;
-    magic_background?: string;
-    audio_player_background_image_query?: string;
-    audio_player_background_image_default_color?: string;
-    audio_player_background_image?: string;
-    audio_player_artwork_aspect_ratio?: string;
-    lg_tv_audio_player_title_font_family?: string;
-    lg_tv_audio_player_title_font_size?: number;
-    lg_tv_audio_player_summary_font_family?: string;
-    lg_tv_audio_player_summary_font_size?: number;
-    samsung_tv_audio_player_title_font_family?: string;
-    samsung_tv_audio_player_title_font_size?: number;
-    samsung_tv_audio_player_summary_font_family?: string;
-    samsung_tv_audio_player_summary_font_size?: number;
-    tv_os_audio_player_title_font_family?: string;
-    tv_os_audio_player_title_font_size?: number;
-    tv_os_audio_player_summary_font_family?: string;
-    tv_os_audio_player_summary_font_size?: number;
-  };
-  style?: ViewStyle;
-};
-
-export function AudioPlayer(props: Props) {
-  const { audio_item, plugin_configuration, style } = props;
+
+import { Props } from "../types";
+
+export function AudioPlayerTV(props: Props) {
+  const { audio_item, plugin_configuration, style = {} } = props;
   const { extensions, title, summary } = audio_item;
 
+  const artwork = useArtworkImage(audio_item);
+
   const getProp = useCallback(
     getPropertyFromEntryOrConfig({
       entry: audio_item,
@@ -68,23 +28,14 @@ export function AudioPlayer(props: Props) {
   );
 
   const config = useMemo(() => {
-    // Checking if we are recieving items from the DSP
+    // Checking if we are receiving items from the DSP
     const titleColor = getProp("audio_player_title_color");
     const summaryColor = getProp("audio_player_summary_color");
     const backgroundColor = getProp("audio_player_background_color");
     const backgroundImage = getProp("audio_player_background_image");
-    const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
-    const magicBackground = getProp("magic_background");
-
-    const audioPlayerBackgroundImageQuery = getProp(
-      "audio_player_background_image_query"
-    );
-
-    const audioPlayerBackgroundImageDefaultColor = getProp(
-      "audio_player_background_image_default_color"
-    );
+    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
@@ -160,24 +111,17 @@ export function AudioPlayer(props: Props) {
       summaryFontSize,
       runTimeFontFamily,
       runTimeFontSize,
-      artworkAspectRatio,
       channelIcon,
-      magicBackground,
-      audioPlayerBackgroundImageQuery,
-      audioPlayerBackgroundImageDefaultColor,
+      artworkBorderRadius,
     };
   }, [getProp]);
 
-  const artwork = imageSrcFromMediaItem(audio_item, [
-    config?.artworkAspectRatio,
-  ]);
-
   return (
-    <AudioPlayerLayout artwork={artwork} config={config} style={style || {}}>
+    <AudioPlayerTVLayout artwork={artwork} config={config} style={style}>
       <Channel srcImage={config?.channelIcon} config={config} />
       <Title title={title} config={config} />
       <Summary summary={summary} config={config} />
       <Runtime {...extensions} config={config} />
-    </AudioPlayerLayout>
+    </AudioPlayerTVLayout>
   );
 }

package/Components/AudioPlayer/types.ts

@@ -0,0 +1,40 @@
+import { ViewStyle } from "react-native";
+
+export type Props = {
+  audio_item: ZappEntry & {
+    extensions?: {
+      audio_player_artwork_aspect_ratio?: string;
+      audio_player_background_image?: string;
+      audio_player_background_color?: string;
+      audio_player_channel_icon?: string;
+      audio_player_title_color?: string;
+      audio_player_summary_color?: string;
+      audio_player_rtl?: boolean;
+      audio_player_background_image_default_color?: string;
+      start_time?: string;
+      end_time?: string;
+    };
+  };
+  plugin_configuration: {
+    audio_player_background_color?: string;
+    audio_player_title_color?: string;
+    audio_player_summary_color?: string;
+    audio_player_rtl?: string;
+    audio_player_background_image_default_color?: string;
+    audio_player_background_image?: string;
+    audio_player_artwork_aspect_ratio?: string;
+    lg_tv_audio_player_title_font_family?: string;
+    lg_tv_audio_player_title_font_size?: number;
+    lg_tv_audio_player_summary_font_family?: string;
+    lg_tv_audio_player_summary_font_size?: number;
+    samsung_tv_audio_player_title_font_family?: string;
+    samsung_tv_audio_player_title_font_size?: number;
+    samsung_tv_audio_player_summary_font_family?: string;
+    samsung_tv_audio_player_summary_font_size?: number;
+    tv_os_audio_player_title_font_family?: string;
+    tv_os_audio_player_title_font_size?: number;
+    tv_os_audio_player_summary_font_family?: string;
+    tv_os_audio_player_summary_font_size?: number;
+  };
+  style?: ViewStyle;
+};

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -11,6 +11,7 @@ import { allSettled } from "promise";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { ScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
+import { useEventAlerts } from "./utils/useEventAlerts";
 
 const { log_info } = createLogger({
   category: "ScreenContainer",
@@ -29,7 +30,6 @@ export const GeneralContentScreen = ({
   isScreenWrappedInContainer,
   componentsMapExtraProps = {},
   focused,
-  extraOffset,
   parentFocus,
   containerHeight,
   preferredFocus = false,
@@ -103,6 +103,8 @@ export const GeneralContentScreen = ({
     [typeof cellTapAction === "function" ? cellTapAction : onCellTapAction]
   );
 
+  useEventAlerts(screenData);
+
   if (!isReady || isNilOrEmpty(components || uiComponents)) return null;
 
   return (
@@ -119,7 +121,6 @@ export const GeneralContentScreen = ({
           isScreenWrappedInContainer={isScreenWrappedInContainer}
           parentFocus={parentFocus}
           focused={focused}
-          extraOffset={extraOffset}
           containerHeight={containerHeight}
           preferredFocus={preferredFocus}
           {...componentsMapExtraProps}

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -3,8 +3,10 @@ import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
 import { useEffect, useMemo } from "react";
 import { useDispatch } from "react-redux";
 
-import { useLayoutPresets } from "@applicaster/zapp-react-native-redux/hooks/useLayoutPresets";
-import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks/useZappPipesFeeds";
+import {
+  useLayoutPresets,
+  useZappPipesFeeds,
+} from "@applicaster/zapp-react-native-redux/hooks";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";

package/Components/GeneralContentScreen/utils/useEventAlerts.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
+import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "@applicaster/zapp-react-native-utils/actionsExecutor/consts";
+import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+
+export const useEventAlerts = (screenData: ZappRiver) => {
+  const localizations = useLocalizedStrings({
+    localizations: screenData?.localizations || {},
+  });
+
+  const isActive = useIsScreenActive();
+
+  const onMaxTagsReached = React.useCallback(() => {
+    // We can't skip subscribe hook call, so we have to check.
+    if (!isActive || !localizations?.msg_maximum_selection_reached_message) {
+      return;
+    }
+
+    showAlertDialog({
+      title: "",
+      message: localizations.msg_maximum_selection_reached_message,
+      okButtonText:
+        localizations.msg_maximum_selection_reached_message_ok_button || "OK",
+    });
+  }, [localizations, isActive]);
+
+  useSubscriberFor(TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT, onMaxTagsReached);
+};

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

@@ -52,6 +52,7 @@ const _Text = ({
         withScaledLineHeight(withFocusedStyles({ style, otherProps })),
         { height },
       ]}
+      allowFontScaling={false}
       {...withoutLabel(otherProps)}
     >
       {dateTransformEnabled

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -1,28 +1,58 @@
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageSingleSelectProvider";
+import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/StorageSingleSelectProvider";
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
 import React, { useEffect } from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { BehaviorSubject } from "rxjs";
 import { masterCellLogger } from "../logger";
 import get from "lodash/get";
-
-const parseContextKey = (key: string): string | null => {
-  if (!key?.startsWith("@{ctx/")) return null;
-
-  return key.substring("@{ctx/".length, key.length - 1);
+import { ScreenMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenStateMultiSelectProvider";
+import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+
+const parseContextKey = (
+  key: string,
+  context: string = "ctx"
+): string | null => {
+  if (!key?.startsWith(`@{${context}/`)) return null;
+
+  return key.substring(`@{${context}/`.length, key.length - 1);
 };
 
 const getDataSourceProvider = (
-  behavior: Behavior
+  behavior: Behavior,
+  screenRoute: string,
+  screenStateStore: ScreenStateStore
 ): BehaviorSubject<string[] | string> | null => {
   if (!behavior) return null;
 
   const selection = String(behavior.current_selection);
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "multi") {
+      return ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getObservable();
+    }
+
+    if (behavior.select_mode === "single") {
+      return ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getObservable();
+    }
+  }
+
   const contextKey = parseContextKey(selection);
 
   if (contextKey) {
+    // TODO: Add storage scope to behavior
     if (behavior.select_mode === "multi") {
       return StorageMultiSelectProvider.getProvider(contextKey).getObservable();
     }
@@ -41,6 +71,8 @@ const getDataSourceProvider = (
 
 export const useBehaviorUpdate = (behavior: Behavior) => {
   const [lastUpdate, setLastUpdate] = React.useState<number | null>(null);
+  const screenRoute = useRoute()?.pathname || "";
+  const screenStateStore = useScreenStateStore();
   const player = usePlayer();
 
   const triggerUpdate = () => setLastUpdate(Date.now());
@@ -48,7 +80,11 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
   useEffect(() => {
     if (!behavior) return;
 
-    const dataSource = getDataSourceProvider(behavior);
+    const dataSource = getDataSourceProvider(
+      behavior,
+      screenRoute,
+      screenStateStore
+    );
 
     if (dataSource) {
       const subscription = dataSource.subscribe(triggerUpdate);
@@ -72,10 +108,17 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
 
 // We cant use async in this function (its inside render),
 // so we rely on useBehaviorUpdate to update current value and trigger re-render
-export const isCellSelected = (
-  item: ZappEntry,
-  behavior?: Behavior
-): boolean => {
+export const isCellSelected = ({
+  item,
+  screenRoute,
+  screenStateStore,
+  behavior,
+}: {
+  item: ZappEntry;
+  screenRoute: string;
+  screenStateStore: ScreenStateStore;
+  behavior?: Behavior;
+}): boolean => {
   if (!behavior) return false;
 
   const id = behavior.selector ? get(item, behavior.selector) : item.id;
@@ -99,7 +142,32 @@ export const isCellSelected = (
   }
 
   const selection = String(behavior.current_selection);
-  const contextKey = parseContextKey(selection);
+
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "single") {
+      const selectedItem = ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getValue();
+
+      return selectedItem === String(id);
+    }
+
+    if (behavior.select_mode === "multi") {
+      const selectedItems = ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getSelectedItems();
+
+      return selectedItems?.includes(String(id));
+    }
+  }
+
+  const contextKey = parseContextKey(selection, "ctx");
 
   if (contextKey) {
     if (behavior.select_mode === "single") {

package/Components/MasterCell/utils/index.ts

@@ -8,6 +8,8 @@ import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -190,8 +192,18 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
-  return isCellSelected(item, behavior);
+export const isSelected = ({
+  item,
+  screenRoute,
+  screenStateStore,
+  behavior,
+}: {
+  item: ZappEntry;
+  screenRoute: string;
+  screenStateStore: ScreenStateStore;
+  behavior?: Behavior;
+}) => {
+  return isCellSelected({ item, screenRoute, screenStateStore, behavior });
 };
 
 export const useCellState = ({
@@ -204,9 +216,17 @@ export const useCellState = ({
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
+  const router = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const _isSelected = useMemo(
-    () => isSelected(item, behavior),
+    () =>
+      isSelected({
+        item,
+        screenRoute: router?.pathname,
+        screenStateStore,
+        behavior,
+      }),
     [behavior, item, lastUpdate]
   );
 

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,11 +1,5 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { View, LayoutChangeEvent, ScrollView } from "react-native";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { View, ScrollView } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
@@ -15,7 +9,8 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 import type { PluginConfiguration } from "./";
 
-import { ModalHeader } from "./Header";
+import { ModalHeader as DefaultModalHeader } from "./Header";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type ModalComponentProps = {
   items: any[];
@@ -27,6 +22,7 @@ type ModalComponentProps = {
   title?: string;
   maxHeight?: number;
   dismiss: () => void;
+  headerComponent?: React.ComponentType;
   buttonComponent?: React.ComponentType;
   iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
   itemProps?:
@@ -48,33 +44,25 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   const {
     items,
     currentRoute,
-    maxHeight,
     current_selection = null,
     onPress,
     dismiss,
     summary,
     title,
+    headerComponent: ModalHeader = DefaultModalHeader,
     buttonComponent: ButtonComponent = Button,
-    getSelectedItemIcon = (theme) =>
-      theme.modal_bottom_sheet_item_selected_icon,
+    getSelectedItemIcon = ({
+      modal_bottom_sheet_item_selected_icon,
+    }: BaseThemePropertiesMobile) => modal_bottom_sheet_item_selected_icon,
     getDefaultItemIcon = () => null,
     iconPlacement,
   } = props;
 
-  const [headerHeight, setHeaderHeight] = useState(0);
   const route = useRef(currentRoute);
   const theme = useTheme<BaseThemePropertiesMobile>();
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
-  const maxContentHeight = maxHeight
-    ? maxHeight - headerHeight - paddingTop
-    : undefined;
-
-  const onHeaderLayout = useCallback((event: LayoutChangeEvent) => {
-    setHeaderHeight(event.nativeEvent.layout.height);
-  }, []);
-
   useEffect(() => {
     if (currentRoute !== route.current) {
       props.dismiss();
@@ -101,46 +89,44 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     [onPress, dismiss]
   );
 
+  const bottomInset = useSafeAreaInsets().bottom;
+
   return (
     <View
       style={{
-        maxWidth: props.width,
-        paddingTop,
+        maxHeight: props.maxHeight,
+        paddingTop: paddingTop,
       }}
     >
       <ModalHeader
-        width={props.width}
         dismiss={dismiss}
         configuration={theme}
-        onLayout={onHeaderLayout}
         summary={summary}
         title={title}
       />
       <ScrollView
-        bounces={false}
-        style={{ maxHeight: maxContentHeight }}
         contentContainerStyle={{
-          paddingBottom,
-          paddingTop,
+          paddingBottom: paddingBottom + bottomInset,
         }}
       >
-        {items.map((item, index) => (
-          <ButtonComponent
-            key={index}
-            width={props.width}
-            configuration={theme}
-            selectedItem={current_selection}
-            item={item}
-            onPress={handlePress}
-            label={theme[item?.label] ?? item?.label}
-            iconBaseProps={iconBaseProps}
-            itemBaseProps={itemBaseProps}
-            labelBaseProps={labelBaseProps}
-            selectedItemIcon={getSelectedItemIcon(theme)}
-            defaultItemIcon={getDefaultItemIcon(theme)}
-            iconPlacement={iconPlacement}
-          />
-        ))}
+        {items.map((item, index) =>
+          item ? (
+            <ButtonComponent
+              key={index}
+              configuration={theme}
+              selectedItem={current_selection}
+              item={item}
+              onPress={handlePress}
+              label={theme[item?.label] ?? item?.label}
+              iconBaseProps={iconBaseProps}
+              itemBaseProps={itemBaseProps}
+              labelBaseProps={labelBaseProps}
+              selectedItemIcon={getSelectedItemIcon(theme)}
+              defaultItemIcon={getDefaultItemIcon(theme)}
+              iconPlacement={iconPlacement}
+            />
+          ) : null
+        )}
       </ScrollView>
     </View>
   );