{"id":4357,"url":"https://github.com/vikrantnegi/react-native-animated-loader","last_synced_at":"2025-04-04T07:07:31.670Z","repository":{"id":46660307,"uuid":"169555543","full_name":"vikrantnegi/react-native-animated-loader","owner":"vikrantnegi","description":":lollipop: A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animations.","archived":false,"fork":false,"pushed_at":"2024-01-25T15:05:25.000Z","size":1286,"stargazers_count":207,"open_issues_count":11,"forks_count":100,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T06:08:08.036Z","etag":null,"topics":["hacktoberfest","loaders","lottie","lottie-animation","lottie-animation-spinners","react-native","react-native-loader","spinners"],"latest_commit_sha":null,"homepage":"https://medium.com/better-programming/how-to-create-a-beautifully-animated-loader-in-react-native-21da37a8f6b0","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vikrantnegi.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"vikrantnegi","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-02-07T10:39:10.000Z","updated_at":"2025-02-09T07:12:53.000Z","dependencies_parsed_at":"2024-01-08T01:02:54.931Z","dependency_job_id":"791f68c2-6141-4775-b222-93b8f3832ffe","html_url":"https://github.com/vikrantnegi/react-native-animated-loader","commit_stats":{"total_commits":37,"total_committers":8,"mean_commits":4.625,"dds":"0.29729729729729726","last_synced_commit":"3098f0faff593cfe11d5938f9be538782414e3cd"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantnegi%2Freact-native-animated-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantnegi%2Freact-native-animated-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantnegi%2Freact-native-animated-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantnegi%2Freact-native-animated-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikrantnegi","download_url":"https://codeload.github.com/vikrantnegi/react-native-animated-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247014521,"owners_count":20869376,"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":["hacktoberfest","loaders","lottie","lottie-animation","lottie-animation-spinners","react-native","react-native-loader","spinners"],"created_at":"2024-01-05T20:17:09.388Z","updated_at":"2025-04-04T07:07:31.656Z","avatar_url":"https://github.com/vikrantnegi.png","language":"JavaScript","readme":"# React Native Animated Loader \n\nRead more about this package [here](https://www.freecodecamp.org/news/how-to-create-a-beautifully-animated-loader-in-react-native-21da37a8f6b0/).\n\n[![downloads](https://img.shields.io/npm/dt/react-native-animated-loader.svg)](http://npm-stats.com/~packages/react-native-animated-loader)\n[![npm-version](https://img.shields.io/npm/v/react-native-animated-loader.svg)](https://www.npmjs.com/package/react-native-animated-loader)\n[![github-tag](https://img.shields.io/github/tag/vikrantnegi/react-native-animated-loader.svg?maxAge=1800)](https://github.com/vikrantnegi/react-native-animated-loader/)\n[![license](https://img.shields.io/github/license/vikrantnegi/react-native-animated-loader.svg?maxAge=1800)](https://yarnpkg.com/en/package/react-native-animated-loader)\n\nA React Native Loader Component which uses Airbnb's [Lottie](https://github.com/react-native-community/lottie-react-native) for beautiful loader animations.\n\n\u003cimg src=\"./assets/loader1.gif\" width=\"200\"\u003e \u0026nbsp;\u0026nbsp;\n\u003cimg src=\"./assets/loader2.gif\" width=\"200\"\u003e \u0026nbsp;\u0026nbsp;\n\u003cimg src=\"./assets/loader3.gif\" width=\"200\"\u003e\n\n\n## Prerequisites\n### Using React Native CLI\nThis library uses [lottie-react-native](https://github.com/react-native-community/lottie-react-native) to render loader animations. Therefore this library need to be installed and linked to your project before installing this package.\n\nFollow the official instruction and linking guide [here](https://github.com/react-native-community/lottie-react-native/blob/master/README.md#getting-started).\n\n### Using Expo\nNo need to do anything specific, just install the package itself. Expo already has Lottie library API available and it will take care of the rest.\n\n## Install\n\n```\nyarn add react-native-animated-loader\n```\nor\n```\nnpm install react-native-animated-loader --save\n```\n\n## Usage\n### Class Component\n```jsx\nimport React from 'react';\nimport { StyleSheet,Text } from 'react-native';\nimport AnimatedLoader from \"react-native-animated-loader\";\n\nexport default class Loader extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { visible: false };\n  }\n\n  componentDidMount() {\n    setInterval(() =\u003e {\n      this.setState({\n        visible: !this.state.visible\n      });\n    }, 2000);\n  }\n\n  render() {\n    const { visible } = this.state;\n    return (\n      \u003cAnimatedLoader\n        visible={visible}\n        overlayColor=\"rgba(255,255,255,0.75)\"\n        source={require(\"./loader.json\")}\n        animationStyle={styles.lottie}\n        speed={1}\n      \u003e\n        \u003cText\u003eDoing something...\u003c/Text\u003e\n      \u003c/AnimatedLoader\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  lottie: {\n    width: 100,\n    height: 100\n  }\n});\n```\n### Functional Component\n\n```jsx\nimport React, {useState, useEffect} from 'react';\nimport {StyleSheet, Text} from 'react-native';\nimport AnimatedLoader from 'react-native-animated-loader';\nexport default function App() {\n  const [visible, setVisible] = useState(false);\n  useEffect(() =\u003e {\n    setInterval(() =\u003e {\n      setVisible(!visible);\n    }, 2000);\n  }, []);\n\n  return (\n    \u003cAnimatedLoader\n      visible={visible}\n      overlayColor=\"rgba(255,255,255,0.75)\"\n      animationStyle={styles.lottie}\n      speed={1}\u003e\n      \u003cText\u003eDoing something...\u003c/Text\u003e\n    \u003c/AnimatedLoader\u003e\n  );\n}\nconst styles = StyleSheet.create({\n  lottie: {\n    width: 100,\n    height: 100,\n  },\n});\n\n```\n\n### Usage in Expo\n[Example for expo projects](https://snack.expo.dev/tTSGEcb5J)\n\n### Loader files\n\nYou can find free lottie files for your loaders [here](https://lottiefiles.com/search?q=loader).\n\n## Props\n\n| Prop | Description | Default |\n|---|---|---|\n|**`source`**| The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a `uri` property, or it can be an actual JS object of an animation, obtained (for example) with something like `require('../path/to/animation.json')`. | [Lottie Object](https://lottiefiles.com/1531-loader) |\n|**`visible`**| Controls the visibility of the loader. | `false` |\n|**`overlayColor`**| Changes the color of the overlay. | `rgba(255,255,255,0.75)` |\n|**`animationStyle`**| The style to be applied to the Lottie. | - |\n|**`animationType`**| Changes animation on show and hide loader's view. | `none` |\n|**`speed`**| The speed the animation will progress. | `1` |\n|**`loop`**| A boolean flag indicating whether or not the animation should loop. | `true` |\n\n## Work in Progress\n- [x] Add expo example\n- [ ] Add ability to render text with animations\n- [ ] Add test cases\n\n## License\nLicensed under the [MIT](https://github.com/vikrantnegi/react-native-animated-loader/blob/master/LICENSE).\n\n## Donation\nIf this project helped you reduce time to develop, please consider buying me a cup of coffee :)\n\n\u003ca href=\"https://www.buymeacoffee.com/vikrantnegi\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e\n\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/E1E6Z0JL)\n","funding_links":["https://ko-fi.com/vikrantnegi","https://www.buymeacoffee.com/vikrantnegi","https://ko-fi.com/E1E6Z0JL"],"categories":["Components"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikrantnegi%2Freact-native-animated-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikrantnegi%2Freact-native-animated-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikrantnegi%2Freact-native-animated-loader/lists"}