icon component

src/components/action.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View, Text, Colors} from 'react-native-ui-lib';
-import Ionicons from 'react-native-vector-icons/Ionicons';
 import {Bounceable} from 'rn-bounceable';
+import {Icon} from './icon';
 
 import {Row} from './row';
 
@@ -32,7 +32,7 @@ export const Action: React.FC<ActionProps> = ({
           <Row>
             {icon ? (
               <View marginR-s2>
-                <Ionicons name={icon} size={iconSize} color={Colors.primary} />
+                <Icon name={icon} size={iconSize} color={Colors.primary} />
               </View>
             ) : null}
 
@@ -52,7 +52,7 @@ export const Action: React.FC<ActionProps> = ({
 
             {rightIcon ? (
               <View marginL-s2>
-                <Ionicons name={rightIcon} size={iconSize} color={Colors.primary} />
+                <Icon name={rightIcon} size={iconSize} color={Colors.primary} />
               </View>
             ) : null}
           </Row>

src/components/icon.tsx

@@ -0,0 +1,41 @@
+import React, {useMemo} from 'react';
+import {View, Colors, ViewProps} from 'react-native-ui-lib';
+import {Ionicons} from '@expo/vector-icons';
+import {Bounceable} from 'rn-bounceable';
+
+type IconProps = {
+  name: string;
+  size?: number;
+  color?: string;
+  viewProps?: ViewProps;
+  onPress?: PureFunc;
+  bounceable?: boolean;
+};
+
+const ICON_SIZE = 26;
+
+export const IconComponent = Ionicons;
+export const Icon: React.FC<IconProps> = ({
+  name,
+  size = ICON_SIZE,
+  color = Colors.textColor,
+  viewProps,
+  onPress,
+  bounceable = true,
+}: IconProps) => {
+  const Icon = useMemo(
+    () => (
+      <View {...viewProps}>
+        <IconComponent name={name} size={size} color={color} />
+      </View>
+    ),
+    [viewProps, name, size, color],
+  );
+
+  if (!bounceable) return Icon;
+  return (
+    <Bounceable onPress={onPress} disabled={!!!onPress}>
+      {Icon}
+    </Bounceable>
+  );
+};