@utilitywarehouse/hearth-react-native 0.14.1 → 0.15.1

package/src/components/HTMLElements/Lists.docs.mdx

@@ -1,6 +1,7 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import { UL, OL, LI, Center, BodyText } from '../..';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { BodyText, Center, LI, OL, UL } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as UnorderedListStory from './UnorderedList.stories';
 
 <Meta title="Utility Components / UL & OL (Lists)" />
 
@@ -11,6 +12,9 @@ import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/compo
 The `UL` (Unordered List) and `OL` (Ordered List) components are used to display lists of items. `UL` displays a bulleted list, and `OL` displays a numbered list. The `LI` (List Item) component is used to define each item within these lists.
 
 - [Usage](#usage)
+  - [Unordered List (UL)](#unordered-list-ul)
+  - [Ordered List (OL)](#ordered-list-ol)
+  - [Customising List Styles](#customising-list-styles)
 - [Components](#components)
 
 ## Usage
@@ -73,32 +77,76 @@ const MyComponent = () => {
 };
 ```
 
+### Customising List Styles
+
+You can customise the appearance of list markers using props like `listStyleIcon`, `listStyleImage`, `listStyleColour`, and dimensions. These props can be applied to the `UL`/`OL` container to affect all items, or on individual `LI` components to override them.
+
+<Canvas of={UnorderedListStory.WithCustomIcon} />
+
+```tsx
+import { UL, LI } from '@utilitywarehouse/native-ui';
+import { TickMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Image } from 'react-native';
+
+const MyComponent = () => {
+  return (
+    <UL listStyleColour="feedbackDangerSurfaceDefault">
+      <LI>Primary colored bullet</LI>
+      <LI listStyleColour="feedbackPositiveSurfaceDefault">Danger colored bullet override</LI>
+      <LI listStyleIcon={TickMediumIcon}>Icon bullet</LI>
+      <LI
+        listStyleImage={<Image source={{ uri: '...' }} />}
+        listStyleWidth={20}
+        listStyleHeight={20}
+      >
+        Image bullet
+      </LI>
+    </UL>
+  );
+};
+```
+
 ## Components
 
 ### `UL`
 
 The `UL` component is a container for unordered list items. It inherits all the properties of React Native's [`View` component](https://reactnative.dev/docs/view).
 
-| Property      | Type              | Default | Description                                         |
-| ------------- | ----------------- | ------- | --------------------------------------------------- |
-| `gap`         | `SpaceValue`      | `'100'` | The gap between the list items.                     |
-| `bulletStyle` | `ViewStyle`       | -       | Custom style for the bullet points.                 |
-| `children`    | `React.ReactNode` | -       | The `LI` components to be rendered within the list. |
+| Property          | Type                  | Default | Description                                              |
+| ----------------- | --------------------- | ------- | -------------------------------------------------------- |
+| `gap`             | `SpaceValue`          | `'100'` | The gap between the list items.                          |
+| `bulletStyle`     | `ViewStyle`           | -       | Custom style for the bullet points.                      |
+| `children`        | `React.ReactNode`     | -       | The `LI` components to be rendered within the list.      |
+| `listStyleImage`  | `React.ReactElement`  | -       | Custom element (e.g. Image) to use as the bullet/marker. |
+| `listStyleIcon`   | `React.ComponentType` | -       | Custom icon component to use as the bullet/marker.       |
+| `listStyleWidth`  | `number`              | `20`    | Width of the custom bullet/marker.                       |
+| `listStyleHeight` | `number`              | `20`    | Height of the custom bullet/marker.                      |
+| `listStyleColour` | `ColorValue`          | -       | Color of the bullet/marker.                              |
 
 ### `OL`
 
 The `OL` component is a container for ordered list items. It inherits all the properties of React Native's [`View` component](https://reactnative.dev/docs/view).
 
-| Property      | Type              | Default | Description                                         |
-| ------------- | ----------------- | ------- | --------------------------------------------------- |
-| `gap`         | `SpaceValue`      | `'100'` | The gap between the list items.                     |
-| `bulletStyle` | `ViewStyle`       | -       | Custom style for the numbers.                       |
-| `children`    | `React.ReactNode` | -       | The `LI` components to be rendered within the list. |
+| Property          | Type                  | Default | Description                                              |
+| ----------------- | --------------------- | ------- | -------------------------------------------------------- |
+| `gap`             | `SpaceValue`          | `'100'` | The gap between the list items.                          |
+| `bulletStyle`     | `ViewStyle`           | -       | Custom style for the numbers.                            |
+| `children`        | `React.ReactNode`     | -       | The `LI` components to be rendered within the list.      |
+| `listStyleImage`  | `React.ReactElement`  | -       | Custom element (e.g. Image) to use as the bullet/marker. |
+| `listStyleIcon`   | `React.ComponentType` | -       | Custom icon component to use as the bullet/marker.       |
+| `listStyleWidth`  | `number`              | `20`    | Width of the custom bullet/marker.                       |
+| `listStyleHeight` | `number`              | `20`    | Height of the custom bullet/marker.                      |
+| `listStyleColour` | `ColorValue`          | -       | Color of the number/marker.                              |
 
 ### `LI`
 
 The `LI` component represents an item in a list. It wraps its children in a `BodyText` component if the children are a string. It inherits all the properties of React Native's [`View` component](https://reactnative.dev/docs/view).
 
-| Property   | Type              | Default | Description                                       |
-| ---------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` | `React.ReactNode` | -       | The content to be displayed inside the list item. |
+| Property          | Type                  | Default | Description                                              |
+| ----------------- | --------------------- | ------- | -------------------------------------------------------- |
+| `children`        | `React.ReactNode`     | -       | The content to be displayed inside the list item.        |
+| `listStyleImage`  | `React.ReactElement`  | -       | Custom element (e.g. Image) to use as the bullet/marker. |
+| `listStyleIcon`   | `React.ComponentType` | -       | Custom icon component to use as the bullet/marker.       |
+| `listStyleWidth`  | `number`              | `20`    | Width of the custom bullet/marker.                       |
+| `listStyleHeight` | `number`              | `20`    | Height of the custom bullet/marker.                      |
+| `listStyleColour` | `ColorValue`          | -       | Color of the bullet/marker/number.                       |

package/src/components/HTMLElements/OrderedList.stories.tsx

@@ -1,9 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import OrderedList from './OrderedList';
-import ListItem from './ListItem';
 import { primitive } from '@utilitywarehouse/hearth-tokens/js';
+import { View } from 'react-native';
 import { InputType } from 'storybook/internal/types';
 import { SpaceValue } from '../../types';
+import ListItem from './ListItem';
+import OrderedList from './OrderedList';
 
 const gap: InputType = {
   options: Object.keys(primitive.space),
@@ -53,3 +54,33 @@ export const WithCustomGap: Story = {
     </OrderedList>
   ),
 };
+
+export const WithColoredNumbers: Story = {
+  render: ({ ...args }) => (
+    <OrderedList {...args} listStyleColour="piggyPink300">
+      <ListItem>Item 1</ListItem>
+      <ListItem>Item 2</ListItem>
+    </OrderedList>
+  ),
+};
+
+export const WithIconOverride: Story = {
+  render: ({ ...args }) => {
+    const CustomIcon = (props: any) => (
+      <View
+        style={{
+          width: props.width,
+          height: props.height,
+          backgroundColor: props.color || 'blue',
+          borderRadius: 4,
+        }}
+      />
+    );
+    return (
+      <OrderedList {...args} listStyleIcon={CustomIcon}>
+        <ListItem>Item 1 (overridden)</ListItem>
+        <ListItem>Item 2 (overridden)</ListItem>
+      </OrderedList>
+    );
+  },
+};

package/src/components/HTMLElements/OrderedList.tsx

@@ -1,27 +1,75 @@
 import React from 'react';
 import { StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
-import { useStyleProps } from '../../hooks';
+import { useStyleProps, useTheme } from '../../hooks';
 import { SpaceValue } from '../../types';
+import { getFlattenedColorValue } from '../../utils';
 import { BodyText } from '../BodyText';
+import { ListItemProps, ListStyleProps } from './ListItem';
 
-export interface OrderedListProps extends ViewProps {
+export interface OrderedListProps extends ViewProps, ListStyleProps {
   children: ViewProps['children'];
   gap?: SpaceValue;
   bulletStyle?: ViewStyle;
 }
 
-const OrderedList = ({ children, gap = '100', style, ...rest }: OrderedListProps) => {
+const OrderedList = ({
+  children,
+  gap = '100',
+  style,
+  listStyleImage,
+  listStyleIcon,
+  listStyleWidth,
+  listStyleHeight,
+  listStyleColour,
+  ...rest
+}: OrderedListProps) => {
   const { computedStyles } = useStyleProps({ gap });
+  const theme = useTheme();
   let itemNumber = 0;
+
   return (
     <View style={[computedStyles, style]} {...rest}>
       {React.Children.map(children, child => {
         if (React.isValidElement(child)) {
           itemNumber++;
+          const childProps = child.props as ListItemProps;
+
+          const image = childProps.listStyleImage ?? listStyleImage;
+          const Icon = childProps.listStyleIcon ?? listStyleIcon;
+          const width = childProps.listStyleWidth ?? listStyleWidth ?? 20;
+          const height = childProps.listStyleHeight ?? listStyleHeight ?? 20;
+          const colourRaw = childProps.listStyleColour ?? listStyleColour;
+
+          const colour = colourRaw ? getFlattenedColorValue(colourRaw, theme.color) : undefined;
+
+          let bullet;
+          if (image) {
+            const imageEl = image as React.ReactElement<any>;
+            bullet = React.cloneElement(imageEl, {
+              style: [{ width, height }, imageEl.props.style],
+            });
+          } else if (Icon) {
+            bullet = (
+              <Icon width={width} height={height} color={colour ?? theme.color.text.primary} />
+            );
+          } else {
+            bullet = (
+              <BodyText
+                style={[styles.number, colour && { color: colour }]}
+              >{`${itemNumber}.`}</BodyText>
+            );
+          }
+
+          const isCustom = !!(image || Icon);
+
           return (
             <View style={styles.listItemContainer}>
-              <BodyText style={styles.number}>{`${itemNumber}.`}</BodyText>
-              {React.cloneElement(child as React.ReactElement<any>, {}) as ViewProps['children']}
+              {isCustom ? <View style={{ marginRight: 8 }}>{bullet}</View> : bullet}
+              {
+                React.cloneElement(child as React.ReactElement<ListItemProps>, {
+                  style: [childProps.style, { flex: 1 }],
+                }) as ViewProps['children']
+              }
             </View>
           );
         }
@@ -40,7 +88,7 @@ const styles = StyleSheet.create({
   },
   number: {
     marginRight: 8,
-    lineHeight: undefined, // Allow number to align with first line of text
+    lineHeight: undefined,
   },
 });
 

package/src/components/HTMLElements/UnorderedList.stories.tsx

@@ -1,10 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import UnorderedList from './UnorderedList';
-import ListItem from './ListItem';
+import { Meta, StoryObj } from '@storybook/react-native';
+import { TickMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { primitive } from '@utilitywarehouse/hearth-tokens/js';
-import { InputType } from 'storybook/internal/types';
+import { Image, View } from 'react-native';
+import ListItem from './ListItem';
+import UnorderedList from './UnorderedList';
 
-const gap: InputType = {
+const gap = {
   options: Object.keys(primitive.space),
   control: 'select',
   description: 'Gap between list items.',
@@ -50,3 +51,60 @@ export const WithCustomGap: Story = {
     </UnorderedList>
   ),
 };
+
+export const WithCustomIcon: Story = {
+  render: ({ ...args }) => {
+    return (
+      <UnorderedList
+        {...args}
+        listStyleIcon={TickMediumIcon}
+        listStyleColour="feedbackDangerSurfaceDefault"
+      >
+        <ListItem>List item 1 with icon</ListItem>
+        <ListItem>List item 2 with icon</ListItem>
+        <ListItem>
+          List item 3 with icon is a long example to test alignment, lorem ipsum dolor sit amet
+        </ListItem>
+      </UnorderedList>
+    );
+  },
+};
+
+export const WithCustomImage: Story = {
+  render: ({ ...args }) => (
+    <UnorderedList
+      {...args}
+      listStyleImage={
+        <Image
+          source={{ uri: 'https://placehold.co/20x20.png' }}
+          style={{ width: 20, height: 20 }}
+        />
+      }
+    >
+      <ListItem>List item 1 with image</ListItem>
+      <ListItem>List item 2 with image</ListItem>
+    </UnorderedList>
+  ),
+};
+
+export const WithIndividualItemOverride: Story = {
+  render: ({ ...args }) => {
+    const CheckIcon = (props: any) => (
+      <View
+        style={{
+          width: props.width,
+          height: props.height,
+          backgroundColor: 'green',
+          borderRadius: 10,
+        }}
+      />
+    );
+    return (
+      <UnorderedList {...args}>
+        <ListItem>Default bullet item</ListItem>
+        <ListItem listStyleIcon={CheckIcon}>Success item</ListItem>
+        <ListItem listStyleColour="blue600">Colored bullet item</ListItem>
+      </UnorderedList>
+    );
+  },
+};

package/src/components/HTMLElements/UnorderedList.tsx

@@ -1,25 +1,69 @@
 import React from 'react';
 import { StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
-import { useStyleProps } from '../../hooks';
+import { useStyleProps, useTheme } from '../../hooks';
 import { SpaceValue } from '../../types';
+import { getFlattenedColorValue } from '../../utils';
 import { BodyText } from '../BodyText';
+import { ListItemProps, ListStyleProps } from './ListItem';
 
-export interface UnorderedListProps extends ViewProps {
+export interface UnorderedListProps extends ViewProps, ListStyleProps {
   children: ViewProps['children'];
   gap?: SpaceValue;
   bulletStyle?: ViewStyle;
 }
 
-const UnorderedList = ({ children, gap = '100', style, ...rest }: UnorderedListProps) => {
+const UnorderedList = ({
+  children,
+  gap = '100',
+  style,
+  listStyleImage,
+  listStyleIcon,
+  listStyleWidth,
+  listStyleHeight,
+  listStyleColour,
+  ...rest
+}: UnorderedListProps) => {
   const { computedStyles } = useStyleProps({ gap });
+  const theme = useTheme();
+
   return (
     <View style={[computedStyles, style]} {...rest}>
       {React.Children.map(children, child => {
         if (React.isValidElement(child)) {
+          const childProps = child.props as ListItemProps;
+
+          const image = childProps.listStyleImage ?? listStyleImage;
+          const Icon = childProps.listStyleIcon ?? listStyleIcon;
+          const width = childProps.listStyleWidth ?? listStyleWidth ?? 20;
+          const height = childProps.listStyleHeight ?? listStyleHeight ?? 20;
+          const colourRaw = childProps.listStyleColour ?? listStyleColour;
+
+          const colour = colourRaw ? getFlattenedColorValue(colourRaw, theme.color) : undefined;
+
+          let bullet;
+          if (image) {
+            const imageEl = image as React.ReactElement<any>;
+            bullet = React.cloneElement(imageEl, {
+              style: [{ width, height }, imageEl.props.style],
+            });
+          } else if (Icon) {
+            bullet = (
+              <Icon width={width} height={height} color={colour ?? theme.color.text.primary} />
+            );
+          } else {
+            bullet = <BodyText style={[styles.bullet, colour && { color: colour }]}>•</BodyText>;
+          }
+
+          const isCustom = !!(image || Icon);
+
           return (
             <View style={styles.listItemContainer}>
-              <BodyText style={styles.bullet}>•</BodyText>
-              {React.cloneElement(child as React.ReactElement<any>, {}) as ViewProps['children']}
+              {isCustom ? <View style={{ marginRight: 8 }}>{bullet}</View> : bullet}
+              {
+                React.cloneElement(child as React.ReactElement<ListItemProps>, {
+                  style: [childProps.style, { flex: 1 }],
+                }) as ViewProps['children']
+              }
             </View>
           );
         }
@@ -38,7 +82,7 @@ const styles = StyleSheet.create({
   },
   bullet: {
     marginRight: 8,
-    lineHeight: undefined, // Allow bullet to align with first line of text
+    lineHeight: undefined,
   },
 });
 

package/src/components/Helper/Helper.tsx

@@ -52,7 +52,7 @@ const styles = StyleSheet.create(theme => ({
   container: {
     flexDirection: 'row',
     gap: theme.components.formField.helper.gap,
-    alignItems: 'center',
+    alignItems: 'flex-start',
     variants: {
       disabled: {
         true: {

package/src/components/Helper/HelperText.tsx

@@ -23,6 +23,7 @@ HelperText.displayName = 'HelperText';
 const styles = StyleSheet.create(theme => ({
   text: {
     color: theme.color.text.secondary,
+    flexShrink: 1,
     variants: {
       validationStatus: {
         valid: {

package/src/components/Input/Input.tsx

@@ -48,6 +48,7 @@ const Input = forwardRef<TextInput, InputProps>(
       clearable = false,
       required,
       inBottomSheet = false,
+      style,
       ...props
     },
     ref
@@ -96,6 +97,7 @@ const Input = forwardRef<TextInput, InputProps>(
         isFocused={focused}
         type={type as undefined}
         isRequired={isRequired}
+        style={style}
       >
         {children ? (
           <>{children}</>

package/src/components/Modal/Modal.props.ts

@@ -12,6 +12,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   description?: string;
   inNavModal?: boolean;
   fullscreen?: boolean;
+  stickyFooter?: boolean;
   children?: ViewProps['children'];
   onPressPrimaryButton?: () => void;
   primaryButtonText?: string;

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,9 @@
-import { BottomSheetScrollViewMethods, SNAP_POINT_TYPE } from '@gorhom/bottom-sheet';
+import {
+  BottomSheetFooter,
+  BottomSheetFooterProps,
+  BottomSheetScrollViewMethods,
+  SNAP_POINT_TYPE,
+} from '@gorhom/bottom-sheet';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
@@ -43,6 +48,7 @@ const Modal = ({
   secondaryButtonProps,
   closeButtonProps,
   inNavModal = false,
+  stickyFooter = true,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -155,7 +161,37 @@ const Modal = ({
     }
   };
 
-  styles.useVariants({ loading });
+  const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+
+  styles.useVariants({
+    loading,
+    bothButtons: !!(onPressPrimaryButton && onPressSecondaryButton),
+    noButtons,
+    stickyFooter,
+  });
+
+  const footer = (
+    <View style={styles.footer}>
+      {onPressPrimaryButton && primaryButtonText ? (
+        <Button
+          onPress={handlePrimaryButtonPress}
+          text={primaryButtonText}
+          {...primaryButtonProps}
+          variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+          colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+        />
+      ) : null}
+      {onPressSecondaryButton && secondaryButtonText ? (
+        <Button
+          onPress={handleSecondaryButtonPress}
+          text={secondaryButtonText}
+          {...secondaryButtonProps}
+          variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+          colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+        />
+      ) : null}
+    </View>
+  );
 
   const content = (
     <>
@@ -216,31 +252,28 @@ const Modal = ({
             </View>
           ) : null}
           {children}
-          <View style={styles.footer}>
-            {onPressPrimaryButton && primaryButtonText ? (
-              <Button
-                onPress={handlePrimaryButtonPress}
-                text={primaryButtonText}
-                {...primaryButtonProps}
-                variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
-                colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
-              />
-            ) : null}
-            {onPressSecondaryButton && secondaryButtonText ? (
-              <Button
-                onPress={handleSecondaryButtonPress}
-                text={secondaryButtonText}
-                {...secondaryButtonProps}
-                variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
-                colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
-              />
-            ) : null}
-          </View>
+          {!stickyFooter && !noButtons ? footer : null}
         </View>
       )}
     </>
   );
 
+  const renderFooter = useCallback(
+    (props: BottomSheetFooterProps) => (
+      <BottomSheetFooter {...props}>
+        <View style={styles.footerWrap}>{footer}</View>
+      </BottomSheetFooter>
+    ),
+    [
+      onPressPrimaryButton,
+      primaryButtonText,
+      onPressSecondaryButton,
+      secondaryButtonText,
+      primaryButtonProps,
+      secondaryButtonProps,
+    ]
+  );
+
   return inNavModal ? (
     <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
       {Platform.OS === 'android' ? (
@@ -262,11 +295,12 @@ const Modal = ({
       showHandle={typeof loading !== 'undefined' && loading ? false : props.showHandle}
       accessible={false}
       style={styles.modal}
+      footerComponent={stickyFooter && !noButtons ? renderFooter : undefined}
       {...props}
       onChange={handleChange}
     >
       {loading ? <View style={styles.loadingTop} /> : null}
-      <BottomSheetScrollView contentContainerStyle={styles.container} ref={scrollViewRef}>
+      <BottomSheetScrollView contentContainerStyle={styles.scrollView} ref={scrollViewRef}>
         {content}
       </BottomSheetScrollView>
     </BottomSheetModal>
@@ -288,6 +322,30 @@ const styles = StyleSheet.create((theme, rt) => ({
       },
     },
   },
+  scrollView: {
+    flex: 1,
+    variants: {
+      bothButtons: {
+        true: {
+          paddingBottom: 166 + rt.insets.bottom - theme.components.modal.padding,
+        },
+        false: {
+          paddingBottom: 102 + rt.insets.bottom - theme.components.modal.padding,
+        },
+      },
+      noButtons: {
+        true: {
+          paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+        },
+      },
+      stickyFooter: {
+        true: {},
+        false: {
+          paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+        },
+      },
+    },
+  },
   header: {
     flexDirection: 'row',
     gap: theme.components.modal.gap,
@@ -321,6 +379,11 @@ const styles = StyleSheet.create((theme, rt) => ({
   footer: {
     gap: theme.components.modal.action.gap,
   },
+  footerWrap: {
+    backgroundColor: theme.color.surface.neutral.strong,
+    paddingHorizontal: theme.components.bottomSheet.padding,
+    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+  },
   inNavModalContainer: {
     flex: 1,
     ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),

package/src/components/PillGroup/PillGroup.props.ts

@@ -1,22 +1,36 @@
 import React from 'react';
 import { ScrollViewProps, ViewStyle } from 'react-native';
 
-export interface PillGroupProps
-  extends Omit<ScrollViewProps, 'horizontal' | 'contentContainerStyle' | 'showsHorizontalScrollIndicator'> {
-  /** Controlled selected value(s) */
-  value: string | string[];
-
-  /** Multi-select mode. Default = false */
-  multiple?: boolean;
-
+export interface PillGroupBaseProps
+  extends Omit<
+    ScrollViewProps,
+    'horizontal' | 'contentContainerStyle' | 'showsHorizontalScrollIndicator'
+  > {
   /** Allow pills to wrap lines. Default = true */
   wrap?: boolean;
 
-  /** Handle selection changes */
-  onChange?: (value: string | string[]) => void;
-
   /** Children must be <Pill> elements */
   children: React.ReactNode;
 
   style?: ViewStyle | ViewStyle[];
 }
+
+interface SinglePillGroupProps extends PillGroupBaseProps {
+  /** Multi-select mode. Default = false */
+  multiple?: false;
+  /** Controlled selected value */
+  value: string;
+  /** Handle selection changes */
+  onChange?: (value: string) => void;
+}
+
+interface MultiPillGroupProps extends PillGroupBaseProps {
+  /** Multi-select mode. Default = false */
+  multiple: true;
+  /** Controlled selected value(s) */
+  value: string[];
+  /** Handle selection changes */
+  onChange?: (value: string[]) => void;
+}
+
+export type PillGroupProps = SinglePillGroupProps | MultiPillGroupProps;