@utilitywarehouse/hearth-react-native 0.27.1 → 0.27.2-testid-fix-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.27.1",
+  "version": "0.27.2-testid-fix-1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,10 +56,10 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.3",
+    "@utilitywarehouse/hearth-tokens": "^0.2.4",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0"
   },
   "peerDependencies": {
@@ -85,6 +85,7 @@
     "figma:create": "figma connect create",
     "figma:publish": "figma connect publish",
     "test": "echo \"Error: no test specified\" && exit 1",
+    "test:storybook": "vitest run --project storybook",
     "dev": "npm run copyChangelog && storybook dev -p 6006",
     "dev:docs": "storybook dev -p 6002 --no-open --docs",
     "build:storybook": "npm run copyChangelog && storybook build",

package/src/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
 import { AddSmallIcon, ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Platform } from 'react-native';
@@ -92,7 +92,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-  render: ({ icon: _icon, children: _, ...args }) => {
+  render: ({ icon: _icon, children: _, ...args }: StoryObj<typeof meta.args>) => {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
     return <Button {...args} icon={icon} />;
@@ -104,7 +104,7 @@ export const Variants: Story = {
     controls: { exclude: ['variant'] },
   },
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-  render: ({ icon: _icon, children: _, ...args }) => {
+  render: ({ icon: _icon, children: _, ...args }: StoryObj<typeof meta.args>) => {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
     return (
@@ -123,11 +123,9 @@ export const Variants: Story = {
           {args.colorScheme !== 'highlight' && (
             <>
               <VariantTitle title="Outline" invert={args.inverted}>
-                {/* @ts-expect-error - story loop types don't match */}
                 <Button {...args} variant="outline" icon={icon} />
               </VariantTitle>
               <VariantTitle title="Ghost" invert={args.inverted}>
-                {/* @ts-expect-error - story loop types don't match */}
                 <Button {...args} variant="ghost" icon={icon} />
               </VariantTitle>
             </>
@@ -138,6 +136,44 @@ export const Variants: Story = {
   },
 };
 
+export const PaddingNone: Story = {
+  parameters: {
+    controls: {
+      include: ['text', 'size', 'inverted', 'icon', 'iconPosition'],
+    },
+  },
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  render: ({ icon: _icon, children: _, ...args }: StoryObj<typeof meta.args>) => {
+    // @ts-expect-error - This is a playground
+    const icon = _icon === 'none' ? undefined : Icons[_icon];
+
+    return (
+      <Flex direction="column" spacing="lg">
+        <VariantTitle title="Default Padding" invert={args.inverted}>
+          <Flex direction="row" align="center" spacing="none">
+            <Box backgroundColor="brand" width="100" height="100" />
+            <Button
+              {...args}
+              colorScheme="functional"
+              variant="ghost"
+              icon={icon}
+              paddingNone={false}
+            />
+            <Box backgroundColor="brand" width="100" height="100" />
+          </Flex>
+        </VariantTitle>
+        <VariantTitle title="No Padding (paddingNone)" invert={args.inverted}>
+          <Flex direction="row" align="center" spacing="none">
+            <Box backgroundColor="brand" width="100" height="100" />
+            <Button {...args} colorScheme="functional" variant="ghost" icon={icon} paddingNone />
+            <Box backgroundColor="brand" width="100" height="100" />
+          </Flex>
+        </VariantTitle>
+      </Flex>
+    );
+  },
+};
+
 type ColorScheme = ButtonProps['colorScheme'];
 type Variant = ButtonProps['variant'];
 
@@ -145,7 +181,7 @@ export const KitchenSink: Story = {
   parameters: {
     controls: { include: ['text', 'size', 'inverted'] },
   },
-  render: ({ text, inverted, size }) => {
+  render: ({ text, inverted, size }: StoryObj<typeof meta.args>) => {
     const schemes: Array<ColorScheme> = ['highlight', 'destructive', 'affirmative', 'functional'];
     const variants: Array<Variant> = ['emphasis', 'solid', 'outline', 'ghost'];
     return (
@@ -174,7 +210,7 @@ export const KitchenSink: Story = {
               .map(variant => (
                 <Box key={variant} mb="100">
                   <Box mb="100">
-                    <DetailText size="lg" color={inverted ? 'warmWhite50' : 'grey1000'}>
+                    <DetailText size="lg" inverted={inverted}>
                       {scheme} - {variant}
                     </DetailText>
                   </Box>

package/src/components/Button/ButtonRoot.tsx

@@ -132,6 +132,14 @@ const styles = StyleSheet.create(theme => ({
           paddingHorizontal: 0,
         },
       },
+      {
+        size: 'md',
+        paddingNone: true,
+        variant: 'ghost',
+        styles: {
+          paddingHorizontal: 0,
+        },
+      },
       // Variant Color Schemes
       // Emphasis
       // Emphasis Yellow

package/src/components/Carousel/Carousel.tsx

@@ -328,13 +328,17 @@ const Carousel = ({
             onScrollEndDrag={handleWebScrollEnd}
             ref={scrollViewRef as any}
             scrollEnabled={!disabled}
-            pointerEvents={disabled ? 'none' : 'auto'}
             scrollEventThrottle={16}
             showsHorizontalScrollIndicator={false}
             snapToInterval={itemWidth || width}
             snapToAlignment={centered ? 'center' : 'start'}
             decelerationRate="fast"
-            style={[styles.webContainer, webContainerStyles, itemsStyle]}
+            style={[
+              styles.webContainer,
+              webContainerStyles,
+              itemsStyle,
+              { pointerEvents: disabled ? 'none' : 'auto' },
+            ]}
             contentContainerStyle={[styles.webContentContainer, webContentContainerStyle]}
             {...props}
           >

package/src/components/IconContainer/IconContainer.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { ComponentType } from 'react';
 import { IconContainer } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { Box } from '../Box';
@@ -53,7 +54,9 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = { render: args => <IconContainer {...args} /> };
+export const Playground: Story = {
+  render: (args: typeof meta.args) => <IconContainer {...args} />,
+};
 
 export const Subtle: Story = {
   parameters: {
@@ -86,7 +89,7 @@ export const KitchenSink: Story = {
   parameters: {
     controls: { exclude: ['radiusNone', 'variant', 'color', 'size'] },
   },
-  render: ({ icon }) => {
+  render: ({ icon }: { icon: ComponentType }) => {
     const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg'];
     const colors: Array<
       'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight'
@@ -95,33 +98,35 @@ export const KitchenSink: Story = {
       <Flex direction="column" spacing="lg">
         {sizes.map(size => (
           <Box key={size} gap="300">
-            <VariantTitle title={`Size: ${size.toUpperCase()} / Subtle`}> </VariantTitle>
-            <Flex direction="row" wrap="wrap" spacing="md">
-              {colors.map(color => (
-                <IconContainer
-                  key={`${size}-subtle-${color}`}
-                  icon={icon}
-                  size={size}
-                  variant="subtle"
-                  color={color}
-                />
-              ))}
-            </Flex>
-            <VariantTitle title={`Size: ${size.toUpperCase()} / Emphasis`}> </VariantTitle>
-            <Flex direction="row" wrap="wrap" spacing="md">
-              {colors.map(
-                color =>
-                  color !== 'highlight' && (
-                    <IconContainer
-                      key={`${size}-emphasis-${color}`}
-                      icon={icon}
-                      size={size}
-                      variant="emphasis"
-                      color={color}
-                    />
-                  )
-              )}
-            </Flex>
+            <VariantTitle title={`Size: ${size.toUpperCase()} / Subtle`}>
+              <Flex direction="row" wrap="wrap" spacing="md">
+                {colors.map(color => (
+                  <IconContainer
+                    key={`${size}-subtle-${color}`}
+                    icon={icon}
+                    size={size}
+                    variant="subtle"
+                    color={color}
+                  />
+                ))}
+              </Flex>
+            </VariantTitle>
+            <VariantTitle title={`Size: ${size.toUpperCase()} / Emphasis`}>
+              <Flex direction="row" wrap="wrap" spacing="md">
+                {colors.map(
+                  color =>
+                    color !== 'highlight' && (
+                      <IconContainer
+                        key={`${size}-emphasis-${color}`}
+                        icon={icon}
+                        size={size}
+                        variant="emphasis"
+                        color={color}
+                      />
+                    )
+                )}
+              </Flex>
+            </VariantTitle>
           </Box>
         ))}
       </Flex>

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.tsx

@@ -7,7 +7,14 @@ import {
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle } from 'react-native';
+import {
+  AccessibilityInfo,
+  Dimensions,
+  Platform,
+  ScrollView,
+  View,
+  findNodeHandle,
+} from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -292,13 +299,23 @@ const Modal = ({
             </View>
           ) : null}
           {inNavModal && (
-            <InNavModalContainer style={{ flex: stickyFooter ? 1 : 0 }}>
+            <InNavModalContainer
+              style={{
+                flex: stickyFooter ? 1 : 0,
+                ...(scrollable ? { marginHorizontal: -1 } : {}),
+              }}
+              {...(scrollable ? { contentContainerStyle: { paddingHorizontal: 1 } } : {})}
+            >
               {children}
-              {!stickyFooter ? <View style={styles.inNavModalFooterContainer}>{footer}</View> : null}
+              {!stickyFooter ? (
+                <View style={styles.inNavModalFooterContainer}>{footer}</View>
+              ) : null}
             </InNavModalContainer>
           )}
           {!inNavModal && children}
-          {((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null}
+          {((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons
+            ? footer
+            : null}
         </View>
       )}
     </>
@@ -322,7 +339,7 @@ const Modal = ({
 
   return inNavModal ? (
     <View
-      onLayout={(e) => {
+      onLayout={e => {
         setInNavModalHeight(e.nativeEvent.layout.height);
       }}
       style={{
@@ -338,9 +355,7 @@ const Modal = ({
       <Animated.View
         style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.inNavModalContent}>
-          {content}
-        </View>
+        <View style={styles.inNavModalContent}>{content}</View>
       </Animated.View>
     </View>
   ) : (
@@ -471,7 +486,7 @@ const styles = StyleSheet.create((theme, rt) => ({
     borderTopLeftRadius: theme.components.modal.borderRadius,
     borderTopRightRadius: theme.components.modal.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    paddingBottom: theme.components.modal.padding + rt.insets.bottom,
+    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
     variants: {
       background: {
         primary: {},
@@ -481,22 +496,22 @@ const styles = StyleSheet.create((theme, rt) => ({
       },
       fullscreen: {
         true: {
-          padding: theme.components.modal.padding,
+          padding: theme.components.bottomSheet.padding,
           paddingTop: rt.insets.top,
         },
         false: {
-          padding: theme.components.modal.padding,
-        }
-      }
+          padding: theme.components.bottomSheet.padding,
+        },
+      },
     },
   },
   inNavModalFooterContainer: {
-    paddingTop: theme.components.modal.padding,
+    paddingTop: theme.components.bottomSheet.padding,
   },
   androidContainer: {
     height: rt.insets.top + 18,
-    paddingLeft: theme.components.modal.padding,
-    paddingRight: theme.components.modal.padding,
+    paddingLeft: theme.components.bottomSheet.padding,
+    paddingRight: theme.components.bottomSheet.padding,
     justifyContent: 'flex-end',
   },
   pretendContent: {

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -206,7 +206,7 @@ const SegmentedControl = ({
         {...remainingProps}
       >
         {hasIndicator ? (
-          <Indicator pointerEvents="none" style={[styles.indicator, indicatorStyle]} />
+          <Indicator style={[styles.indicator, styles.pointerEventsNone, indicatorStyle]} />
         ) : null}
         {children}
       </View>
@@ -252,6 +252,9 @@ const styles = StyleSheet.create(theme => ({
     borderRadius: theme.components.segmentedControl.borderRadius,
     backgroundColor: theme.color.interactive.brand.surface.strong.default,
   },
+  pointerEventsNone: {
+    pointerEvents: 'none',
+  },
 }));
 
 export default SegmentedControl;

package/src/components/SegmentedControl/SegmentedControlOption.tsx

@@ -101,8 +101,7 @@ const SegmentedControlOptionRoot = ({
             {children}
           </BodyText>
           <AnimatedView
-            pointerEvents="none"
-            style={[styles.textLayer, regularLabelStyle]}
+            style={[styles.textLayer, styles.pointerEventsNone, regularLabelStyle]}
             accessible={false}
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
@@ -113,8 +112,7 @@ const SegmentedControlOptionRoot = ({
             </BodyText>
           </AnimatedView>
           <AnimatedView
-            pointerEvents="none"
-            style={[styles.textLayer, selectedLabelStyle]}
+            style={[styles.textLayer, styles.pointerEventsNone, selectedLabelStyle]}
             accessible={false}
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
@@ -206,6 +204,9 @@ const styles = StyleSheet.create(theme => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  pointerEventsNone: {
+    pointerEvents: 'none',
+  },
   icon: {
     variants: {
       selected: {

package/src/components/TimePicker/TimePickerWheel.tsx

@@ -46,8 +46,8 @@ const TimePickerWheel = ({ value, setValue = () => {}, items }: TimePickerWheelP
 
   const renderOverlay = useCallback(
     () => (
-      <View style={[styles.overlayContainer]} pointerEvents="none">
-        <View pointerEvents="none" style={[styles.fadeOverlay, { height: fadeHeight }]}>
+      <View style={[styles.overlayContainer, styles.pointerEventsNone]}>
+        <View style={[styles.fadeOverlay, styles.pointerEventsNone, { height: fadeHeight }]}>
           <Svg width="100%" height="100%" preserveAspectRatio="none">
             <Defs>
               <LinearGradient id={`${gradientId}-top`} x1="0" y1="0" x2="0" y2="1">
@@ -59,8 +59,12 @@ const TimePickerWheel = ({ value, setValue = () => {}, items }: TimePickerWheelP
           </Svg>
         </View>
         <View
-          pointerEvents="none"
-          style={[styles.fadeOverlay, styles.fadeOverlayBottom, { height: fadeHeight }]}
+          style={[
+            styles.fadeOverlay,
+            styles.fadeOverlayBottom,
+            styles.pointerEventsNone,
+            { height: fadeHeight },
+          ]}
         >
           <Svg width="100%" height="100%" preserveAspectRatio="none">
             <Defs>
@@ -149,6 +153,9 @@ const styles = StyleSheet.create(theme => ({
     top: undefined,
     bottom: 0,
   },
+  pointerEventsNone: {
+    pointerEvents: 'none',
+  },
 }));
 
 export default TimePickerWheel;

package/src/components/Toast/Toast.context.tsx

@@ -85,7 +85,7 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({
   return (
     <ToastContext.Provider value={{ addToast, removeToast }}>
       {children}
-      <View pointerEvents="box-none" style={styles.container as any}>
+      <View style={styles.container as any}>
         <View style={styles.stack as any}>
           {toasts.map(t => (
             <ToastItem

package/src/components/VerificationInput/VerificationInput.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { InfoMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useRef, useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { VerificationInput, type VerificationInputHandle } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { BodyText } from '../BodyText';
@@ -214,3 +215,35 @@ export const RefMethods: Story = {
     );
   },
 };
+
+export const FocusProgressionAfterEmptySlotSelection: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const [value, setValue] = useState('12');
+
+    return (
+      <Flex direction="column" spacing="sm" style={{ width: 400 }}>
+        <VerificationInput label="Verification Code" value={value} onChangeText={setValue} />
+      </Flex>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText('Verification Code') as HTMLInputElement;
+
+    input.focus();
+
+    input.setSelectionRange(4, 4);
+    input.dispatchEvent(new Event('select', { bubbles: true }));
+
+    await userEvent.keyboard('3');
+
+    await waitFor(() => {
+      expect(input.value).toBe('123');
+      expect(input.selectionStart).toBe(3);
+      expect(input.selectionEnd).toBe(3);
+    });
+  },
+};

package/src/components/VerificationInput/VerificationInput.tsx

@@ -1,8 +1,9 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Platform, TextInput, View } from 'react-native';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
+import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
 
 const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputProps>(
@@ -22,6 +23,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       secureTextEntry = false,
       autoFocus = false,
       style,
+      testID,
       ...props
     },
     ref
@@ -49,12 +51,15 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       }
     }, [length, value]);
 
-    const updateValue = (nextValue: string) => {
-      const trimmedValue = nextValue.slice(0, length);
-      latestValueRef.current = trimmedValue;
-      setDisplayValue(trimmedValue);
-      onChangeText?.(trimmedValue);
-    };
+    const updateValue = useCallback(
+      (nextValue: string) => {
+        const trimmedValue = nextValue.slice(0, length);
+        latestValueRef.current = trimmedValue;
+        setDisplayValue(trimmedValue);
+        onChangeText?.(trimmedValue);
+      },
+      [length, onChangeText]
+    );
 
     const setSelectionIndex = (index: number) => {
       const clampedIndex = Math.max(0, Math.min(index, length));
@@ -76,16 +81,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       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);
@@ -94,14 +89,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       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);
-      }
+      const nextIndex = getNextIndexFromValueChange({ prevValue, nextValue, length });
       updateValue(nextValue);
       if (isBulkInsert) {
         setCaretIndex(Math.min(nextLength, length));
@@ -171,7 +159,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
           }
         },
       }),
-      [length, onChangeText]
+      [length, updateValue]
     );
 
     const slots = Array.from({ length }, (_, index) => index);
@@ -252,7 +240,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
             maxLength={length}
             caretHidden
             style={styles.hiddenInput}
-            pointerEvents="none"
+            testID={testID}
           />
           {slots.map(index => {
             const char = displayValue[index] || '';
@@ -299,11 +287,12 @@ const styles = StyleSheet.create(theme => ({
     position: 'absolute',
     width: '100%',
     height: '100%',
+    pointerEvents: 'none',
     left: 0,
     top: 0,
     color: 'transparent',
     fontSize: 1,
-    opacity: 0.1,
+    opacity: 0.01,
   },
 }));