Refactor IconButton and move code duplication

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.92.0",
+  "version": "1.93.0",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",

src/components/BottomSheetWithSearchInput.tsx

@@ -14,7 +14,7 @@ import { useTheme as useNavigationTheme } from '@react-navigation/native'
 import { Easing } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
-import { Icon } from './Icon'
+import IconButton from './IconButton'
 import ItemSeparator from './ItemSeparator'
 import ListItem from './ListItem'
 import useBottomSheetBackHandler from '../hooks/useBottomSheetBackHandler'
@@ -121,19 +121,18 @@ const BottomSheetWithSearchInput = ({
             onChangeText: onChange,
           }}
           rightIcon={
-            <TouchableOpacity
-              style={styles.iconButtonContainer}
+            <IconButton
+              Touchable={TouchableOpacity}
+              containerStyle={styles.iconButtonContainer}
               onPress={onClear}
               testID="clearButton"
-              activeOpacity={0.5}
-            >
-              <Icon
-                name="circle-xmark"
-                style="solid"
-                color={theme.color.icon.system.subtler}
-                size={theme.icon.size.s}
-              />
-            </TouchableOpacity>
+              icon={{
+                name: 'circle-xmark',
+                style: 'solid',
+                color: theme.color.icon.system.subtler,
+                size: theme.icon.size.s,
+              }}
+            />
           }
         />
         <SectionHeader title={sectionTitle} />

src/components/IconButton.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native'
+import React, { ComponentType } from 'react'
+import { StyleProp, TouchableOpacity, TouchableOpacityProps, ViewStyle } from 'react-native'
 
 import { Icon, IconProps } from './Icon'
 import { useTheme } from '../theme/ThemeProvider'
@@ -11,12 +11,21 @@ type Props = {
   icon: IconProps
   accessibilityLabel?: string
   testID?: string
+  Touchable?: ComponentType<TouchableOpacityProps>
 }
 
-const IconButton = ({ containerStyle, disabled, onPress, icon, accessibilityLabel, testID = 'pressable' }: Props) => {
+const IconButton = ({
+  containerStyle,
+  disabled,
+  onPress,
+  icon,
+  accessibilityLabel,
+  testID = 'pressable',
+  Touchable = TouchableOpacity,
+}: Props) => {
   const theme = useTheme()
   return (
-    <TouchableOpacity
+    <Touchable
       testID={testID}
       accessibilityLabel={accessibilityLabel}
       style={containerStyle}
@@ -25,7 +34,7 @@ const IconButton = ({ containerStyle, disabled, onPress, icon, accessibilityLabe
       activeOpacity={0.5}
     >
       <Icon size={theme.icon.size.l} {...icon} />
-    </TouchableOpacity>
+    </Touchable>
   )
 }
 

src/components/__tests__/__snapshots__/BottomSheetWithSearchInput.test.tsx.snap

@@ -49,23 +49,24 @@ exports[`BottomSheetWithSearchInput Rendering Initial state 1`] = `
             }
           }
           rightIcon={
-            <TouchableOpacity
-              activeOpacity={0.5}
-              onPress={[Function]}
-              style={
+            <IconButton
+              Touchable={[Function]}
+              containerStyle={
                 {
                   "paddingRight": 16,
                 }
               }
+              icon={
+                {
+                  "color": "#939393",
+                  "name": "circle-xmark",
+                  "size": 12,
+                  "style": "solid",
+                }
+              }
+              onPress={[Function]}
               testID="clearButton"
-            >
-              <Icon
-                color="#939393"
-                name="circle-xmark"
-                size={12}
-                style="solid"
-              />
-            </TouchableOpacity>
+            />
           }
           textInputComponent={[Function]}
         />
@@ -652,23 +653,24 @@ exports[`BottomSheetWithSearchInput Rendering With selected item 1`] = `
             }
           }
           rightIcon={
-            <TouchableOpacity
-              activeOpacity={0.5}
-              onPress={[Function]}
-              style={
+            <IconButton
+              Touchable={[Function]}
+              containerStyle={
                 {
                   "paddingRight": 16,
                 }
               }
+              icon={
+                {
+                  "color": "#939393",
+                  "name": "circle-xmark",
+                  "size": 12,
+                  "style": "solid",
+                }
+              }
+              onPress={[Function]}
               testID="clearButton"
-            >
-              <Icon
-                color="#939393"
-                name="circle-xmark"
-                size={12}
-                style="solid"
-              />
-            </TouchableOpacity>
+            />
           }
           textInputComponent={[Function]}
         />