From e23556a2f4a4bb865756af121cbd60c339c421e6 Mon Sep 17 00:00:00 2001
From: Sjaak Schilperoort <sjaak@xs4all.nl>
Date: Mon, 10 Aug 2026 09:37:31 +0200
Subject: [PATCH] Refactor IconButton and move code duplication

---
 package.json                                  |  2 +-
 src/components/BottomSheetWithSearchInput.tsx | 23 ++++-----
 src/components/IconButton.tsx                 | 19 +++++--
 .../BottomSheetWithSearchInput.test.tsx.snap  | 50 ++++++++++---------
 4 files changed, 52 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 0fcaef8..cba28f6 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/BottomSheetWithSearchInput.tsx b/src/components/BottomSheetWithSearchInput.tsx
index 074b83a..6023b1d 100644
--- a/src/components/BottomSheetWithSearchInput.tsx
+++ b/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} />
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index d17fff4..8b96084 100644
--- a/src/components/IconButton.tsx
+++ b/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>
   )
 }
 
diff --git a/src/components/__tests__/__snapshots__/BottomSheetWithSearchInput.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomSheetWithSearchInput.test.tsx.snap
index 426fb66..8d0eea8 100644
--- a/src/components/__tests__/__snapshots__/BottomSheetWithSearchInput.test.tsx.snap
+++ b/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]}
         />