{"id":4201,"url":"https://github.com/zecaptus/react-native-md-motion-buttons","last_synced_at":"2025-07-12T06:32:28.873Z","repository":{"id":57338289,"uuid":"87799110","full_name":"zecaptus/react-native-md-motion-buttons","owner":"zecaptus","description":"A simple animated transition based on the dribble from invision.","archived":false,"fork":false,"pushed_at":"2018-03-11T14:33:38.000Z","size":3045,"stargazers_count":88,"open_issues_count":0,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-29T12:16:07.171Z","etag":null,"topics":["android","animation","button","invision","ios","javascript","material","material-design","motion","react","react-native","transition"],"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/zecaptus.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":"2017-04-10T10:36:38.000Z","updated_at":"2024-07-08T08:37:42.000Z","dependencies_parsed_at":"2022-08-31T03:51:39.865Z","dependency_job_id":null,"html_url":"https://github.com/zecaptus/react-native-md-motion-buttons","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zecaptus/react-native-md-motion-buttons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zecaptus%2Freact-native-md-motion-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zecaptus%2Freact-native-md-motion-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zecaptus%2Freact-native-md-motion-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zecaptus%2Freact-native-md-motion-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zecaptus","download_url":"https://codeload.github.com/zecaptus/react-native-md-motion-buttons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zecaptus%2Freact-native-md-motion-buttons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264951610,"owners_count":23687974,"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":["android","animation","button","invision","ios","javascript","material","material-design","motion","react","react-native","transition"],"created_at":"2024-01-05T20:17:04.316Z","updated_at":"2025-07-12T06:32:28.349Z","avatar_url":"https://github.com/zecaptus.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# react-native-md-motion-buttons (iOS / Android)\n\n[![npm version](https://badge.fury.io/js/react-native-md-motion-buttons.svg)](https://badge.fury.io/js/react-native-md-motion-buttons)\n\nI wanted to re-create this animation with react-native (https://dribbble.com/shots/1945593-Login-Home-Screen)\n\n![Example](examples/doc/button.gif)\n\n\n# Installation\n\n`npm install react-native-md-motion-buttons --save`\n\n# Usage\n\n```jsx\nimport React, { Component } from 'react';\nimport {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View,\n  Button\n} from 'react-native';\nimport { Login } from 'react-native-md-motion-buttons';\n\nclass Home extends Component {\n  render() {\n    return (\u003cView style={[StyleSheet.absoluteFill, styles.container]}\u003e\n      \u003cText style={styles.welcome}\u003e\n        New screen\n      \u003c/Text\u003e\n      \u003cButton title=\"Reset\" onPress={this.props.logout} /\u003e\n\n    \u003c/View\u003e)\n  }\n}\n\nexport default class examples extends Component {\n  render() {\n    const promise = () =\u003e new Promise((resolve, reject) =\u003e setTimeout(() =\u003e resolve(), 2000) );\n\n    return (\n        \u003cLogin.View style={styles.container} homeScreen={\u003cHome /\u003e}\u003e\n\n          \u003cText style={styles.welcome}\u003e\n            Welcome to React Native!\n          \u003c/Text\u003e\n          \u003cText style={styles.instructions}\u003e\n            To get started, edit index.ios.js\n          \u003c/Text\u003e\n          \u003cText style={styles.instructions}\u003e\n            Press Cmd+R to reload,{'\\n'}\n            Cmd+D or shake for dev menu\n          \u003c/Text\u003e\n\n          \u003cLogin.Button\n              onPress={promise}\n              style={styles.button}\n              color=\"rgb(255,155,57)\" /\u003e\n\n        \u003c/Login.View\u003e\n    )\n  }\n}\n```\n\n#### View Props\n\n| Prop | Type | Description |\n|---|---|---|\n|**`children`**|`ReactElement\u003cany\u003e`|React Element(s) to render. **Button must be a direct child.**|\n|**`homeScreen`**|`ReactElement\u003cany\u003e`|New screen to render after the animation. `\u003cView\u003e` expose a `logout` function as a prop to this Component |\n|**`style`**|`StyleSheet\u003cany\u003e`|Apply style to the View|\n\n#### Button Props\n\n| Prop | Type | Description |\n|---|---|---|\n|**`title`**|`?String`|Button title.  _Default : 'Login'_|\n|**`color`**|`?String`|Text color.  _Default: 'white'_|\n|**`style`**|`StyleSheet\u003cany\u003e`|Apply style to the Button.  _**backgroundColor** is required_|\n|**`onPress`**|`() =\u003e Promise\u003e`|Handle button click. **Must returned a promise**|\n\n# Roadmap\n\n## Next release\n\n- [x] Add ripple effect for button\n- [ ] Add a Floating Action Button (FAB) which will move to the center (like inVision dribble)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzecaptus%2Freact-native-md-motion-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzecaptus%2Freact-native-md-motion-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzecaptus%2Freact-native-md-motion-buttons/lists"}