{"id":24811701,"url":"https://github.com/sqlprovider/react-native-animatable-button","last_synced_at":"2025-03-25T14:25:44.408Z","repository":{"id":57335300,"uuid":"112478921","full_name":"sqlProvider/react-native-animatable-button","owner":"sqlProvider","description":"best animated button for react native","archived":false,"fork":false,"pushed_at":"2018-01-31T07:46:36.000Z","size":13,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-03T07:04:08.110Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/sqlProvider.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-11-29T13:30:17.000Z","updated_at":"2021-04-14T19:49:46.000Z","dependencies_parsed_at":"2022-08-29T13:20:12.465Z","dependency_job_id":null,"html_url":"https://github.com/sqlProvider/react-native-animatable-button","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqlProvider%2Freact-native-animatable-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqlProvider%2Freact-native-animatable-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqlProvider%2Freact-native-animatable-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqlProvider%2Freact-native-animatable-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sqlProvider","download_url":"https://codeload.github.com/sqlProvider/react-native-animatable-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245478787,"owners_count":20622035,"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":"2025-01-30T13:16:03.872Z","updated_at":"2025-03-25T14:25:44.344Z","avatar_url":"https://github.com/sqlProvider.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-native-animatable-button\n[![npm version](https://badge.fury.io/js/react-native-animatable-button.svg)](https://badge.fury.io/js/react-native-animatable-button)\n## Installation\n```\nnpm install react-native-animatable-button --save\n```\n\n## Overview\n\n- [x] States\n- [x] Opacity animation \n- [x] Tap animations\n- [x] Fully customizable\n\n## Props\n\n### Button Props\n\n| Props                | Type                        | Description                        | Required     | Default                     |\n|:---------------------|:----------------------------|:-----------------------------------|:-------------|:----------------------------|\n| accessibilityLabel   | string                      | custom access label                | not required | reactNativeAnimetableButton\n| buttonContainerStyle | Object\u003cViewSyle\u003e            | must be provided Object not STYLE  | not required | see below\n| selectedState        | string                      | selected id of provided states     | not required | default\n| states               | [key: string]: IButtonState | state object                       | not required | default state\n| disabled             | boolean                     | enable/disable button              | not required | false\n| touchFeedbaack       | boolean                     | enable/disable tap opacity animate | not required | true\n| touchFeedbaackDelay  | boolean                     | set delayPressIn prop of TOpacity  | not required | 0\n\n### Button Animation Props\n\n| Props                      | Type                        | Description                        | Required     | Default                           |\n|:---------------------------|:----------------------------|:-----------------------------------|:-------------|:----------------------------------|\n| animationDelay             | number                      | delay of animations                | not required | 0\n| animationDuration          | number                      | animation duration time            | not required | 400\n| animationEasing            | EasingFunction              | easing options                     | not required | Easing.bezier(0.4, 0.2, 0.4, 1.3)\n| onPressAnimationEnable     | boolean                     | tap animation config               | not required | true\n| onPressAnimationScaleValue | number                      | number of scale to                 | not required | 1.05\n| onPressAnimationType       | button - inside             | scale all button or inside         | not required | button\n| startAnimationDelay        | number                      | delay of start animation           | not required | 0\n| startAnimationDuration     | number                      | animation duration time for start  | not required | 400\n| startAnimationEnable       | boolean                     | enable/disable start animation     | not required | true\n| backgroundAnimation        | animated - slide            | set background option              | not required | animated\n\n\n### Button State Props\n\n| Props                         | Type                        | Description                        | Required     | Default                           |\n|:------------------------------|:----------------------------|:-----------------------------------|:-------------|:----------------------------------|\n| buttonInsideContainerStyle    | Object\u003cViewSyle\u003e            | must be provided Object not STYLE  | not required | see below\n| icon                          | ImageURISource - any        | icon uri or source                 | not required | -\n| iconStyle                     | ImageStyle                  | icon style                         | not required | see below\n| iconPosition                  | left - right                | position of icon                   | not required | left\n| text                          | string                      | button text                        | not required | -\n| textStyle                     | TextStyle                   | text style                         | not required | see below\n| spinner                       | boolean                     | enable/disable spinner             | not required | false\n| spinnerProps                  | ActivityIndicatorProperties | spinner Props                      | not required | -\n| syncIconAndTextAnimation      | boolean                     | enable/disable animation diff      | not required | false\n| asyncIconAndTextAnimationDiff | number [0 - 100]            | percent of diff                    | not required | 50\n\n\n\n#### buttonContainerStyle\n```javascript\n{\n  backgroundColor: 'rgba(0,0,0,0)',\n  borderRadius: 5,\n  borderWidth: 1,\n  height: ButtonSize.height,\n  overflow: 'hidden'\n}\n```\n\n#### buttonInsideContainerStyle\n```javascript\n{\n  alignItems: 'center',\n  backgroundColor: 'rgba(0,0,0,0)',\n  flexDirection: 'row',\n  height: ButtonSize.height,\n  justifyContent: 'center',\n  overflow: 'hidden',\n  paddingHorizontal: 10\n}\n```\n\n#### textStyle\n```javascript\n{\n  paddingHorizontal: 5\n}\n```\n\n#### iconStyle\n```javascript\n{\n  flex: 1,\n  resizeMode: 'contain'\n}\n```\n\n## Note\n  Master props and state props are combined when provided.\n\n## Usage example\n```javascript\nconstructor() {\n  super();\n\n  this.state = {\n  activeState: 'idle2'\n  }\n}\n\nrender () {\n  \u003cButton\t\n    touchFeedback={false}\n    onPress={this.onPress.bind(this)}\n    selectedState={this.state.activeState}\n    buttonContainerStyle={{\n      height: 40\n    }}\n    buttonInsideContainerStyle={{\n      backgroundColor: 'rgba(100,100,100,0.5)'\n    }}\n    onPress={() =\u003e { \n      console.log('master pressed');\n      if (this.state.activeState === 'idle2') this.setState({ activeState: 'idle' });\t\n    }}\n    states={{\n      laodList: {\n        text:\"Load List\",\n        buttonInsideContainerStyle:{\n          backgroundColor: 'rgba(255,0,0,0.5)'\n        },\n        onPress: () =\u003e { \n          console.log('loadList pressed'); \n          this.setState({ activeState: 'loading' })\n          \n          return false; \n        }\n      },\n      // when tap laodList logs =\u003e loadList pressed; master pressed\n\n      loading: {\n        text:\"loading\",\n        buttonInsideContainerStyle:{\n          backgroundColor: 'rgba(0,255,0,0.5)'\n        },\n        spinner: true,\n        onPress: () =\u003e { console.log('loading pressed'); return true; }\n      },\n      // when tap loading logs =\u003e loading pressed;\n\n      idle: {\n        text:\"idle\",\n        onPress: () =\u003e { \n          console.log('idle pressed');\n          this.setState({ activeState: 'loadList' })\n        }\n      },\n      // when tap idle logs =\u003e idle pressed; master pressed\n\n      idle2: {\n        text:\"idle2\",\n      }\n      // when tap idle2 logs =\u003e master pressed\n    }}\n  /\u003e\n}\n```\n\n### Description\nif you are return `false` or `undefined` in sub onPress functions when call master onPress function.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsqlprovider%2Freact-native-animatable-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsqlprovider%2Freact-native-animatable-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsqlprovider%2Freact-native-animatable-button/lists"}