{"id":18488532,"url":"https://github.com/SimformSolutionsPvtLtd/react-native-spinner-button","last_synced_at":"2025-04-08T21:30:37.002Z","repository":{"id":38961335,"uuid":"142852984","full_name":"SimformSolutionsPvtLtd/react-native-spinner-button","owner":"SimformSolutionsPvtLtd","description":"React Native button component with multiple animated spinners","archived":false,"fork":false,"pushed_at":"2024-05-16T21:59:37.000Z","size":25830,"stargazers_count":130,"open_issues_count":1,"forks_count":14,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-02T22:04:52.863Z","etag":null,"topics":["javascript","loaders","loading-animations","loading-spinner","react","react-native","react-native-button","react-native-buttons","react-native-loading","react-native-spinner","react-native-spinner-button","react-native-ui-components","react-native-ui-kitten","spinner"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/SimformSolutionsPvtLtd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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-07-30T09:17:08.000Z","updated_at":"2024-12-20T00:13:45.000Z","dependencies_parsed_at":"2024-04-01T06:25:15.867Z","dependency_job_id":"f41214bd-401e-467f-a69d-a7f26d164a49","html_url":"https://github.com/SimformSolutionsPvtLtd/react-native-spinner-button","commit_stats":null,"previous_names":["simformsolutions/react-native-spinner-button"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-spinner-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-spinner-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-spinner-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-spinner-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimformSolutionsPvtLtd","download_url":"https://codeload.github.com/SimformSolutionsPvtLtd/react-native-spinner-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247930982,"owners_count":21020146,"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":["javascript","loaders","loading-animations","loading-spinner","react","react-native","react-native-button","react-native-buttons","react-native-loading","react-native-spinner","react-native-spinner-button","react-native-ui-components","react-native-ui-kitten","spinner"],"created_at":"2024-11-06T12:51:51.678Z","updated_at":"2025-04-08T21:30:36.996Z","avatar_url":"https://github.com/SimformSolutionsPvtLtd.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![Tree-Selection](./assets/react-native-spinner-button.png)\n\n# react-native-spinner-button [![npm version](https://badge.fury.io/js/react-native-spinner-button.svg)](https://badge.fury.io/js/react-native-spinner-button) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)\nReact Native Spinner Button component library provides dynamic spinner buttons and ripple effects, enriching the user experience with smooth animations and intuitive feedback\n \nLibrary is compatible with both Android and iOS platforms, offering a versatile solution to elevate your app's user interface with ease.\n\n## 🎬 Preview\n\n![Example of react-native-spinner-button](./assets/example.gif)\n\n## Quick Access\n\n[Installation](#installation) | [Usage and Examples](#usage) | [Properties](#properties) | [Example Code](#example) | [License](#license)\n\n## Getting Started\n\nHere's how to get started with react-native-spinner-button in your React Native project:\n\n### Installation\n\n#### 1. Install the package\n\n```sh\nnpm install react-native-spinner-button react-native-gradients react-native-svg\n```\n\nUsing `Yarn`:\n\n```sh\nyarn add react-native-spinner-button react-native-gradients react-native-svg\n```\n\n##### 2. Install cocoapods in the ios project\n\n```bash\ncd ios \u0026\u0026 pod install\n```\n\n\n##### Know more about [react-native-gradients](https://www.npmjs.com/package/react-native-gradients) and [react-native-svg](https://www.npmjs.com/package/react-native-svg)\n\n\n## Usage\n\n```jsx\nimport React, {useState, useCallback} from 'react';\nimport {StyleSheet, Text, View} from 'react-native';\nimport SpinnerButton from 'react-native-spinner-button';\n\nconst App: React.FC = () =\u003e {\n  const [isLoading, setLoading] = useState\u003cboolean\u003e(false);\n\n  const handleButtonPress = useCallback\u003c() =\u003e void\u003e(() =\u003e {\n    setLoading(true);\n    setTimeout(() =\u003e {\n      setLoading(false);\n    }, 3000);\n  }, []);\n\n  return (\n    \u003cView style={styles.screen}\u003e\n      {/* Your button component */}\n      \u003cSpinnerButton\n        buttonStyle={styles.buttonStyle}\n        isLoading={isLoading}\n        onPress={() =\u003e {\n          handleButtonPress();\n        }}\n        indicatorCount={10}\n      \u003e\n        \u003cText style={styles.buttonText}\u003eDefault Or Ball SpinnerButton\u003c/Text\u003e\n      \u003c/SpinnerButton\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default App;\n\nconst styles = StyleSheet.create({\n  screen: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  buttonStyle: {\n    borderRadius: 10,\n    margin: 10,\n    backgroundColor: '#893346',\n  },\n  buttonText: {\n    fontSize: 20,\n    textAlign: 'center',\n    color: 'white',\n  },\n});\n```\n\n\nExample of Ripple Effect Button\n\n```jsx\nimport React from 'react';\nimport {StyleSheet, Text, View} from 'react-native';\nimport SpinnerButton from 'react-native-spinner-button';\n\nconst App: React.FC = () =\u003e {\n  const buttonPress: () =\u003e void = () =\u003e {\n    console.log('Button Clicked');\n  };\n\n  return (\n    \u003cView style={styles.screen}\u003e\n      \u003cSpinnerButton\n        animationType=\"ripple-effect\"\n        onPress={buttonPress}\n        buttonStyle={styles.btnStyle}\n        animatedDuration={400}\u003e\n        \u003cText style={styles.textStyle}\u003eRippleButton\u003c/Text\u003e\n      \u003c/SpinnerButton\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  screen: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n  btnStyle: {\n    margin: 10,\n    backgroundColor: '#893346',\n  },\n  textStyle: {\n    fontSize: 20,\n    textAlign: 'center',\n    color: 'white',\n  },\n});\n\nexport default App;\n```\n\n\n#### 🎬 Preview\n\n|       Spinner Button    |  Ripple Button    |\n| :-------: | :-----:|\n|  ![alt Default](./assets/exampleDemo1.gif)  |   ![alt Modal](./assets/exampleDemo2.gif)    |\n\n\n## Properties\n\nProps for the spinner button\n\n| Props                 | Default |          Type           | Description                                                                                          |\n| :-------------------- | :-----: | :---------------------: | :--------------------------------------------------------------------------------------------------- |\n| **onPress** |    -    |   function  | The function to execute upon tapping the button |\n| animationType |    null or undefined    |         string          | Type of animation for the button and spinner, For more details about properties, refer [react-native-animatable](https://www.npmjs.com/package/react-native-animatable) and also support \"ripple-effect\"  |\n| buttonStyle |   {height: 50}    | array or object | Button styling |\n| borderStyle |    -    |       array or object        | It's a stylesheet object supporting all basic border properties like width, radius, color, and style (solid, dotted, and dashed), etc |\n| spinnerColor |  white   |  string  | The color of the spinner |\n| spinnerType  |  BallIndicator   |  string  | Type of the spinner: BallIndicator, BarIndicator, DotIndicator, MaterialIndicator, PacmanIndicator, PulseIndicator, SkypeIndicator, UIActivityIndicator, WaveIndicator. |\n| isLoading |  false   |  boolean  | The flag to render a button or a spinner. false will render a button, and true will render a spinner  |\n| indicatorCount     |    8    |   number   | The count property of react-native-indicators |\n| size |    16    |   number   |  The size of the dot in DotIndicator  |\n| spinnerOptions |    -    | object  | An object of waveMode for WaveIndicator. For more details about these properties, refer [react-native-indicators](https://github.com/n4kz/react-native-indicators) |\n| gradientType |    -    |   string   | Gradients allow you to display more than one color with a smooth transition between the colors (think Instagram logo). Currently, we support two types of gradients: linear and radial |\n| gradientColors  |    -    |   array   | Colors can be passed in different formats such as name, RGBA, hex, etc. The colors should be ordered in the way we want them to be displayed. For example, colors={[ \"purple\", \"white\" ]}, the gradient will transition from purple to white |\n| gradientColoroffset |    -    |   array   | An array of strings that defines where each color will stop in the gradient. These values are passed as a percentage of the entire gradient from 0% to 100% and must correspond to the colors passed in length and position. For example, with colors={[“red”, “yellow”, “green”]}, then we’ll have locations={['0%', '50%', '80%']}, with the first color (red) covering '0%' – '50%', the second (yellow) going from '50%' – '80%', and the third (green) from '80%' – '100%' |\n| gradientColorAngle |    -    |   number   | The gradient line's angle of direction. A value of 0deg is equivalent to the top; increasing values rotate clockwise from there. The angle range is from 0 to 360 degrees [More detail to read](https://www.quirksmode.org/css/images/angles.html) |\n| gradientRadialRadius  |    -    |   number   | This property is used for radial type gradients to set the radius of the radial gradient   |\n| gradientButtonHeight |    -    |   number   | The size of the gradient component |\n| radialRadiusx |    -    |  string or number   | The x-coordinate of the center of the radial gradient\n| radialRadiusy |    -    |    string or number   | The y-coordinate of the center of the radial gradient |\n| radialRadiusRX  |    -    |    string or number   | The horizontal radius of the radial gradient defining the ellipse  |\n| radialRadiusRY  |    -    |    string or number   | The vertical radius of the radial gradient defining the ellipse  |\n| animatedDuration  |    300    |   number   | This property is used to define the duration of the animation, indicating how long it will take to execute the animation  |\n| customSpinnerComponent  |    -    |   node   | This prop allows you to add your own custom spinner component  |\n| animateWidth  |    -    |   number   | This prop is used to set the component width when the progress/loading starts. If you do not set this prop, it will identify the width and height which are minimum and then use that value  |\n| animateHeight  |    -    |   number   | This prop is used to set the component height when the progress/loading starts. If you do not set this prop, it will identify the width and height which are minimum and then use that value   |\n| animateRadius  |    -    |   number   | This prop is used to set the component radius when the progress/loading starts. If you do not set this prop, it will create a circle shape by default  |\n| isConnected  |    true    |   boolean   | The flag is used to identify the network connection, and based on the flag, the user iteration is set. false will render the button in disabled mode, and true will render the button in normal mode  |\n| disabled  |    false    |   boolean   | The flag to identify button enable/disable. true will render the button in disabled mode, and false will render the button in normal mode  |\n| disableStyle  |    -    |   array or object   | It's a stylesheet object. This style applies when identifying the button as disabled or if network connection is not available  |\n| gradientName  |    -    |   string   | These properties are used whenever you want to use a gradient but do not pass the gradientColors, gradientColorOffset, and gradientColorAngle properties |\n| disableGradientColors  |    -    |   array   | Colors can be passed in different formats such as names, RGBA, hex, etc. The colors should be ordered in the way we want them to be displayed. For example, with colors={[ \"purple\", \"white\" ]}, the gradient will transition from purple to white  |\n| rippleColor |   rgba(255, 255, 255, .25)    | string | Color of the ripple animation effect\n\n## Example\n  A full working example project is here [Example](./example/App/App.tsx)\n\n  ```sh\nyarn\nyarn example ios   // For ios\nyarn example android   // For Android\n```\n\n\n## Find this library useful? ❤️\n\nSupport it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-spinner-button/stargazers) for this repository.⭐\n\n## Bugs / Feature requests / Feedbacks\n\nFor bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-spinner-button/issues/new?labels=bug\u0026late=BUG_REPORT.md\u0026title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-spinner-button/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-spinner-button/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEEDBACK%5D%3A)\n\n\n## 🤝 How to Contribute\n\nWe'd love to have you improve this library or fix a problem 💪\nCheck out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.\n\n## Awesome Mobile Libraries\n\n- Check out our other [available awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)\n\n## License\n\n- [MIT License](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimformSolutionsPvtLtd%2Freact-native-spinner-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSimformSolutionsPvtLtd%2Freact-native-spinner-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimformSolutionsPvtLtd%2Freact-native-spinner-button/lists"}