Icon Component

A versatile icon component for React Native applications that provides consistent icon rendering with touch interactions and customizable styling options.

Features

🎨 Flexible Styling - Customizable size, color, and styling options
👆 Touch Interactions - Built-in press and long press support
🎯 Hit Area - Configurable touch target area for better usability
🖼️ Image Support - Works with any React Native image source
♿ Accessibility Ready - Built-in accessibility features
🔧 TypeScript Support - Full type safety and IntelliSense

Installation

💻Bash

npm install rn-base-component
# or
yarn add rn-base-component

Basic Usage

⚛️TSX

import React from 'react'
import { Icon } from 'rn-base-component'

export default function App() {
  return 
}

Interactive Icon

⚛️TSX

 console.log('Heart icon pressed!')}
/>

Advanced Usage

Custom Size and Color

⚛️TSX

With Touch Feedback

⚛️TSX

Custom Hit Area

⚛️TSX

Using with Vector Icons

⚛️TSX

import MaterialIcons from 'react-native-vector-icons/MaterialIcons'

}
  onPress={handleHome}
/>

API Reference

IconProps

Prop	Type	Default	Description
`source`	`ImageSourcePropType`	Required*	Image source for the icon
`component`	`React.ReactNode`	Required*	Custom component (alternative to source)
`size`	`number`	`24`	Size of the icon
`tintColor`	`string`	`undefined`	Color tint for the icon
`onPress`	`() => void`	`undefined`	Press handler
`onLongPress`	`() => void`	`undefined`	Long press handler
`hitSlop`	`Insets`	`undefined`	Hit area extension
`hitAreaSize`	`number`	`undefined`	Square hit area size
`disabled`	`boolean`	`false`	Disable interactions
`style`	`StyleProp<ViewStyle>`	`undefined`	Custom container style
`imageStyle`	`StyleProp<ImageStyle>`	`undefined`	Custom image style
`testID`	`string`	`undefined`	Test identifier

Source vs Component

Use either source for image-based icons or component for custom React components (like vector icons). Both props are mutually exclusive.

Icon Collections

⚛️TSX

import React from 'react'
import { View } from 'react-native'
import { Icon } from 'rn-base-component'

export default function NavigationBar() {
  return (
    
       navigate('Home')}
      />
      
       navigate('Search')}
      />
      
       navigate('Profile')}
      />
      
       navigate('Settings')}
      />
    
  )
}

const styles = StyleSheet.create({
  navigationBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 12,
    backgroundColor: '#ffffff',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
  },
})

Action Icons

⚛️TSX

Status Icons

⚛️TSX


  
  Completed



  
  Warning

Integration with Vector Icon Libraries

React Native Vector Icons

⚛️TSX

import React from 'react'
import { Icon } from 'rn-base-component'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import Ionicons from 'react-native-vector-icons/Ionicons'

export default function VectorIconsExample() {
  return (
    
      }
        onPress={handleFavorite}
      />
      
      }
        onPress={handleSettings}
      />
    
  )
}

Custom SVG Icons

⚛️TSX

import React from 'react'
import { Icon } from 'rn-base-component'
import Svg, { Path } from 'react-native-svg'

const CustomSVGIcon = ({ size = 24, color = '#000' }) => (
  
)

export default function SVGIconExample() {
  return (
    }
      onPress={handleSecuritySettings}
    />
  )
}

Common Use Cases

Button with Icon

⚛️TSX

import React from 'react'
import { TouchableOpacity, Text, View } from 'react-native'
import { Icon } from 'rn-base-component'

export default function IconButton({ onPress, title, iconSource }) {
  return (
    
      
      {title}
    
  )
}

const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#007AFF',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonIcon: {
    marginRight: 8,
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
  },
})

Icon with Badge

⚛️TSX


  
  {unreadCount > 0 && (
    
      {unreadCount}
    
  )}


const styles = StyleSheet.create({
  iconContainer: {
    position: 'relative',
  },
  badge: {
    position: 'absolute',
    top: -8,
    right: -8,
    backgroundColor: '#FF6B6B',
    borderRadius: 12,
    minWidth: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  badgeText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: 'bold',
  },
})

Loading States

⚛️TSX

import React, { useState } from 'react'
import { ActivityIndicator } from 'react-native'
import { Icon } from 'rn-base-component'

export default function LoadingIcon({ isLoading, onPress }) {
  return (
    
      {isLoading ? (
        
      ) : (
        
      )}
    
  )
}

Best Practices

Consistent Sizing - Use standardized icon sizes (16, 20, 24, 32px)
Adequate Touch Targets - Ensure minimum 44px touch area for interactive icons
Meaningful Icons - Use universally recognized icons for common actions
Color Consistency - Maintain consistent color scheme across icon usage
Accessibility - Provide proper accessibility labels for interactive icons
Performance - Optimize icon assets for different screen densities
Vector Icons - Prefer vector icons for scalability and crisp rendering

Touch Targets

Always ensure interactive icons have adequate touch targets (minimum 44px) for better usability, especially on mobile devices.

Asset Optimization

For image-based icons, provide multiple resolutions (@1x, @2x, @3x) to ensure crisp rendering on all devices.