{"id":13725994,"url":"https://github.com/xotahal/react-native-motion","last_synced_at":"2025-05-15T02:09:46.998Z","repository":{"id":57338470,"uuid":"125793411","full_name":"xotahal/react-native-motion","owner":"xotahal","description":"Animate it! Easily!","archived":false,"fork":false,"pushed_at":"2020-07-24T14:32:31.000Z","size":46,"stargazers_count":2076,"open_issues_count":14,"forks_count":132,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-04-14T01:53:14.545Z","etag":null,"topics":["animation","react-native","ux"],"latest_commit_sha":null,"homepage":"","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/xotahal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-19T02:57:21.000Z","updated_at":"2025-04-02T02:28:50.000Z","dependencies_parsed_at":"2022-09-07T10:10:39.528Z","dependency_job_id":null,"html_url":"https://github.com/xotahal/react-native-motion","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xotahal%2Freact-native-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xotahal%2Freact-native-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xotahal%2Freact-native-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xotahal%2Freact-native-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xotahal","download_url":"https://codeload.github.com/xotahal/react-native-motion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259384,"owners_count":22040820,"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":["animation","react-native","ux"],"created_at":"2024-08-03T01:02:46.215Z","updated_at":"2025-05-15T02:09:46.943Z","avatar_url":"https://github.com/xotahal.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Native Motion\nChange your application from the left one to the right one! Animate it!  **Easily!** [Animated Transition Article](http://bit.ly/animated-transition) or [Animated Graph Article](http://bit.ly/animated-graph)\n\n\u003cimg src=\"https://github.com/xotahal/ui-interactions-detail-view/blob/master/assets/Final%20-%20Without%20animation.gif\" width=\"240\"\u003e\u003cimg src=\"https://github.com/xotahal/ui-interactions-detail-view/blob/master/assets/Final.gif\" width=\"240\"\u003e\n\n### Getting Started\n```bash\n$ yarn add react-native-motion\n```\n\n### Usage of SharedElement\nWe need to specify source and destination for shared element. This library then will move the shared element from source position to destination position.\n\n```js\nclass Main extends Component {\n  render() {\n    return (\n      \u003cSharedElementRenderer\u003e\n        \u003cApp /\u003e\n      \u003c/SharedElementRenderer\u003e\n    );\n  }\n}\n```\n```js\n// List items page with source of SharedElement\nimport { SharedElement } from 'react-native-motion';\n\nclass ListPage extends Component {\n  render() {\n    return (\n      \u003cSharedElement id=\"source\"\u003e\n        \u003cView\u003e{listItemNode}\u003c/View\u003e\n      \u003c/SharedElement\u003e\n    );\n  }\n}\n```\n```js\n// Detail page with a destination shared element\nimport { SharedElement } from 'react-native-motion';\n\nclass DetailPage extends Component {\n  render() {\n    return (\n      \u003cSharedElement sourceId=\"source\"\u003e\n        \u003cView\u003e{listItemNode}\u003c/View\u003e\n      \u003c/SharedElement\u003e\n    );\n  }\n}\n```\n### Playground for **react-native-motion** library\n\n- [react-native-motion-playground](https://github.com/xotahal/react-native-motion-playground) repository\n- [expo app](https://expo.io/@xotahal/react-native-motion-example)\n\n## Author\n- [Let me help you](http://link.xotahal.cz/research) with animations in React Native 🤙 \n- [Facebook Group](https://www.facebook.com/groups/react.native.motion/) about animation in React Native\n- [Publication](https://medium.com/react-native-motion) about animation in React Native 🚗\n- Personal [Medium Account](https://medium.com/@xotahal) about programming 😍\n- Subscribe a [blog](https://blog.xotahal.cz) 📝\n- Follow me on [Twitter](http://bit.ly/t-xotahal) 🐦\n\n\n| Jiri Otahal                                                                                                                            |\n| -------------------------------------------------------------------------------------------------------------------------------------- |\n| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/3531955?v=4\" width=\"100px;\" style=\"border-radius:50px\"/\u003e](http://bit.ly/t-xotahal) |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxotahal%2Freact-native-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxotahal%2Freact-native-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxotahal%2Freact-native-motion/lists"}