https://github.com/garrettmac/react-native-animated-icons
A light wrapper around 'react-native-vector-icons' to animateIcons
https://github.com/garrettmac/react-native-animated-icons
Last synced: 2 months ago
JSON representation
A light wrapper around 'react-native-vector-icons' to animateIcons
- Host: GitHub
- URL: https://github.com/garrettmac/react-native-animated-icons
- Owner: garrettmac
- Created: 2017-07-31T20:20:20.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-04T18:05:21.000Z (about 4 years ago)
- Last Synced: 2024-10-06T01:23:18.822Z (8 months ago)
- Language: JavaScript
- Size: 650 KB
- Stars: 8
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```jsx
import Icon from "react-native-animated-icons"
```
### Basic Usage
this will not trigger animation. for that keep reading.
```jsx
```
### Animation
This dummy component monitors changes in props
How to trigger animation
```jsx
name={o.isActive?"heart":"heart-outline"}
```
or if you dont what to change your icon use
```jsx
name={"heart"} isActive={o.isActive}
```
### Color
pass prop `color`
```jsx
color="rgba(0,0,0,0.5)"
```
or interpolate a change
```jsx
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
```jsx
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)"
Animate on Icon Name Change
{hearts.map((o,i) => {
return (this.onPressHearts(o)}>
)
})}
```