{"id":15801580,"url":"https://github.com/garrettmac/react-native-animated-icons","last_synced_at":"2025-04-01T16:30:49.512Z","repository":{"id":53144573,"uuid":"98926387","full_name":"garrettmac/react-native-animated-icons","owner":"garrettmac","description":"A light wrapper around 'react-native-vector-icons' to animateIcons","archived":false,"fork":false,"pushed_at":"2021-04-04T18:05:21.000Z","size":666,"stargazers_count":8,"open_issues_count":4,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-06T01:23:18.822Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/garrettmac.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-31T20:20:20.000Z","updated_at":"2022-01-12T09:02:20.000Z","dependencies_parsed_at":"2022-09-15T17:40:29.269Z","dependency_job_id":null,"html_url":"https://github.com/garrettmac/react-native-animated-icons","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-animated-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-animated-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-animated-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-animated-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/garrettmac","download_url":"https://codeload.github.com/garrettmac/react-native-animated-icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246620371,"owners_count":20806759,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-05T01:23:13.907Z","updated_at":"2025-04-01T16:30:49.035Z","avatar_url":"https://github.com/garrettmac.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Animated Icons\n\u003c!-- \u003cp align=\"center\"\u003e\n  \u003cimg alt=\"react-native-animated-icons\" src=\"https://cdn.rawgit.com/garrettmac/images/a8e4b847/projects/react-native-animated-icons/react-native-animated-icons.jpg\" width=\"308\"\u003e\n\n\u003c/p\u003e --\u003e\n\n\u003cp align=\"center\"\u003e\n  The simplest icon component for React Native.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://standardjs.com/\"\u003e\u003cimg alt=\"JavaScript Style Guide\" src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/react-native-animated-icons\"\u003e\u003cimg alt=\"npm version\" src=\"http://img.shields.io/npm/v/react-native-animated-icons.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/react-native-animated-icons\"\u003e\u003cimg alt=\"npm version\" src=\"http://img.shields.io/npm/dm/react-native-animated-icons.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/garrettmac/react-native-animated-icons/pulls?q=is%3Apr+is%3Aclosed\"\u003e\u003cimg alt=\"PR Stats\" src=\"https://img.shields.io/issuestats/i/github/garrettmac/react-native-animated-icons.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://gitter.im/garrettmac/react-native-animated-icons?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge\"\u003e\u003cimg alt=\"Join the chat\" src=\"https://badges.gitter.im/garrettmac/react-native-animated-icons.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n\n\n\n\n(I Need to do some clean up on this readme but it works, give it a try!)\n\nAll your vector icon needs in one place\nA light wrapper around `react-native-vector-icons`\n\n### Getting Started\n\n Import in to  your project\n```jsx\nimport Icon from \"react-native-animated-icons\"\n```\n### Basic Usage\nthis will not trigger animation. for that keep reading.\n```jsx\n\u003cIcon\n   name=\"ios-star\"\n   iconFamily=\"Ionicons\"\n   size={30}/\u003e\n```\n\n### Animation\nThis dummy component monitors changes in props\nHow to trigger animation\n```jsx\nname={o.isActive?\"heart\":\"heart-outline\"}\n```\nor if you dont what to change your icon use\n```jsx\n name={\"heart\"} isActive={o.isActive}\n```\n\n\n### Color\npass prop `color`\n```jsx\ncolor=\"rgba(0,0,0,0.5)\"\n```\nor interpolate a change\n```jsx\nlet red=\"rgba(245,60,60,0.8)\"\nlet light=\"rgba(255,255,255,0.5)\"\n\n...\n\ncolorInputRange={[0, 0.56, 1]}\ncolorOutputRange={[\n      light,\n      \"pink\",\n      o.isActive?red:light,\n]}\n\n\n```\n\n\n\n### All Props\n\n|Parameters|Default|Description|\n|------------|----------------------------|------------------------------------|\n|animateAllActive|   | |\n|name|  | |\n|isActive|  | |\n| fontSize|  `40` |fontSize|\n| color|  `rgba(0,0,0,0.5)` |color|\n| iconFamily|  `MaterialCommunityIcons` |iconFamily. optoins:`Entypo`, `EvilIcons`, `FontAwesome`, `Foundation`, `Ionicons`, `MaterialIcons`, `MaterialCommunityIcons`, `Octicons`, `Zocial`, `SimpleLineIcons` |\n|animation| `{toValue: 1,duration: 500}`|animation|\n|scaleInputRange|`[0, 0.6, 1]`|    |\n|scaleOutputRange|`[1, 1.5, 1]`| ||\n\n\n### Example\n\n```jsx\n\nthis.state = {\n  hearts:[{isActive:false,\"id\":1},{isActive:false,\"id\":2},{isActive:false,\"id\":3},{isActive:false,\"id\":4}],\n  tweets:[{isActive:false,\"id\":1},{isActive:false,\"id\":2},{isActive:false,\"id\":3},{isActive:false,\"id\":4}]\n};\n....\nonPressHearts = (item) =\u003e {\n  // console.log(\" onPress:item \",item);\n  if(!item)return\n  // item.isActive!=item.isActive\nlet {hearts} = this.state\n  let updatedlist=hearts.map(o =\u003e o.id === item.id\n                        ?{ ...o, isActive: o.isActive?false:true}\n                      :o)\n  this.setState({\n    triggerAnimationId:hearts.find(x =\u003e x.id === item.id).id,\n    hearts: updatedlist})\n\n}\n\n.....\nlet red=\"rgba(245,60,60,0.8)\"\nlet light=\"rgba(255,255,255,0.5)\"\n\n\u003cView style={{marginBottom:100,alignItems: \"center\",justifyContent: \"center\",height:50,flexDirection:\"column\", }}\u003e\n  \u003cText style={{textAlignVertical: \"center\", textAlign: \"center\",fontSize:20 ,margin:10}}\u003e\n  Animate on Icon Name Change\n  \u003c/Text\u003e\n  \u003cView style={{height:70,alignItems: \"center\",justifyContent: \"center\",flexDirection:\"row\",}}\u003e\n\n        {hearts.map((o,i) =\u003e {\n\n          return   (\u003cTouchableOpacity style={{height:50,}} key={i} onPress={()=\u003ethis.onPressHearts(o)}\u003e\n            \u003cIcon\n              item={o}\n              name={o.isActive?\"heart\":\"heart-outline\"}\n              // name={\"heart\"}\n              isActive={o.isActive}\n              colorOutputRange={[\n              light,\n              \"pink\",\n               o.isActive?red:light,\n            ]}\n            // animateAllActive\n            colorInputRange={[0, 0.56, 1]}\n          /\u003e\n         \u003c/TouchableOpacity\u003e)\n\n        })}\n\u003c/View\u003e\n\u003c/View\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarrettmac%2Freact-native-animated-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgarrettmac%2Freact-native-animated-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarrettmac%2Freact-native-animated-icons/lists"}