react-native-animicons

React Native Animated Icons

A maintained fork of the simplest icon component for React Native (react-native-animated-icons S/O @garretmac for laying the groundwork).

(I Need to do some clean up on this readme but it works, give it a try!)

All your vector icon needs in one place A light wrapper around react-native-vector-icons

Getting Started

Import in to your project

import Icon from "react-native-animicons"

Basic Usage

this will not trigger animation. for that keep reading.

<Icon
   name="ios-star"
   iconFamily="Ionicons"
   size={30}/>

Animation

This dummy component monitors changes in props How to trigger animation

name={o.isActive?"heart":"heart-outline"}

or if you dont what to change your icon use

 name={"heart"} isActive={o.isActive}

Color

pass prop color

color="rgba(0,0,0,0.5)"

or interpolate a change

let red="rgba(245,60,60,0.8)"
let light="rgba(255,255,255,0.5)"

...

colorInputRange={[0, 0.56, 1]}
colorOutputRange={[
      light,
      "pink",
      o.isActive?red:light,
]}

All Props

Parameters	Default	Description
animateAllActive
name
isActive
fontSize	40	fontSize
color	rgba(0,0,0,0.5)	color
iconFamily	MaterialCommunityIcons	iconFamily. optoins:Entypo, EvilIcons, FontAwesome, Foundation, Ionicons, MaterialIcons, MaterialCommunityIcons, Octicons, Zocial, SimpleLineIcons
animation	{toValue: 1,duration: 500}	animation
scaleInputRange	[0, 0.6, 1]
scaleOutputRange	[1, 1.5, 1]

Example

this.state = {
  hearts:[{isActive:false,"id":1},{isActive:false,"id":2},{isActive:false,"id":3},{isActive:false,"id":4}],
  tweets:[{isActive:false,"id":1},{isActive:false,"id":2},{isActive:false,"id":3},{isActive:false,"id":4}]
};
....
onPressHearts = (item) => {
  // console.log(" onPress:item ",item);
  if(!item)return
  // item.isActive!=item.isActive
let {hearts} = this.state
  let updatedlist=hearts.map(o => o.id === item.id
                        ?{ ...o, isActive: o.isActive?false:true}
                      :o)
  this.setState({
    triggerAnimationId:hearts.find(x => x.id === item.id).id,
    hearts: updatedlist})

}

.....
let red="rgba(245,60,60,0.8)"
let light="rgba(255,255,255,0.5)"

<View style={{marginBottom:100,alignItems: "center",justifyContent: "center",height:50,flexDirection:"column", }}>
  <Text style={{textAlignVertical: "center", textAlign: "center",fontSize:20 ,margin:10}}>
  Animate on Icon Name Change
  </Text>
  <View style={{height:70,alignItems: "center",justifyContent: "center",flexDirection:"row",}}>

        {hearts.map((o,i) => {

          return   (<TouchableOpacity style={{height:50,}} key={i} onPress={()=>this.onPressHearts(o)}>
            <Icon
              item={o}
              name={o.isActive?"heart":"heart-outline"}
              // name={"heart"}
              isActive={o.isActive}
              colorOutputRange={[
              light,
              "pink",
               o.isActive?red:light,
            ]}
            // animateAllActive
            colorInputRange={[0, 0.56, 1]}
          />
         </TouchableOpacity>)

        })}
</View>
</View>