React Native Animated Icons
The simplest icon component for React Native.
(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-animated-icons"
Basic Usage
this will not trigger animation. for that keep reading.
<Icon ="ios-star" ="Ionicons" =/>
Animation
This dummy component monitors changes in props How to trigger animation
name=oisActive?"heart":"heart-outline"
or if you dont what to change your icon use
name="heart" isActive=oisActive
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 056 1colorOutputRange= light "pink" oisActive?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
thisstate = hearts:isActive:false"id":1isActive:false"id":2isActive:false"id":3isActive:false"id":4 tweets:isActive:false"id":1isActive:false"id":2isActive:false"id":3isActive:false"id":4;... { // console.log(" onPress:item ",item); if!itemreturn // item.isActive!=item.isActivelet hearts = thisstate let updatedlist=hearts this } ...let red="rgba(245,60,60,0.8)"let light="rgba(255,255,255,0.5)" <View => <Text => Animate on Icon Name Change </Text> <View => hearts</View></View>