diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index ad69d27e7385..dabcaf90e4b2 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -118,6 +118,7 @@ function BaseSelectionList( shouldPreventActiveCellVirtualization = false, shouldScrollToFocusedIndex = true, onContentSizeChange, + listItemTitleStyles, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -524,6 +525,7 @@ function BaseSelectionList( normalizedIndex={normalizedIndex} shouldSyncFocus={!isTextInputFocusedRef.current} wrapperStyle={listItemWrapperStyle} + titleStyles={listItemTitleStyles} shouldHighlightSelectedItem={shouldHighlightSelectedItem} singleExecution={singleExecution} /> diff --git a/src/components/SelectionList/BaseSelectionListItemRenderer.tsx b/src/components/SelectionList/BaseSelectionListItemRenderer.tsx index b08d2ae2cfbc..915e2c0fcf80 100644 --- a/src/components/SelectionList/BaseSelectionListItemRenderer.tsx +++ b/src/components/SelectionList/BaseSelectionListItemRenderer.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import type {StyleProp, TextStyle} from 'react-native'; import type useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import type useSingleExecution from '@hooks/useSingleExecution'; import * as SearchUIUtils from '@libs/SearchUIUtils'; @@ -11,6 +12,7 @@ type BaseSelectionListItemRendererProps = Omit[1]; normalizedIndex: number; singleExecution: ReturnType['singleExecution']; + titleStyles?: StyleProp; }; function BaseSelectionListItemRenderer({ @@ -37,6 +39,7 @@ function BaseSelectionListItemRenderer({ shouldSyncFocus, shouldHighlightSelectedItem, wrapperStyle, + titleStyles, singleExecution, }: BaseSelectionListItemRendererProps) { const handleOnCheckboxPress = () => { @@ -82,6 +85,7 @@ function BaseSelectionListItemRenderer({ shouldSyncFocus={shouldSyncFocus} shouldHighlightSelectedItem={shouldHighlightSelectedItem} wrapperStyle={wrapperStyle} + titleStyles={titleStyles} /> {item.footerContent && item.footerContent} diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index 3a8a4f0b57a6..256c3b0a876f 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -22,6 +22,7 @@ function RadioListItem({ onFocus, shouldSyncFocus, wrapperStyle, + titleStyles, }: RadioListItemProps) { const styles = useThemeStyles(); const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text; @@ -59,6 +60,7 @@ function RadioListItem({ item.alternateText ? styles.mb1 : null, isDisabled && styles.colorMuted, isMultilineSupported ? {paddingLeft} : null, + titleStyles, ]} numberOfLines={isMultilineSupported ? 2 : 1} /> diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 8e94b2f0069e..3774821ce35f 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -297,6 +297,9 @@ type ListItemProps = CommonListItemProps & { /** Whether we highlight all the selected items */ shouldHighlightSelectedItem?: boolean; + + /** Styles applied for the title */ + titleStyles?: StyleProp; }; type BaseListItemProps = CommonListItemProps & { @@ -563,6 +566,9 @@ type BaseSelectionListProps = Partial & { /** Styles for the section title */ sectionTitleStyles?: StyleProp; + /** Styles applid for the title of the list item */ + listItemTitleStyles?: StyleProp; + /** This may improve scroll performance for large lists */ removeClippedSubviews?: boolean; diff --git a/src/components/TagPicker/index.tsx b/src/components/TagPicker/index.tsx index 0368f15a9752..08668c4aa38d 100644 --- a/src/components/TagPicker/index.tsx +++ b/src/components/TagPicker/index.tsx @@ -98,6 +98,7 @@ function TagPicker({selectedTag, tagListName, policyID, tagListIndex, shouldShow