@flexnative/icons

A flexible and animated icon component library for React Native, built with react-native-reanimated and integrated with @flexnative/icons.

Installation

npm install @flexnative/icons
# or
yarn add @flexnative/icons

This package depends on react-native-reanimated. Make sure it is installed and configured in your project.

Setup

Wrap your application (or the component tree where you intend to use icons) with the IconProvider. This allows you to map icon names to your actual icon assets (SVGs, font characters, or images).

import React from 'react';
import { IconProvider } from '@flexnative/icons';
import { View } from 'react-native';

// Define your icon mapping
const myIcons = {
  home: '🏠', // Can be strings, SVG components, etc.
  settings: '⚙️',
  heart: '❤️',
  loading: '⏳',
  alert: '⚠️',
};

export default function App() {
  return (
    <IconProvider icons={myIcons}>
      <View style={{ flex: 1 }}>
        {/* Your app content */}
      </View>
    </IconProvider>
  );
}

Usage

Basic Icon

Use the Icon component to display a static icon. It resolves styles (color, size) from the @flexnative/icons.

import { Icon } from '@flexnative/icons';

<Icon name="home" size="md" color="primary" />

Animated Icon

Use the AnimatedIcon component to display icons with built-in animations. You can switch animations using the animation prop.

import { AnimatedIcon } from '@flexnative/icons';

<AnimatedIcon 
  name="heart" 
  animation="heartbeat" 
  size="xl" 
  color="error" 
  duration={1200} 
/>

Specific Animated Components

You can also import specific animated components directly for better type safety or specific props.

import { 
  BounceIcon, 
  FadeIcon, 
  GlitchIcon, 
  HeartbeatIcon, 
  PulseIcon, 
  ShakeIcon, 
  Spinner, 
  WiggleIcon 
} from '@flexnative/icons';

<Spinner name="loading" />
<HeartbeatIcon name="heart" pulseColor="#ff0000" />
<GlitchIcon name="alert" amplitude={6} />

Available Animations

| Animation | Component | Description | |---|---|---| | bounce | BounceIcon | Scales the icon up and down continuously. | | fade | FadeIcon | Pulses the opacity of the icon. | | glitch | GlitchIcon | Randomly shifts the icon position and opacity to simulate a glitch effect. | | heartbeat | HeartbeatIcon | Mimics a cardiac rhythm (lub-dub) using scale. | | pulse | PulseIcon | Animates the backgroundColor opacity (breathing effect). | | shake | ShakeIcon | Rotates the icon back and forth quickly. | | spin | Spinner | Rotates the icon 360 degrees infinitely. | | wiggle | WiggleIcon | Rotates the icon back and forth gently. |

Props

Common props for animated icons:

• duration (number): The duration of one animation cycle in milliseconds.
• delay (number): Delay before the animation starts in milliseconds.
• pulseColor (string): (HeartbeatIcon only) The color to interpolate to during the beat.
• amplitude (number): (GlitchIcon only) The intensity of the glitch displacement.