{"id":22463560,"url":"https://github.com/joeyschroeder/react-native-simple-animations","last_synced_at":"2025-08-02T05:32:09.104Z","repository":{"id":32622116,"uuid":"137816387","full_name":"joeyschroeder/react-native-simple-animations","owner":"joeyschroeder","description":"🌈 A React Native component that adds simple entrance, exit, and attention-seeking animations to a child component.","archived":false,"fork":false,"pushed_at":"2023-02-09T04:32:40.000Z","size":3498,"stargazers_count":26,"open_issues_count":20,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-12T13:43:04.628Z","etag":null,"topics":["animated","animation","react","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-simple-animations","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joeyschroeder.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2018-06-18T23:17:19.000Z","updated_at":"2024-11-15T04:57:10.000Z","dependencies_parsed_at":"2024-06-19T01:30:23.003Z","dependency_job_id":"9f420b0d-f3a1-4685-98c3-f2285960257f","html_url":"https://github.com/joeyschroeder/react-native-simple-animations","commit_stats":{"total_commits":53,"total_committers":1,"mean_commits":53.0,"dds":0.0,"last_synced_commit":"1b444e3baa3904af947142e5b735f72c52fbda28"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/joeyschroeder/react-native-simple-animations","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeyschroeder%2Freact-native-simple-animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeyschroeder%2Freact-native-simple-animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeyschroeder%2Freact-native-simple-animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeyschroeder%2Freact-native-simple-animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joeyschroeder","download_url":"https://codeload.github.com/joeyschroeder/react-native-simple-animations/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeyschroeder%2Freact-native-simple-animations/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268339400,"owners_count":24234544,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animated","animation","react","react-native"],"created_at":"2024-12-06T09:13:24.711Z","updated_at":"2025-08-02T05:32:08.688Z","avatar_url":"https://github.com/joeyschroeder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/react-native-simple-animations.svg)](https://www.npmjs.com/package/react-native-simple-animations)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()\n[![GitHub issues](https://img.shields.io/github/issues/joeyschroeder/react-native-simple-animations.svg)](https://github.com/joeyschroeder/react-native-simple-animations/issues)\n[![npm downloads](https://img.shields.io/npm/dt/react-native-simple-animations.svg)](https://www.npmjs.com/package/react-native-simple-animations)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)\n[![Dependency status](https://david-dm.org/joeyschroeder/react-native-simple-animations/status.svg)](https://david-dm.org/joeyschroeder/react-native-simple-animations/)\n[![devDependency status](https://david-dm.org/joeyschroeder/react-native-simple-animations/dev-status.svg)](https://david-dm.org/joeyschroeder/react-native-simple-animations/?type=dev)\n\n# [![react-native-simple-animations](https://i.imgur.com/Aw0bShe.png)](https://www.npmjs.com/package/react-native-simple-animations) React Native Simple Animations\n\nA React Native component that adds simple entrance, exit, and attention-seeking animations to a child component. **Works on iOS \u0026 Android.**\n\n## Example\n\n![react-native-simple-animations](https://i.imgur.com/IuiG6Sg.gif 'react-native-simple-animations')\n\n## Installation\n\n`npm install react-native-simple-animations --save`\n\n## Usage\n\nImport **SimpleAnimation** component:\n\n```\nimport { SimpleAnimation } from 'react-native-simple-animations';\n```\n\nUse as follows:\n\n```\n\u003cSimpleAnimation delay={500} duration={1000} fade staticType='zoom'\u003e\n\t\u003cText\u003eHello, world!\u003c/Text\u003e\n\u003c/SimpleAnimation\u003e\n```\n\nIn the above example the `Text` component will fade and zoom in for 1000 milliseconds after waiting 500 milliseconds.\n\n## Configuration\n\nYou can configure `SimpleAnimation` by passing the following props:\n\n| prop | type/valid values | default | description |\n| --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| aim | `\"in\"`, `\"out\"` | `\"in\"` | whether the child component will animate **in** or **out**; for example, if `staticType` is set to `\"zoom\"` and `aim` is set to `\"in\"` the child component will zoom in; if `aim` is set to `\"out\"` the child component will zoom out |\n| animate | boolean | `true` | when `true` the child component will animate, when `false` the child component will not animate |\n| animateOnUpdate | boolean | `false` | when `true` the child component will animate if any of the props change on it's parent `SimpleAnimation` component, when `false` the child component will not animate regardless of `SimpleAnimation`'s props change |\n| delay | number | `0` | the length in milliseconds the component will wait before animating |\n| direction | `\"down\"`, `\"left\"`, `\"right\"`, `\"up\"` | `null` | when `movementType` is set, this is the direction the child component will move |\n| distance | number | `0` | when `movementType` is set, this is the distance the child component will move |\n| duration | number | `1000` | the length in milliseconds the `fade` animation will last and the length the movement animation will last when `movementType` is set to `\"slide\"` |\n| easing | React Native [Easing function](https://facebook.github.io/react-native/docs/easing.html) | `Easing.out(Easing.exp)` | the easing function to define animation curve |\n| fade | boolean | `true` | when `true` the child component will fade in or out depending on the `aim` |\n| [friction](https://facebook.github.io/react-native/docs/animated.html#spring) | number | `5` | when `movementType` is set to `\"spring\"` or `staticType` is set to `\"bounce\"` this is the amount of friction applied to the animation |\n| movementType | `\"slide\"`, `\"spring\"` | `null` | when `direction` and `distance` are set, the type of movement animation |\n| staticType | `\"bounce\"`, `\"zoom\"` | `null` | when set the child component will `\"bounce\"` or \"`zoom`\" in our out depending on the `aim` |\n| style | object | `undefined` | additional styles applied to the component |\n| [tension](https://facebook.github.io/react-native/docs/animated.html#spring) | number | `100` | when `movementType` is set to `\"spring\"` or `staticType` is set to `\"bounce\"` this is the amount of friction applied to the animation |\n| [useNativeDriver](http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html) | boolean | `true` | when `true` the animation is sent to native before starting, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame |\n\n## Demo Application\n\nThis repository contains a demo React Native application with a customizable example of the `SimpleAnimation` component in use. The demo application was built using [Expo](https://expo.io/features).\n\nTo use the demo application install Expo using the installation instructions located [here](https://docs.expo.io/versions/v31.0.0/introduction/installation), clone this repository, run the application using the [expo-cli](https://docs.expo.io/versions/latest/workflow/expo-cli). Then open the application on the iOS Simulator, [Gennymotion Android Emulator](https://www.genymotion.com/), or your mobile device.\n\n1. Clone this repository: `https://github.com/joeyschroeder/react-native-simple-animations.git`\n2. Navigate to the demo application: `cd path/to/this/repository/react-native-simple-animations/example/reactreact-native-simple-animations-example-app`\n3. Install demo application dependencies: `npm install`\n4. Run `npm run start`\n\nUsing the Expo CLI, you'll be able to view the demo application in the iOS Simulator or Gennymotion Android Android Emulator, or on your mobile device using the [iOS Expo Client](https://itunes.apple.com/us/app/expo-client/id982107779) or [Android Expo Client](https://play.google.com/store/apps/details?id=host.exp.exponent\u0026hl=en_US).\n\n## Built With\n\n- [React Native](https://facebook.github.io/react-native/) - A framework for building native apps using React\n- [Expo](https://expo.io/learn) - A toolchain built around React Native to help build native iOS and Android projects\n\n## Versioning\n\nI use [SemVer](https://docs.npmjs.com/getting-started/semantic-versioning) for versioning. For the versions available, see the [tags on this repository](https://github.com/joeyschroeder/react-native-simple-animations/tags).\n\n## Authors\n\n- **Joey Schroeder** - _Initial work_ - [joeyschroeder.com](https://joeyschroeder.com)\n\nSee also the list of [contributors](https://github.com/joeyschroeder/react-native-simple-animations/graphs/contributors) who participated in this project.\n\n## Contributing\n\nPlease submit a pull request with any features/fixes for the project. I apologize in advance for the slow action on pull requests and issues. Please follow the [ESLint rules](https://github.com/joeyschroeder/react-native-simple-animations/blob/master/.eslintrc.json) for the project.\n\n## License\n\nThis project is licensed under the MIT License - see the [MIT Open Source Initiative](https://opensource.org/licenses/MIT) for details.\n\n## Acknowledgments\n\nHat tip to anyone who's code was used! 🤠\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoeyschroeder%2Freact-native-simple-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoeyschroeder%2Freact-native-simple-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoeyschroeder%2Freact-native-simple-animations/lists"}