{"id":4013,"url":"https://github.com/jacklam718/react-native-button-component","last_synced_at":"2025-04-12T23:42:32.180Z","repository":{"id":46936831,"uuid":"66705413","full_name":"jacklam718/react-native-button-component","owner":"jacklam718","description":"A Beautiful, Customizable React Native Button component for iOS \u0026 Android","archived":false,"fork":false,"pushed_at":"2022-12-03T10:25:31.000Z","size":12589,"stargazers_count":532,"open_issues_count":35,"forks_count":49,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-12T23:42:26.785Z","etag":null,"topics":["android","button","ios","javascript","react","react-native","react-native-button"],"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/jacklam718.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":"2016-08-27T08:55:19.000Z","updated_at":"2025-03-22T07:26:59.000Z","dependencies_parsed_at":"2023-01-23T22:45:20.364Z","dependency_job_id":null,"html_url":"https://github.com/jacklam718/react-native-button-component","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-button-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-button-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-button-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacklam718%2Freact-native-button-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacklam718","download_url":"https://codeload.github.com/jacklam718/react-native-button-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647256,"owners_count":21139081,"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","button","ios","javascript","react","react-native","react-native-button"],"created_at":"2024-01-05T20:16:58.457Z","updated_at":"2025-04-12T23:42:32.146Z","avatar_url":"https://github.com/jacklam718.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"[![Build Status](https://travis-ci.org/jacklam718/react-native-button-component.svg?branch=master)](https://travis-ci.org/jacklam718/react-native-button-component)\n[![npm](https://img.shields.io/npm/v/react-native-button-component.svg)]()\n[![npm](https://img.shields.io/npm/dm/react-native-button-component.svg)]()\n\n\n## React Native Button component\n\nReact Native Button component for iOS \u0026 Android.\n\n![Example](https://jacklam718.github.io/react-native-button-component/build/video/circle-button-demo.gif)\n![Example](https://jacklam718.github.io/react-native-button-component/build/video/button-demo.gif)\n\n\n## Provided Components\nThis library provided the following button components:\n```\nButtonComponent\nCircleButton\nRoundButton\nRectangleButton\n```\n\n## Installation\n1. `npm install --save react-native-button-component`\n2. `react-native link react-native-button-component`\n\n##### Note\nIf you didn't see this item `libART.a` under the `Link Binary With Libraries` or you get this error `No component found for view with name \"ARTSurfaceView\"`\nPlease open Xcode project and add `libART.a` under `Build Phases -\u003e Link Binary With Libraries`\n\n###### The detailed steps:\n1. Open Xcode project\n2. Build Phases -\u003e Link Binary With Libraries\n3. Click the `+` button and Click `Add Other...`\n4. Open with `node_modules/react-native/Libraries/ART/ART.xcodeproj`\n5. Click the `+` and select the `libART.a` and click `Add`\n\u003cimg src=\"https://jacklam718.github.io/react-native-button-component/build/video/link-libART.gif\" width=\"650\" /\u003e\n\n## Some Simple Examples\n\u003ca href=\"https://github.com/jacklam718/react-native-button-component/blob/master/button-example/js/containers/OneStateButtons.js\" target=\"_blank\"\u003e\n  One State Button\n\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://github.com/jacklam718/react-native-button-component/blob/master/button-example/js/containers/MultipleStatesButtons.js\" target=\"_blank\"\u003e\n  Multiple States Button\n\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://github.com/jacklam718/react-native-button-component/blob/master/button-example/js/containers/SpinnerButtons.js\" target=\"_blank\"\u003e\n  Spinner Button\n\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://github.com/jacklam718/react-native-button-component/blob/master/button-example/js/containers/ProgressButtons.js\" target=\"_blank\"\u003e\n  Progress Button\n\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://github.com/jacklam718/react-native-button-component/blob/master/button-example/js/containers/CircleButtons.js\" target=\"_blank\"\u003e\n  Circle Button\n\u003c/a\u003e\n\n## Documents\n\u003ca href=\"https://github.com/jacklam718/react-native-button-component/blob/master/docs/props-and-button-state-attributes.md\" target=\"_blank\"\u003e\n  Props \u0026 Button Options\n\u003c/a\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://github.com/jacklam718/react-native-button-component/blob/master/docs/progress-button-state-attributes.md\" target=\"_blank\"\u003e\n  Options for Progress Button\n\u003c/a\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://github.com/jacklam718/react-native-button-component/blob/master/docs/spinner-button-state-attributes.md\" target=\"_blank\"\u003e\n  Options for Spinner Button\n\u003c/a\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://github.com/jacklam718/react-native-button-component/blob/master/docs/circle-button-attributes.md\" target=\"_blank\"\u003e\n  Options for Circle Button\n\u003c/a\u003e\n\n## Usage - Basic\n\n#### Button with one state\n```javascript\nimport ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';\n\n// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent\n\u003cButtonComponent\n  onPress={() =\u003e {}}\n  image={require('button-image.png')}\n  text=\"Button\"\n\u003e\n\u003c/ButtonComponent\u003e\n```\n\n#### Button with multiple states\n```javascript\nimport ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';\n\n// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent\n\u003cButtonComponent\n  buttonState={this.state.buttonState} // \"upload\" or \"uploading\"\n  states={{\n    upload: {\n      onPress: () =\u003e {\n        this.imageUploader.upload();\n        this.state.setState({ buttonState: 'uploading' });\n      },\n      image: require('upload-image.png'),\n      text: 'Upload Image',\n    },\n    uploading: {\n      onPress: () =\u003e {\n        this.imageUploader.cancelUpload();\n        this.state.setState({ buttonState: 'upload' });\n      },\n      spinner: true,\n      text: 'Uploding Image...',\n    },\n  }}\n\u003e\n\u003c/ButtonComponent\u003e\n```\n\n## Usage - With Your Configurations\n\n#### Button with one state\n```javascript\n\u003cButtonComponent\n  text=\"Button\"\n  type=\"primary\"\n  shape=\"rectangle\"\n  backgroundColors={['#4DC7A4', '#66D37A']}\n  gradientStart={{ x: 0.5, y: 1 }}\n  gradientEnd={{ x: 1, y: 1 }}\n  height={80}\n  onPress={() =\u003e {}}\n  image={require('button-image.png')}\n\u003e\n\u003c/ButtonComponent\u003e\n```\n\n#### Button with multiple states - different config for different states\n```javascript\nimport ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';\n\n// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent\n\u003cButtonComponent\n  buttonState={this.state.buttonState} // \"upload\" or \"uploading\"\n  gradientStart={{ x: 0.5, y: 1 }}\n  gradientEnd={{ x: 1, y: 1 }}\n  states={{\n    upload: {\n      text: 'Upload Image',\n      backgroundColors: ['#4DC7A4', '#66D37A'],\n      image: require('upload-image.png'),\n      onPress: () =\u003e {\n        this.imageUploader.upload();\n        this.state.setState({ buttonState: 'uploading' });\n      },\n    },\n    uploading: {\n      text: 'Uploding Image...',\n      gradientStart: { x: 0.8, y: 1 },\n      gradientEnd: { x: 1, y: 1 },\n      backgroundColors: ['#ff4949', '#fe6060'],\n      spinner: true,\n      onPress: () =\u003e {\n        this.imageUploader.cancelUpload();\n        this.state.setState({ buttonState: 'upload' });\n      },\n    },\n  }}\n\u003e\n\u003c/ButtonComponent\u003e\n```\n\n#### Button with multiple states - one config for different states\n```javascript\n\u003cButtonComponent\n  buttonState={this.state.buttonState} // \"upload\" or \"uploading\"\n  gradientStart={{ x: 0.5, y: 1 }}\n  gradientEnd={{ x: 1, y: 1 }}\n  backgroundColors={['#4DC7A4', '#66D37A']}\n  states={{\n    upload: {\n      text: 'Upload Image',\n      image: require('upload-image.png'),\n      onPress: () =\u003e {\n        this.imageUploader.upload();\n        this.state.setState({ buttonState: 'uploading' });\n      },\n    },\n    uploading: {\n      text: 'Uploding Image...',\n      spinner: true,\n      onPress: () =\u003e {\n        this.imageUploader.cancelUpload();\n        this.state.setState({ buttonState: 'upload' });\n      },\n    },\n  }}\n\u003e\n\u003c/ButtonComponent\u003e\n```\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacklam718%2Freact-native-button-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacklam718%2Freact-native-button-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacklam718%2Freact-native-button-component/lists"}