@utilitywarehouse/hearth-react-native 0.30.4 → 0.31.1

package/src/components/Modal/Modal.tsx

@@ -6,9 +6,10 @@ import {
 } from '@gorhom/bottom-sheet';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, LayoutChangeEvent, Platform, View, findNodeHandle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
 import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
 import { useBottomSheetContext } from '../BottomSheet/BottomSheet.context';
@@ -38,15 +39,19 @@ const Modal = ({
   loadingDescription,
   fullscreen = false,
   image,
+  footer,
+  footerStyle,
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
   stickyFooter = true,
   ...props
 }: ModalProps) => {
+  const theme = useTheme();
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const viewRef = useRef<View>(null);
   const scrollViewRef = useRef<BottomSheetScrollViewMethods>(null);
+  const [stickyFooterHeight, setStickyFooterHeight] = useState(0);
   const { useSafeAreaInsets } = useBottomSheetContext();
 
   useImperativeHandle(ref, () => ({
@@ -100,45 +105,57 @@ const Modal = ({
     }
   }, [closeOnSecondaryButtonPress, onPressSecondaryButton]);
 
-  const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+  const handleStickyFooterLayout = useCallback((event: LayoutChangeEvent) => {
+    const nextHeight = Math.ceil(event.nativeEvent.layout.height);
+
+    setStickyFooterHeight(currentHeight =>
+      currentHeight === nextHeight ? currentHeight : nextHeight
+    );
+  }, []);
+
+  const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
+  const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
+  const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
+  const shouldShowFooter = !loading && hasFooter;
 
   styles.useVariants({
     loading,
-    bothButtons: !!(onPressPrimaryButton && onPressSecondaryButton),
-    noButtons,
+    noButtons: !shouldShowFooter,
     stickyFooter,
     showHandle: props.showHandle,
     useSafeAreaInsets,
   });
 
-  const footer = useMemo(
-    () => (
-      <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 footerContent = useMemo(
+    () =>
+      footer ?? (
+        <View style={styles.footer}>
+          {hasPrimaryButton ? (
+            <Button
+              onPress={handlePrimaryButtonPress}
+              text={primaryButtonText}
+              {...primaryButtonProps}
+              variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+              colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+            />
+          ) : null}
+          {hasSecondaryButton ? (
+            <Button
+              onPress={handleSecondaryButtonPress}
+              text={secondaryButtonText}
+              {...secondaryButtonProps}
+              variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+              colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+            />
+          ) : null}
+        </View>
+      ),
     [
+      footer,
       handlePrimaryButtonPress,
       handleSecondaryButtonPress,
-      onPressPrimaryButton,
-      onPressSecondaryButton,
+      hasPrimaryButton,
+      hasSecondaryButton,
       primaryButtonProps,
       primaryButtonText,
       secondaryButtonProps,
@@ -209,38 +226,64 @@ const Modal = ({
             </View>
           ) : null}
           {children}
-          {!stickyFooter && !noButtons ? footer : null}
+          {!stickyFooter && shouldShowFooter ? (
+            <View style={footerStyle}>{footerContent}</View>
+          ) : null}
         </View>
       )}
     </>
   );
 
   const renderFooter = useCallback(
-    (props: BottomSheetFooterProps) => (
-      <BottomSheetFooter {...props}>
-        <View style={styles.footerWrap}>{footer}</View>
+    (bottomSheetFooterProps: BottomSheetFooterProps) => (
+      <BottomSheetFooter {...bottomSheetFooterProps}>
+        <View onLayout={handleStickyFooterLayout} style={[styles.footerWrap, footerStyle]}>
+          {footerContent}
+        </View>
       </BottomSheetFooter>
     ),
-    [footer]
+    [footerContent, footerStyle, handleStickyFooterLayout]
   );
 
   return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      enableDynamicSizing={true}
-      snapPoints={image || fullscreen ? ['90%'] : props.snapPoints}
-      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.scrollView} ref={scrollViewRef}>
-        {content}
-      </BottomSheetScrollView>
-    </BottomSheetModal>
+    <>
+      {stickyFooter && shouldShowFooter && stickyFooterHeight === 0 ? (
+        <View
+          accessible={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={styles.footerMeasurementContainer}
+        >
+          <View onLayout={handleStickyFooterLayout} style={[styles.footerWrap, footerStyle]}>
+            {footerContent}
+          </View>
+        </View>
+      ) : null}
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing={true}
+        snapPoints={image || fullscreen ? ['90%'] : props.snapPoints}
+        showHandle={typeof loading !== 'undefined' && loading ? false : props.showHandle}
+        accessible={false}
+        style={styles.modal}
+        footerComponent={stickyFooter && shouldShowFooter ? renderFooter : undefined}
+        {...props}
+        onChange={handleChange}
+      >
+        {loading ? <View style={styles.loadingTop} /> : null}
+        <BottomSheetScrollView
+          contentContainerStyle={[
+            styles.scrollView,
+            stickyFooter && shouldShowFooter && stickyFooterHeight > 0
+              ? { paddingBottom: stickyFooterHeight + theme.components.modal.gap }
+              : null,
+          ]}
+          ref={scrollViewRef}
+        >
+          {content}
+        </BottomSheetScrollView>
+      </BottomSheetModal>
+    </>
   );
 };
 
@@ -262,14 +305,6 @@ const styles = StyleSheet.create((theme, rt) => ({
   scrollView: {
     flex: 1,
     variants: {
-      bothButtons: {
-        true: {
-          paddingBottom: 166,
-        },
-        false: {
-          paddingBottom: 102,
-        },
-      },
       noButtons: {
         true: {
           paddingBottom: theme.components.modal.padding,
@@ -287,31 +322,10 @@ const styles = StyleSheet.create((theme, rt) => ({
       },
     },
     compoundVariants: [
-      {
-        bothButtons: true,
-        useSafeAreaInsets: true,
-        styles: {
-          paddingBottom:
-            166 +
-            rt.insets.bottom -
-            theme.components.modal.padding +
-            theme.components.bottomSheet.padding,
-        },
-      },
-      {
-        bothButtons: false,
-        useSafeAreaInsets: true,
-        styles: {
-          paddingBottom:
-            102 +
-            rt.insets.bottom -
-            theme.components.modal.padding +
-            theme.components.bottomSheet.padding,
-        },
-      },
       {
         noButtons: true,
         useSafeAreaInsets: true,
+        stickyFooter: false,
         styles: {
           paddingBottom:
             rt.insets.bottom +
@@ -372,6 +386,12 @@ const styles = StyleSheet.create((theme, rt) => ({
   footer: {
     gap: theme.components.modal.action.gap,
   },
+  footerMeasurementContainer: {
+    left: 0,
+    opacity: 0,
+    position: 'absolute',
+    right: 0,
+  },
   footerWrap: {
     backgroundColor: theme.color.surface.neutral.strong,
     paddingHorizontal: theme.components.bottomSheet.padding,

package/src/components/Modal/Modal.web.tsx

@@ -31,6 +31,8 @@ const Modal = ({
   loadingHeading = 'Loading...',
   fullscreen = false,
   image,
+  footer,
+  footerStyle,
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
@@ -91,7 +93,32 @@ const Modal = ({
     }
   };
 
-  const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+  const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
+  const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
+  const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
+
+  const footerContent = footer ?? (
+    <View style={styles.footer}>
+      {hasPrimaryButton ? (
+        <Button
+          onPress={handlePrimaryButtonPress}
+          text={primaryButtonText}
+          {...primaryButtonProps}
+          variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+          colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+        />
+      ) : null}
+      {hasSecondaryButton ? (
+        <Button
+          onPress={handleSecondaryButtonPress}
+          text={secondaryButtonText}
+          {...secondaryButtonProps}
+          variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+          colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+        />
+      ) : null}
+    </View>
+  );
 
   const content = (
     <>
@@ -152,28 +179,7 @@ const Modal = ({
             </View>
           ) : null}
           {children}
-          {!noButtons ? (
-            <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>
-          ) : null}
+          {hasFooter ? <View style={footerStyle}>{footerContent}</View> : null}
         </View>
       )}
     </>

package/src/components/NavModal/NavModal.docs.mdx

@@ -1,4 +1,5 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { BodyText, Button, Flex } from '../../';
 import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import modalAndroidVideo from '../../../docs/assets/modal-android.mp4';
 import modaliOSVideo from '../../../docs/assets/modal-ios.mp4';
@@ -147,6 +148,8 @@ const styles = StyleSheet.create({
 | `onPressCloseButton`     | `() => void`                                                                                                     | Called when the close button is pressed.                                                                                                                                                         | -              |
 | `primaryButtonProps`     | `Omit<ButtonWithoutChildrenProps, 'children'>`                                                                   | Extra props forwarded to the primary button.                                                                                                                                                     | -              |
 | `secondaryButtonProps`   | `Omit<ButtonWithoutChildrenProps, 'children'>`                                                                   | Extra props forwarded to the secondary button.                                                                                                                                                   | -              |
+| `footer`                 | `ReactNode`                                                                                                      | Custom footer content that replaces the built-in action buttons.                                                                                                                                 | -              |
+| `footerStyle`            | `StyleProp<ViewStyle>`                                                                                           | Styles applied to the footer container, useful for sticky footer shadows or extra spacing.                                                                                                       | -              |
 | `closeButtonProps`       | `Omit<UnstyledIconButtonProps, 'children'>`                                                                      | Extra props forwarded to the close button.                                                                                                                                                       | -              |
 | `loading`                | `boolean`                                                                                                        | Replaces the content with a loading state and spinner.                                                                                                                                           | `false`        |
 | `loadingHeading`         | `string`                                                                                                         | Heading text shown while `loading` is true.                                                                                                                                                      | `'Loading...'` |
@@ -160,6 +163,8 @@ const styles = StyleSheet.create({
 | `useSafeAreaInsets`      | `boolean`                                                                                                        | Whether to apply safe area insets as padding within the component. This is enabled by default to fix full-screen presentation padding but can be disabled if you want to manage insets yourself. | `true`         |
 | `scrollViewProps`        | `ScrollViewProps`                                                                                                | Extra props forwarded to the `ScrollView` wrapping the modal content when `scrollable` is true.                                                                                                  | -              |
 
+When `footer` is provided, the primary and secondary button props are not available. Compose the footer actions directly inside the custom footer instead.
+
 ## Accessibility
 
 `NavModal` keeps the same heading, description, button labeling, and loading-state support as `Modal`, but it does not force accessibility focus on mount. Because this component is used on a navigation-presented screen, React Navigation and the platform own the initial screen focus behavior.
@@ -177,3 +182,27 @@ const styles = StyleSheet.create({
 ### Full-Screen Presentation
 
 <Canvas of={Stories.FullScreenPresentation} />
+
+### Sticky Custom Footer
+
+<Canvas of={Stories.StickyCustomFooter} />
+
+```tsx
+<NavModal
+  heading="Confirm changes"
+  description="Use a custom sticky footer when your actions need a custom layout."
+  footer={
+    <Flex direction="row" spacing="md">
+      <Button variant="outline" colorScheme="functional" style={{ flex: 1 }}>
+        Back
+      </Button>
+      <Button style={{ flex: 1 }}>Continue</Button>
+    </Flex>
+  }
+  footerStyle={{
+    boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+  }}
+>
+  <BodyText>This sticky footer stays pinned while the content scrolls.</BodyText>
+</NavModal>
+```

package/src/components/NavModal/NavModal.props.ts

@@ -1,12 +1,16 @@
 import { Ref } from 'react';
 import { ScrollViewProps } from 'react-native';
-import { ModalCommonProps } from '../Modal/Modal.shared.types';
+import {
+  ModalButtonFooterProps,
+  ModalCommonBaseProps,
+  ModalCustomFooterProps,
+} from '../Modal/Modal.shared.types';
 
 export interface NavModalRef {
   triggerCloseAnimation?: () => void;
 }
 
-interface NavModalProps extends ModalCommonProps {
+type NavModalBaseProps = ModalCommonBaseProps & {
   ref?: Ref<NavModalRef>;
   background?: 'default' | 'brand';
   scrollable?: boolean;
@@ -18,6 +22,10 @@ interface NavModalProps extends ModalCommonProps {
     | 'containedTransparentModal';
   useSafeAreaInsets?: boolean;
   scrollViewProps?: Omit<ScrollViewProps, 'children'>;
-}
+};
+
+type NavModalProps =
+  | (NavModalBaseProps & ModalButtonFooterProps)
+  | (NavModalBaseProps & ModalCustomFooterProps);
 
 export default NavModalProps;

package/src/components/NavModal/NavModal.stories.tsx

@@ -2,6 +2,8 @@ import { Meta, StoryObj } from '@storybook/react-native';
 import { Platform, View } from 'react-native';
 import { BodyText } from '../BodyText';
 import { Box } from '../Box';
+import { Button } from '../Button';
+import { Flex } from '../Flex';
 import NavModal from './NavModal';
 
 const meta = {
@@ -129,3 +131,30 @@ export const FullScreenPresentation: Story = {
     </View>
   ),
 };
+
+export const StickyCustomFooter: Story = {
+  render: () => (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 720 } : { flex: 1 }}>
+      <NavModal
+        heading="Confirm changes"
+        description="This example replaces the default buttons with a custom sticky footer."
+        footer={
+          <Flex direction="row" spacing="md">
+            <Button variant="outline" colorScheme="functional" style={{ flex: 1 }}>
+              Back
+            </Button>
+            <Button style={{ flex: 1 }}>Continue</Button>
+          </Flex>
+        }
+        footerStyle={{
+          boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+        }}
+      >
+        <Box gap="200">
+          <BodyText>This sticky footer stays pinned while the body content scrolls.</BodyText>
+          <BodyText>Use the footer prop when you need custom layouts or custom buttons.</BodyText>
+        </Box>
+      </NavModal>
+    </View>
+  ),
+};

package/src/components/NavModal/NavModal.tsx

@@ -33,6 +33,8 @@ const NavModal = ({
   loadingHeading = 'Loading...',
   loadingDescription,
   image,
+  footer,
+  footerStyle,
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
@@ -110,7 +112,9 @@ const NavModal = ({
     onPressSecondaryButton?.();
   }, [onPressSecondaryButton]);
 
-  const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+  const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
+  const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
+  const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
 
   styles.useVariants({
     loading,
@@ -121,37 +125,39 @@ const NavModal = ({
     stickyFooter,
   });
 
-  const footer = useMemo(
-    () => (
-      <View style={styles.footer}>
-        {onPressPrimaryButton && primaryButtonText ? (
-          <Button
-            onPress={handlePrimaryButtonPress}
-            text={primaryButtonText}
-            inverted={isBrandBackground}
-            {...primaryButtonProps}
-            variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
-            colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
-          />
-        ) : null}
-        {onPressSecondaryButton && secondaryButtonText ? (
-          <Button
-            onPress={handleSecondaryButtonPress}
-            text={secondaryButtonText}
-            inverted={isBrandBackground}
-            {...secondaryButtonProps}
-            variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
-            colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
-          />
-        ) : null}
-      </View>
-    ),
+  const footerContent = useMemo(
+    () =>
+      footer ?? (
+        <View style={styles.footer}>
+          {hasPrimaryButton ? (
+            <Button
+              onPress={handlePrimaryButtonPress}
+              text={primaryButtonText}
+              inverted={isBrandBackground}
+              {...primaryButtonProps}
+              variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+              colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+            />
+          ) : null}
+          {hasSecondaryButton ? (
+            <Button
+              onPress={handleSecondaryButtonPress}
+              text={secondaryButtonText}
+              inverted={isBrandBackground}
+              {...secondaryButtonProps}
+              variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+              colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+            />
+          ) : null}
+        </View>
+      ),
     [
+      footer,
       handlePrimaryButtonPress,
       handleSecondaryButtonPress,
+      hasPrimaryButton,
+      hasSecondaryButton,
       isBrandBackground,
-      onPressPrimaryButton,
-      onPressSecondaryButton,
       primaryButtonProps,
       primaryButtonText,
       secondaryButtonProps,
@@ -238,8 +244,8 @@ const NavModal = ({
               {...scrollViewProps}
             >
               {children}
-              {!stickyFooter && !noButtons ? (
-                <View style={styles.inNavModalFooterContainer}>{footer}</View>
+              {!stickyFooter && hasFooter ? (
+                <View style={[styles.inNavModalFooterContainer, footerStyle]}>{footerContent}</View>
               ) : null}
             </ScrollView>
           ) : (
@@ -249,12 +255,12 @@ const NavModal = ({
               }}
             >
               {children}
-              {!stickyFooter && !noButtons ? (
-                <View style={styles.inNavModalFooterContainer}>{footer}</View>
+              {!stickyFooter && hasFooter ? (
+                <View style={[styles.inNavModalFooterContainer, footerStyle]}>{footerContent}</View>
               ) : null}
             </View>
           )}
-          {stickyFooter && !noButtons ? footer : null}
+          {stickyFooter && hasFooter ? <View style={footerStyle}>{footerContent}</View> : null}
         </View>
       )}
     </>

package/src/components/Table/TableHeaderCell.tsx

@@ -11,9 +11,10 @@ const renderContent = (
   weight: 'regular' | 'semibold' = 'semibold',
   color: 'purple' | 'white' = 'white'
 ) => {
+  styles.useVariants({ color });
   if (typeof children === 'string' || typeof children === 'number') {
     return (
-      <BodyText size="md" weight={weight} style={styles.text} inverted={color === 'purple'}>
+      <BodyText size="md" weight={weight} style={styles.text}>
         {children}
       </BodyText>
     );
@@ -129,6 +130,14 @@ const styles = StyleSheet.create(theme => ({
           color: theme.color.text.primary,
         },
       },
+      color: {
+        purple: {
+          color: theme.components.table.headerCell.foregoundColorInverted,
+        },
+        white: {
+          color: theme.components.table.headerCell.foregoundColor,
+        },
+      },
     },
   },
 }));

package/src/components/Textarea/Textarea.docs.mdx

@@ -71,7 +71,8 @@ all of the React Native [`View` props](https://reactnative.dev/docs/view).
 | helperIcon       | `ComponentType`                    | `-`         | Icon to display alongside the helper text. **(Only to be used if the input has no children)**                                                                           |
 | validText        | `string`                           | `-`         | Text to display when validation status is 'valid'. **(Only to be used if the input has no children)**                                                                   |
 | invalidText      | `string`                           | `-`         | Text to display when validation status is 'invalid'.                                                                                                                    |
-| required         | `boolean`                          | `false`     | Whether the input is required. **(Only to be used if the input has no children)**                                                                                       |
+| required         | `boolean`                          | `true`      | Whether the input is required. **(Only to be used if the input has no children)**                                                                                       |
+| resizable        | `boolean`                          | `false`     | Adds a bottom-right drag handle so the textarea can be resized vertically.                                                                                              |
 | value            | `string`                           | `-`         | The value of the input. **(Only to be used if the input has no children)**                                                                                              |
 | onChange         | `function`                         | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
 | onBlur           | `function`                         | `-`         | Callback function that is triggered when the input loses focus. **(Only to be used if the input has no children)**                                                      |
@@ -118,6 +119,7 @@ const MyComponent = () => {
   const handleChange = text => {
     setValue(text);
   };
+
   return (
     <Textarea
       label="Description"
@@ -130,6 +132,36 @@ const MyComponent = () => {
 };
 ```
 
+### Resizable
+
+Set `resizable` to `true` to let people drag the bottom-right handle and increase the textarea height.
+
+<UsageWrap>
+  <Center>
+    <Textarea
+      label="Additional notes"
+      helperText="Drag the corner handle to resize"
+      placeholder="Enter your text here..."
+      resizable
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Textarea } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  return (
+    <Textarea
+      label="Additional notes"
+      helperText="Drag the corner handle to resize"
+      placeholder="Enter your text here..."
+      resizable
+    />
+  );
+};
+```
+
 ## Accessibility
 
 We have outlined the various features that ensure the Textarea component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the [WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-1.2/#textbox).