@hero-design/rn 7.20.1 → 7.21.0

package/src/theme/components/badge.ts

@@ -19,10 +19,10 @@ const getBadgeTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    height: theme.fontSizes.small + theme.space.small,
-    minWidth: theme.fontSizes.small + theme.space.small,
-    statusHeight: theme.space.small,
-    statusWidth: theme.space.small,
+    height: theme.fontSizes.small + theme.sizes.small,
+    minWidth: theme.fontSizes.small + theme.sizes.small,
+    statusHeight: theme.sizes.small,
+    statusWidth: theme.sizes.small,
   };
 
   const space = {

package/src/theme/components/bottomNavigation.ts

@@ -7,7 +7,7 @@ const getBottomNavigationTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    height: 72,
+    height: theme.sizes['6xlarge'],
   };
 
   const shadows = {

package/src/theme/components/bottomSheet.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getBottomSheetTheme = (theme: GlobalTheme) => {
@@ -9,8 +8,8 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    sectionHeight: scale(64),
-    closeIcon: scale(48),
+    sectionHeight: theme.sizes.xxxxxlarge,
+    closeIcon: theme.sizes.xxxlarge,
   };
 
   const space = {

package/src/theme/components/calendar.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getCalendarTheme = (theme: GlobalTheme) => {
@@ -9,13 +8,16 @@ const getCalendarTheme = (theme: GlobalTheme) => {
     inverted: theme.colors.invertedText,
   };
 
+  const cellSize = theme.sizes.xxxlarge;
+  const markSize = theme.sizes.xsmall;
+
   const sizes = {
-    cellWidth: scale(48),
-    cellHeight: scale(48),
-    cellCircleWidth: scale(44),
-    cellCircleHeight: scale(44),
-    markWidth: scale(4),
-    markHeight: scale(4),
+    cellWidth: cellSize,
+    cellHeight: cellSize,
+    cellCircleWidth: cellSize - markSize,
+    cellCircleHeight: cellSize - markSize,
+    markWidth: markSize,
+    markHeight: markSize,
   };
 
   const space = {

package/src/theme/components/card.ts

@@ -12,7 +12,7 @@ const getCardTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    indicatorWidth: theme.space.medium,
+    indicatorWidth: theme.sizes.medium,
   };
 
   const radii = {

package/src/theme/components/checkbox.ts

@@ -1,5 +1,4 @@
 import type { GlobalTheme } from '../global';
-import { scale } from '../../utils/scale';
 
 const getCheckboxTheme = (theme: GlobalTheme) => {
   const colors = {
@@ -8,15 +7,13 @@ const getCheckboxTheme = (theme: GlobalTheme) => {
   };
 
   const space = {
-    // to remove the empty space above the check icon
-    // and also to center the check mark
-    iconTop: -scale(3),
+    iconTop: 0,
     wrapperPadding: theme.space.medium,
     iconDescriptionPadding: theme.space.smallMedium,
   };
 
   const sizes = {
-    icon: scale(20),
+    icon: theme.sizes.large,
   };
 
   const radii = {

package/src/theme/components/datePicker.ts

@@ -1,8 +1,8 @@
-import { scale } from '../../utils/scale';
+import { GlobalTheme } from '../global';
 
-const getDatePickerTheme = () => {
+const getDatePickerTheme = (theme: GlobalTheme) => {
   const sizes = {
-    height: scale(176),
+    height: theme.sizes['19xlarge'],
   };
 
   return { sizes };

package/src/theme/components/drawer.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getDrawerTheme = (theme: GlobalTheme) => {
@@ -19,8 +18,8 @@ const getDrawerTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    handlerWidth: scale(56),
-    handlerHeight: scale(4),
+    handlerWidth: theme.sizes.xxxxlarge,
+    handlerHeight: theme.sizes.xsmall,
   };
 
   const shadows = {

package/src/theme/components/empty.ts

@@ -1,19 +1,14 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getEmptyTheme = (theme: GlobalTheme) => {
   const space = {
     titleMargin: theme.space.medium,
-    illustrationMargin: theme.space.large,
+    imageMargin: theme.space.large,
     wrapperPadding: theme.space.medium,
   };
 
   const sizes = {
-    illustration: scale(168),
-  };
-
-  const radii = {
-    illustration: theme.radii.rounded,
+    image: theme.sizes['18xlarge'],
   };
 
   const colors = {
@@ -33,7 +28,7 @@ const getEmptyTheme = (theme: GlobalTheme) => {
     description: theme.fonts.light,
   };
 
-  return { fontSizes, colors, sizes, space, fonts, radii };
+  return { fontSizes, colors, sizes, space, fonts };
 };
 
 export default getEmptyTheme;

package/src/theme/components/fab.ts

@@ -12,8 +12,8 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    width: 64,
-    height: 64,
+    width: theme.sizes.xxxxxlarge,
+    height: theme.sizes.xxxxxlarge,
   };
 
   const fonts = {

package/src/theme/components/image.ts

@@ -0,0 +1,12 @@
+import type { GlobalTheme } from '../global';
+
+const getImageTheme = (theme: GlobalTheme) => {
+  const sizes = {
+    '6xlarge': theme.sizes['6xlarge'],
+    '15xlarge': theme.sizes['15xlarge'],
+  };
+
+  return { sizes };
+};
+
+export default getImageTheme;

package/src/theme/components/pinInput.ts

@@ -24,9 +24,9 @@ const getPinInputTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    cellWidth: theme.space.xxlarge,
-    cellHeight: theme.space.xxxlarge,
-    mask: theme.space.medium,
+    cellWidth: theme.sizes.xxlarge,
+    cellHeight: theme.sizes.xxxlarge,
+    mask: theme.sizes.medium,
   };
 
   const space = {

package/src/theme/components/progress.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getProgressTheme = (theme: GlobalTheme) => {
@@ -13,8 +12,8 @@ const getProgressTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    circleWidth: scale(76),
-    barHeight: scale(4),
+    circleWidth: theme.sizes['6xlarge'],
+    barHeight: theme.sizes.xsmall,
   };
 
   const radii = {

package/src/theme/components/radio.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getRadioTheme = (theme: GlobalTheme) => {
@@ -11,9 +10,14 @@ const getRadioTheme = (theme: GlobalTheme) => {
     groupTopMargin: theme.space.xsmall,
   };
 
+  const boundingBoxSize = theme.sizes.large;
+  const innerPadding = theme.space.xsmall;
+  const circle = boundingBoxSize - innerPadding;
+  const innerCircle = circle / 2;
+
   const sizes = {
-    circle: scale(20),
-    innerCircle: scale(10),
+    circle,
+    innerCircle,
   };
 
   const borderWidths = {

package/src/theme/components/richTextEditor.ts

@@ -12,10 +12,10 @@ const getRichTextEditorTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    editorMinHeight: 21,
-    toolbarButtonSize: theme.space.xxxlarge,
-    toolbarSeparatorWidth: 1,
-    toolbarSeparatorHeight: theme.space.medium,
+    editorMinHeight: theme.sizes.large,
+    toolbarButtonSize: theme.sizes.xxxlarge,
+    toolbarSeparatorWidth: theme.sizes.xxsmall,
+    toolbarSeparatorHeight: theme.sizes.medium,
   };
 
   const fontSizes = {

package/src/theme/components/slider.ts

@@ -0,0 +1,13 @@
+import type { GlobalTheme } from '../global';
+
+const getSliderTheme = (theme: GlobalTheme) => {
+  const colors = {
+    minimumTrackTint: theme.colors.__alpha__primary1,
+    thumbTint: theme.colors.__alpha__globalSecondary4,
+    maximumTrackTint: theme.colors.__alpha__secondary4,
+  };
+
+  return { colors };
+};
+
+export default getSliderTheme;

package/src/theme/components/switch.ts

@@ -26,10 +26,24 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     medium: theme.space.large * 1.2,
   };
 
+  const sizes = {
+    thumbs: {
+      small: theme.sizes.medium,
+      medium: theme.sizes.large,
+    },
+    widths: {
+      small: theme.sizes.xxxlarge,
+      medium: theme.sizes.xxxxxlarge,
+    },
+    heights: {
+      small: theme.sizes.large,
+      medium: theme.sizes.xlarge,
+    },
+  };
+
   const spaces = {
     small: theme.space.xsmall,
     medium: theme.space.xsmall,
-    inactive: 0,
   };
 
   const radii = {
@@ -38,6 +52,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
 
   return {
     colors,
+    sizes,
     thumbSizes,
     widths,
     heights,

package/src/theme/components/tabs.ts

@@ -27,7 +27,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    indicator: theme.space.xxsmall,
+    indicator: theme.sizes.xxsmall,
   };
 
   return { borderWidths, colors, space, radii, sizes };

package/src/theme/components/timePicker.ts

@@ -1,8 +1,8 @@
-import { scale } from '../../utils/scale';
+import { GlobalTheme } from '../global';
 
-const getTimePickerTheme = () => {
+const getTimePickerTheme = (theme: GlobalTheme) => {
   const sizes = {
-    height: scale(176),
+    height: theme.sizes['19xlarge'],
   };
 
   return { sizes };

package/src/theme/components/toast.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getToastTheme = (theme: GlobalTheme) => {
@@ -14,7 +13,7 @@ const getToastTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    height: scale(48),
+    height: theme.sizes.xxxlarge,
   };
 
   const space = {

package/src/theme/getTheme.ts

@@ -17,6 +17,7 @@ import getDrawerTheme from './components/drawer';
 import getEmptyTheme from './components/empty';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
+import getImageTheme from './components/image';
 import getListTheme from './components/list';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
@@ -24,6 +25,7 @@ import getRadioTheme from './components/radio';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
+import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
@@ -33,6 +35,7 @@ import getTimePickerTheme from './components/timePicker';
 import getToastTheme from './components/toast';
 import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
+
 import type { GlobalTheme, Scale, SystemPalette } from './global';
 
 type Theme = GlobalTheme & {
@@ -54,6 +57,7 @@ type Theme = GlobalTheme & {
     empty: ReturnType<typeof getEmptyTheme>;
     fab: ReturnType<typeof getFABTheme>;
     icon: ReturnType<typeof getIconTheme>;
+    image: ReturnType<typeof getImageTheme>;
     list: ReturnType<typeof getListTheme>;
     pinInput: ReturnType<typeof getPinInputTheme>;
     progress: ReturnType<typeof getProgressTheme>;
@@ -61,6 +65,7 @@ type Theme = GlobalTheme & {
     richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
     select: ReturnType<typeof getSelectTheme>;
+    slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
     switch: ReturnType<typeof getSwitchTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
@@ -92,12 +97,13 @@ const getTheme = (
       card: getCardTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
-      datePicker: getDatePickerTheme(),
+      datePicker: getDatePickerTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
       empty: getEmptyTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
+      image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
@@ -105,12 +111,13 @@ const getTheme = (
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
+      slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
       switch: getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
       tag: getTagTheme(globalTheme),
       textInput: getTextInputTheme(globalTheme),
-      timePicker: getTimePickerTheme(),
+      timePicker: getTimePickerTheme(globalTheme),
       toast: getToastTheme(globalTheme),
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),

package/src/theme/global/colors/swag.ts

@@ -52,6 +52,7 @@ const swagSystemPalette: SystemPalette = {
   __alpha__globalPrimary: palette.maasstrichtBlue,
 
   __alpha__globalSecondary1: palette.maasstrichtBlueLight30,
+  __alpha__globalSecondary4: palette.maasstrichtBlueLight90,
 
   __alpha__globalNeutral3: palette.greyLight90,
 
@@ -65,6 +66,7 @@ const swagSystemPalette: SystemPalette = {
   __alpha__globalLabel8: palette.honeydew,
   __alpha__globalLabel9: palette.aliceBlue,
 
+  __alpha__primary1: swagPalette.scarletGum,
   __alpha__primary2: swagPalette.mauve,
 
   __alpha__secondary1: swagPalette.scarletGumLight30,

package/src/theme/global/colors/types.ts

@@ -46,6 +46,7 @@ export type SystemPalette = {
   __alpha__globalPrimary: string;
 
   __alpha__globalSecondary1: string;
+  __alpha__globalSecondary4: string;
 
   __alpha__globalNeutral3: string;
 
@@ -59,6 +60,7 @@ export type SystemPalette = {
   __alpha__globalLabel8: string;
   __alpha__globalLabel9: string;
 
+  __alpha__primary1: string;
   __alpha__primary2: string;
 
   __alpha__secondary1: string;

package/src/theme/global/index.ts

@@ -4,6 +4,7 @@ import workSystemPalette from './colors/work';
 
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
+import { getSizes } from './sizes';
 import { getBorderWidths, getRadii } from './borders';
 import type { Scale } from './scale';
 import type { SystemPalette } from './colors/types';
@@ -14,6 +15,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const lineHeights = getLineHeights(fontSizes);
   const borderWidths = getBorderWidths(scale.borderWidth);
   const space = getSpace(scale.space);
+  const sizes = getSizes(scale.size);
   const radii = getRadii(scale.radius);
 
   return {
@@ -25,6 +27,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
     lineHeights,
     borderWidths,
     space,
+    sizes,
     radii,
   };
 };

package/src/theme/global/scale.ts

@@ -2,6 +2,8 @@ const BASE_BORDER_WIDTH = 1;
 
 const BASE_SPACE = 8;
 
+const BASE_SIZE = 8;
+
 const BASE_FONT = 'BeVietnamPro';
 
 const BASE_FONT_SIZE = 10;
@@ -11,6 +13,7 @@ const BASE_RADIUS = 4;
 const scale = {
   borderWidth: BASE_BORDER_WIDTH,
   space: BASE_SPACE,
+  size: BASE_SIZE,
   font: BASE_FONT,
   fontSize: BASE_FONT_SIZE,
   radius: BASE_RADIUS,

package/src/theme/global/sizes.ts

@@ -0,0 +1,29 @@
+import { getSpace } from './space';
+import type { Space } from './space';
+import { scale } from '../../utils/scale';
+
+interface Sizes extends Space {
+  xxxxxlarge: number;
+  '6xlarge': number;
+  '7xlarge': number;
+  '9xlarge': number;
+  '14xlarge': number;
+  '15xlarge': number;
+  '18xlarge': number;
+  '19xlarge': number;
+}
+
+const getSizes = (baseSize: number): Sizes => ({
+  ...getSpace(baseSize),
+  xxxxxlarge: scale(baseSize * 8), // 64
+  '6xlarge': scale(baseSize * 9), // 72
+  '7xlarge': scale(baseSize * 10), // 80
+  '9xlarge': scale(baseSize * 12), // 96
+  '14xlarge': scale(baseSize * 17), // 136
+  '15xlarge': scale(baseSize * 18), // 144
+  '18xlarge': scale(baseSize * 21), // 168
+  '19xlarge': scale(baseSize * 22), // 176
+});
+
+export { getSizes };
+export type { Sizes };

package/testUtils/setup.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/prefer-stateless-function */
+/* eslint-disable max-classes-per-file */
 jest.mock('react-native-vector-icons', () => ({
   createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
 }));
@@ -52,6 +56,16 @@ jest.mock('@react-native-community/datetimepicker', () => {
   };
 });
 
+jest.mock('@react-native-community/slider', () => {
+  const React = jest.requireActual('react');
+
+  return class Slider extends React.Component {
+    render() {
+      return React.createElement('Slider', this.props, this.props.children);
+    }
+  };
+});
+
 jest.mock('react-native-webview', () => {
   const React = jest.requireActual('react');
 

package/types/components/BottomSheet/index.d.ts

@@ -17,6 +17,10 @@ interface BottomSheetProps {
      * Bottom sheet's content.
      */
     children?: ReactNode;
+    /**
+     * Callback is called when the Bottom Sheet finishes running animation.
+     */
+    onAnimationEnd?: () => void;
     /**
      * Callback is called when the Bottom Sheet is opened.
      */
@@ -51,5 +55,5 @@ interface BottomSheetProps {
      */
     testID?: string;
 }
-declare const BottomSheet: ({ open, header, footer, children, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
+declare const BottomSheet: ({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
 export default BottomSheet;

package/types/components/Empty/StyledEmpty.d.ts

@@ -6,12 +6,6 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
-declare const StyledIllustration: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
-}, {}, {
-    ref?: import("react").Ref<View>;
-}>;
 declare const StyledTitle: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
@@ -28,4 +22,4 @@ declare const StyledDescription: import("@emotion/native").StyledComponent<impor
 }, {}, {
     ref?: import("react").Ref<Text>;
 }>;
-export { StyledWrapper, StyledIllustration, StyledTitle, StyledDescription };
+export { StyledWrapper, StyledTitle, StyledDescription };

package/types/components/Empty/index.d.ts

@@ -1,5 +1,11 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle, ImageProps as RNImageProps } from 'react-native';
+import { ImageProps } from '../Image';
 interface EmptyProps {
+    /**
+     * Image to be displayed.
+     */
+    image?: ReactElement<ImageProps | RNImageProps>;
     /**
      * Empty's title.
      */
@@ -22,5 +28,5 @@ interface EmptyProps {
      */
     testID?: string;
 }
-declare const Empty: ({ title, description, style, testID, variant, }: EmptyProps) => JSX.Element;
+declare const Empty: ({ image, title, description, style, testID, variant, }: EmptyProps) => JSX.Element;
 export default Empty;

package/types/components/Image/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Image/index.d.ts

@@ -0,0 +1,17 @@
+import type { ImageProps as RNImageProps } from 'react-native';
+export interface ImageProps extends RNImageProps {
+    /**
+     * Whether the image is rounded.
+     */
+    rounded?: boolean;
+    /**
+     * Image sizes, following the same sizes as the `sizes` global theme.
+     */
+    size?: '6xlarge' | '15xlarge';
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Image: ({ rounded, size, testID, style, ...imageNativeProps }: ImageProps) => JSX.Element;
+export default Image;

package/types/components/Select/MultiSelect/OptionList.d.ts

@@ -1,8 +1,11 @@
+import React from 'react';
+import type { SectionList } from 'react-native';
 import type { MultiSelectProps } from '.';
-import type { OptionType, SectionData } from '../types';
+import type { OptionType, SectionData, SectionType } from '../types';
 declare type OptionListProps<V, T extends OptionType<V>> = Pick<MultiSelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange' | 'value' | 'renderOption'> & {
     onPress: (value: V[]) => void;
     sections: SectionData<V, T>[];
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
-declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, }: OptionListProps<V, T>) => JSX.Element;
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, }: OptionListProps<V, T>) => JSX.Element;
 export default OptionList;

package/types/components/Select/MultiSelect/index.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps } from 'react-native';
 import type { OptionType, SelectProps } from '../types';
 export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>> extends SelectProps<V, T> {
     /**
@@ -12,6 +14,10 @@ export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>> ex
      * Footer label.
      */
     footerLabel: string;
+    /**
+     * Customise the selected value rendering.
+     */
+    renderSelectedValue?: (selectedValue: V[], inputProps: NativeTextInputProps) => React.ReactNode;
 }
-declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, query, error, editable, disabled, numberOfLines, style, testID, value, }: MultiSelectProps<V, T>): JSX.Element;
+declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: MultiSelectProps<V, T>): JSX.Element;
 export default MultiSelect;