@utilitywarehouse/hearth-react-native 0.22.0 → 0.23.0-test-list

package/src/components/List/List.tsx

@@ -14,7 +14,8 @@ const List = ({
   invalidText,
   ...props
 }: ListProps) => {
-  const { loading, disabled, container = 'none' } = props;
+  const { loading, disabled, container = 'none', testID, style, ...rest } = props;
+
   const orderRef = useRef<string[]>([]);
   const [firstItemId, setFirstItemId] = useState<string | undefined>(undefined);
   const containerToCard: {
@@ -51,7 +52,7 @@ const List = ({
   styles.useVariants({ disabled });
   return (
     <ListContext.Provider value={value}>
-      <View {...props} style={[styles.container, props.style]}>
+      <View {...rest} style={[styles.container, style]}>
         {heading ? (
           <SectionHeader
             heading={heading}
@@ -61,10 +62,10 @@ const List = ({
           />
         ) : null}
         {container === 'none' ? (
-          <View>{children}</View>
+          <View testID={testID}>{children}</View>
         ) : (
           React.Children.count(children) > 0 && (
-            <Card {...containerToCard} noPadding style={styles.card}>
+            <Card {...containerToCard} noPadding style={styles.card} testID={testID}>
               <>{children}</>
             </Card>
           )

package/src/components/Modal/Modal.docs.mdx

@@ -109,6 +109,7 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                  | -              |
 | `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                       | `false`        |
 | `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false`        |
+| `background`                  | `'default' \| 'brand'`                                             | Sets the modal background. Only applies when `inNavModal` is `true`                                           | `'default'`    |
 
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 

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

@@ -25,6 +25,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+  background?: 'default' | 'brand';
 }
 
 export default ModalProps;

package/src/components/Modal/Modal.stories.tsx

@@ -66,6 +66,7 @@ const meta = {
     onPressCloseButton: () => null,
     onPressPrimaryButton: () => null,
     onPressSecondaryButton: () => null,
+    background: 'brand',
   },
 } satisfies Meta<typeof Modal>;
 

package/src/components/Modal/Modal.tsx

@@ -7,7 +7,7 @@ import {
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -50,6 +50,7 @@ const Modal = ({
   closeButtonProps,
   inNavModal = false,
   stickyFooter = true,
+  background = 'default',
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -170,6 +171,7 @@ const Modal = ({
     noButtons,
     stickyFooter,
     showHandle: props.showHandle,
+    background: background === 'brand' ? 'brand' : 'primary',
   });
 
   const footer = (
@@ -178,6 +180,7 @@ const Modal = ({
         <Button
           onPress={handlePrimaryButtonPress}
           text={primaryButtonText}
+          inverted={background === 'brand' && inNavModal}
           {...primaryButtonProps}
           variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
           colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
@@ -187,6 +190,7 @@ const Modal = ({
         <Button
           onPress={handleSecondaryButtonPress}
           text={secondaryButtonText}
+          inverted={background === 'brand' && inNavModal}
           {...secondaryButtonProps}
           variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
           colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
@@ -232,6 +236,7 @@ const Modal = ({
                 icon={CloseMediumIcon}
                 onPress={handleCloseButtonPress}
                 accessibilityLabel="Close modal"
+                inverted={background === 'brand' && inNavModal}
                 {...closeButtonProps}
               />
             ) : null}
@@ -253,7 +258,7 @@ const Modal = ({
               </View>
             </View>
           ) : null}
-          {children}
+          {inNavModal ? <ScrollView style={{ flex: 1 }}>{children}</ScrollView> : children}
           {(!stickyFooter || inNavModal) && !noButtons ? footer : null}
         </View>
       )}
@@ -277,7 +282,12 @@ const Modal = ({
   );
 
   return inNavModal ? (
-    <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: theme.color.background[background === 'brand' ? 'brand' : 'primary'],
+      }}
+    >
       {Platform.OS === 'android' ? (
         <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
           <Animated.View style={[styles.pretendContent, animatedPretendContentStyle]} />
@@ -420,6 +430,14 @@ const styles = StyleSheet.create((theme, rt) => ({
     gap: theme.components.modal.gap,
     padding: theme.components.modal.padding,
     paddingBottom: theme.components.modal.padding + rt.insets.bottom,
+    variants: {
+      background: {
+        primary: {},
+        brand: {
+          backgroundColor: theme.color.background.brand,
+        },
+      },
+    },
   },
   androidContainer: {
     height: rt.insets.top + 18,

package/src/components/VerificationInput/VerificationInput.tsx

@@ -1,8 +1,7 @@
-import { forwardRef, useImperativeHandle } from 'react';
-import { View } from 'react-native';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Platform, TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
-import { useVerificationInput } from './useVerificationInput';
 import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
 import { VerificationInputSlot } from './VerificationInputSlot';
 
@@ -28,30 +27,147 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
     ref
   ) => {
     const length = 6;
-    const {
-      inputRefs,
-      displayValue,
-      focusedIndex,
-      handleFocus,
-      handleBlur,
-      handleChangeText,
-      handleKeyPress,
-    } = useVerificationInput({
-      value,
-      onChangeText,
-    });
+    const inputRef = useRef<TextInput>(null);
+    const latestValueRef = useRef(value);
+    const [displayValue, setDisplayValue] = useState(value);
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+    const [selection, setSelection] = useState({ start: 0, end: 0 });
+    const latestSelectionRef = useRef(selection);
+    const ignoreNextSelectionRef = useRef(false);
+    const pendingFocusIndexRef = useRef<number | null>(null);
+
+    useEffect(() => {
+      if (value !== latestValueRef.current) {
+        const trimmedValue = value.slice(0, length);
+        latestValueRef.current = trimmedValue;
+        setDisplayValue(trimmedValue);
+        const nextPos = Math.min(trimmedValue.length, length);
+        const nextSelection = { start: nextPos, end: nextPos };
+        ignoreNextSelectionRef.current = true;
+        latestSelectionRef.current = nextSelection;
+        setSelection(nextSelection);
+      }
+    }, [length, value]);
+
+    const updateValue = (nextValue: string) => {
+      const trimmedValue = nextValue.slice(0, length);
+      latestValueRef.current = trimmedValue;
+      setDisplayValue(trimmedValue);
+      onChangeText?.(trimmedValue);
+    };
+
+    const setSelectionIndex = (index: number) => {
+      const clampedIndex = Math.max(0, Math.min(index, length));
+      const hasChar = !!latestValueRef.current[clampedIndex];
+      const endIndex = hasChar ? Math.min(clampedIndex + 1, length) : clampedIndex;
+      const nextSelection = { start: clampedIndex, end: endIndex };
+      ignoreNextSelectionRef.current = true;
+      latestSelectionRef.current = nextSelection;
+      setSelection(nextSelection);
+      setFocusedIndex(Math.min(clampedIndex, length - 1));
+    };
+
+    const setCaretIndex = (index: number) => {
+      const clampedIndex = Math.max(0, Math.min(index, length));
+      const nextSelection = { start: clampedIndex, end: clampedIndex };
+      ignoreNextSelectionRef.current = true;
+      latestSelectionRef.current = nextSelection;
+      setSelection(nextSelection);
+      setFocusedIndex(Math.min(clampedIndex, length - 1));
+    };
+
+    const findDiffIndex = (prevValue: string, nextValue: string) => {
+      const minLength = Math.min(prevValue.length, nextValue.length);
+      for (let i = 0; i < minLength; i += 1) {
+        if (prevValue[i] !== nextValue[i]) {
+          return i;
+        }
+      }
+      return minLength;
+    };
+
+    const handleChangeText = (text: string) => {
+      const prevValue = latestValueRef.current;
+      const nextValue = text.slice(0, length);
+      const prevLength = prevValue.length;
+      const nextLength = nextValue.length;
+      const diff = nextLength - prevLength;
+      const isBulkInsert = text.length > 1 && diff > 1;
+      const shouldBlur = nextLength >= length;
+      let nextIndex = Math.max(
+        0,
+        Math.min(latestSelectionRef.current.start + (diff >= 0 ? 1 : diff), length)
+      );
+      if (Platform.OS === 'android') {
+        const editedIndex = findDiffIndex(prevValue, nextValue);
+        nextIndex = diff >= 0 ? Math.min(editedIndex + 1, length) : Math.max(editedIndex, 0);
+      }
+      updateValue(nextValue);
+      if (isBulkInsert) {
+        setCaretIndex(Math.min(nextLength, length));
+        if (shouldBlur) {
+          inputRef.current?.blur();
+        }
+        return;
+      }
+      if (nextIndex >= length) {
+        setCaretIndex(nextIndex);
+        if (shouldBlur) {
+          inputRef.current?.blur();
+        }
+        return;
+      }
+
+      if (nextLength >= length) {
+        setSelectionIndex(nextIndex);
+        inputRef.current?.blur();
+        return;
+      }
+
+      const hasNextChar = !!nextValue[nextIndex];
+      if (hasNextChar) {
+        setSelectionIndex(nextIndex);
+      } else {
+        setCaretIndex(nextIndex);
+      }
+    };
+
+    const handleFocus = () => {
+      if (pendingFocusIndexRef.current !== null) {
+        setSelectionIndex(pendingFocusIndexRef.current);
+        pendingFocusIndexRef.current = null;
+        return;
+      }
+      setFocusedIndex(Math.min(selection.start, length - 1));
+    };
+
+    const handleBlur = () => {
+      setFocusedIndex(null);
+    };
 
     useImperativeHandle(
       ref,
       () => ({
-        focus: () => inputRefs.current[0]?.focus(),
-        blur: () => {
-          inputRefs.current.forEach(input => input?.blur());
+        focus: () => {
+          inputRef.current?.focus();
+          const nextIndex = Math.min(latestValueRef.current.length, length - 1);
+          if (latestValueRef.current.length >= length) {
+            setSelectionIndex(nextIndex);
+          } else {
+            setCaretIndex(nextIndex);
+          }
+        },
+        blur: () => inputRef.current?.blur(),
+        clear: () => {
+          updateValue('');
+          setSelectionIndex(0);
+          inputRef.current?.blur();
+          setFocusedIndex(null);
         },
-        clear: () => onChangeText?.(''),
         focusIndex: (index: number) => {
           if (index >= 0 && index < length) {
-            inputRefs.current[index]?.focus();
+            inputRef.current?.focus();
+            setSelectionIndex(index);
           }
         },
       }),
@@ -60,6 +176,29 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
 
     const slots = Array.from({ length }, (_, index) => index);
 
+    const getAccessibilityLabel = () => {
+      return label || props.accessibilityLabel;
+    };
+
+    const getAccessibilityHint = () => {
+      let accessibilityHint = '';
+      if (helperText) {
+        accessibilityHint = accessibilityHint + helperText;
+      }
+      if (validationStatus !== 'initial') {
+        if (accessibilityHint.length > 0) {
+          accessibilityHint = accessibilityHint + ', ';
+        }
+        if (validationStatus === 'invalid' && invalidText) {
+          accessibilityHint = accessibilityHint + invalidText;
+        }
+        if (validationStatus === 'valid' && validText) {
+          accessibilityHint = accessibilityHint + validText;
+        }
+      }
+      return accessibilityHint || props.accessibilityHint;
+    };
+
     return (
       <FormField
         label={label}
@@ -71,31 +210,70 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
         invalidText={invalidText}
         disabled={disabled}
         readonly={readonly}
+        accessibilityHandledByChildren
         style={[styles.root, style]}
         {...props}
       >
         <View style={styles.slotsContainer}>
+          <TextInput
+            ref={inputRef}
+            value={displayValue}
+            autoFocus={autoFocus}
+            editable={!disabled && !readonly}
+            accessibilityLabel={getAccessibilityLabel()}
+            accessibilityHint={getAccessibilityHint()}
+            accessibilityState={{ disabled: disabled || readonly }}
+            importantForAccessibility="yes"
+            onChangeText={handleChangeText}
+            onSelectionChange={event => {
+              const nextSelection = event.nativeEvent.selection;
+              if (
+                ignoreNextSelectionRef.current &&
+                (nextSelection.start !== latestSelectionRef.current.start ||
+                  nextSelection.end !== latestSelectionRef.current.end)
+              ) {
+                return;
+              }
+              if (pendingFocusIndexRef.current !== null) {
+                return;
+              }
+              ignoreNextSelectionRef.current = false;
+              latestSelectionRef.current = nextSelection;
+              setSelection(nextSelection);
+              setFocusedIndex(Math.min(nextSelection.start, length - 1));
+            }}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            selection={selection}
+            keyboardType="number-pad"
+            textContentType="oneTimeCode"
+            autoComplete="sms-otp"
+            secureTextEntry={secureTextEntry}
+            maxLength={length}
+            caretHidden
+            style={styles.hiddenInput}
+            pointerEvents="none"
+          />
           {slots.map(index => {
             const char = displayValue[index] || '';
             const isActive = focusedIndex === index;
+            const displayChar = secureTextEntry && char ? '*' : char;
 
             return (
               <VerificationInputSlot
                 key={index}
-                ref={inputRef => {
-                  inputRefs.current[index] = inputRef;
-                }}
-                autoFocus={index === 0 && autoFocus}
-                value={char}
+                value={displayChar}
                 isActive={isActive}
+                showCaret={isActive && !displayChar}
                 validationStatus={validationStatus}
                 disabled={disabled}
                 readonly={readonly}
                 secureTextEntry={secureTextEntry}
-                onChangeText={text => handleChangeText(text, index)}
-                onKeyPress={e => handleKeyPress(e, index)}
-                onFocus={() => handleFocus(index)}
-                onBlur={handleBlur}
+                onPress={() => {
+                  pendingFocusIndexRef.current = index;
+                  inputRef.current?.focus();
+                  setSelectionIndex(index);
+                }}
               />
             );
           })}
@@ -115,6 +293,17 @@ const styles = StyleSheet.create(theme => ({
     flexDirection: 'row',
     gap: theme.components.input.verification.gap,
     width: '100%',
+    position: 'relative',
+  },
+  hiddenInput: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    left: 0,
+    top: 0,
+    color: 'transparent',
+    fontSize: 1,
+    opacity: 0.1,
   },
 }));
 

package/src/components/VerificationInput/VerificationInputSlot.tsx

@@ -1,33 +1,84 @@
-import { forwardRef } from 'react';
-import { TextInput, TextInputProps } from 'react-native';
+import { forwardRef, useEffect } from 'react';
+import { Pressable, Text, View, ViewProps } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
-import InputField from '../Input/InputField';
 
-interface VerificationInputSlotProps extends TextInputProps {
+interface VerificationInputSlotProps extends ViewProps {
+  value: string;
   isActive: boolean;
+  showCaret?: boolean;
   validationStatus: 'initial' | 'valid' | 'invalid';
   disabled?: boolean;
   readonly?: boolean;
+  onPress?: () => void;
+  secureTextEntry?: boolean;
 }
 
-export const VerificationInputSlot = forwardRef<TextInput, VerificationInputSlotProps>(
-  ({ isActive, validationStatus, disabled, readonly, style, ...props }, ref) => {
+export const VerificationInputSlot = forwardRef<View, VerificationInputSlotProps>(
+  (
+    {
+      value,
+      isActive,
+      showCaret,
+      validationStatus,
+      disabled,
+      readonly,
+      style,
+      onPress,
+      secureTextEntry,
+      ...props
+    },
+    ref
+  ) => {
     styles.useVariants({
       disabled,
       readonly,
       validationStatus,
       active: isActive,
+      secureTextEntry,
     });
 
+    const caretOpacity = useSharedValue(0);
+    const animatedCaretStyle = useAnimatedStyle(() => ({
+      opacity: caretOpacity.value,
+    }));
+
+    useEffect(() => {
+      if (showCaret && !disabled && !readonly) {
+        caretOpacity.value = withRepeat(
+          withTiming(1, { duration: 500, easing: Easing.inOut(Easing.ease) }),
+          -1,
+          true
+        );
+        return;
+      }
+
+      caretOpacity.value = withTiming(0, { duration: 150, easing: Easing.out(Easing.ease) });
+    }, [caretOpacity, disabled, readonly, showCaret]);
+
     return (
-      <InputField
+      <Pressable
         ref={ref}
-        {...props}
-        editable={!disabled && !readonly}
-        selectTextOnFocus
-        keyboardType="number-pad"
+        onPress={onPress}
+        disabled={disabled || readonly}
         style={[styles.slot, style]}
-      />
+        accessibilityRole="button"
+        accessible={false}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...props}
+      >
+        <Text style={styles.slotText}>{value}</Text>
+        {showCaret && !disabled && !readonly && (
+          <Animated.View style={[styles.caret, animatedCaretStyle]} />
+        )}
+      </Pressable>
     );
   }
 );
@@ -36,15 +87,20 @@ VerificationInputSlot.displayName = 'VerificationInputSlot';
 
 const styles = StyleSheet.create(theme => ({
   slot: {
-    flex: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     width: theme.components.input.height,
     height: theme.components.input.height,
+    minWidth: theme.components.input.height,
+    minHeight: theme.components.input.height,
     borderWidth: theme.components.input.borderWidth,
     borderColor: theme.color.border.strong,
     borderRadius: theme.components.input.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
     padding: 0,
+    position: 'relative',
     variants: {
       disabled: {
         true: {
@@ -91,4 +147,24 @@ const styles = StyleSheet.create(theme => ({
       },
     ],
   },
+  slotText: {
+    color: theme.color.text.primary,
+    fontSize: theme.typography.mobile.bodyText.md.fontSize,
+    fontFamily: theme.typography.mobile.bodyText.fontFamily,
+    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
+    textAlign: 'center',
+    variants: {
+      secureTextEntry: {
+        true: {
+          paddingTop: 5,
+        },
+      },
+    },
+  },
+  caret: {
+    position: 'absolute',
+    width: 2,
+    height: '55%',
+    backgroundColor: theme.color.text.brand,
+  },
 }));

package/.turbo/turbo-lint.log

@@ -1,72 +0,0 @@
-
-> @utilitywarehouse/hearth-react-native@0.22.0 lint /home/runner/work/hearth/hearth/packages/react-native
-> TIMING=1 eslint .
-
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
-  6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
-  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
-  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
-  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
-  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
-  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
-  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
-  52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
-  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
-   73:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  269:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
-  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
-  17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
-   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
-   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
-  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
-  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
-   14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-  106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/VerificationInput/VerificationInput.tsx
-  58:7  warning  React Hook useImperativeHandle has a missing dependency: 'inputRefs'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-✖ 25 problems (0 errors, 25 warnings)
-
-Rule                                              | Time (ms) | Relative
-:-------------------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars                 |  1687.263 |    65.5%
-react-hooks/rules-of-hooks                        |    78.867 |     3.1%
-react-hooks/exhaustive-deps                       |    78.504 |     3.0%
-no-global-assign                                  |    75.145 |     2.9%
-no-unexpected-multiline                           |    55.153 |     2.1%
-no-loss-of-precision                              |    46.457 |     1.8%
-@typescript-eslint/ban-ts-comment                 |    45.439 |     1.8%
-no-misleading-character-class                     |    37.162 |     1.4%
-@typescript-eslint/triple-slash-reference         |    28.294 |     1.1%
-@typescript-eslint/no-unnecessary-type-constraint |    20.347 |     0.8%