{"id":19253228,"url":"https://github.com/pettiboy/react-native-ui-buttons","last_synced_at":"2025-04-21T13:31:33.938Z","repository":{"id":46303004,"uuid":"415666373","full_name":"pettiboy/react-native-ui-buttons","owner":"pettiboy","description":"Functional, simple and customizable UI buttons for react native. Also contains loading functionality and automatically changes color for dual tone buttons. TypeScript support.","archived":false,"fork":false,"pushed_at":"2022-07-20T16:24:45.000Z","size":2240,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-06T15:11:31.243Z","etag":null,"topics":["android","buttons","dual-tone-buttons","icon-button","ios","loading-indicator","mobile","react","react-native","react-native-component","react-native-typescript","typescript","ui"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-ui-buttons","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/pettiboy.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":"2021-10-10T18:21:00.000Z","updated_at":"2023-10-08T09:46:33.000Z","dependencies_parsed_at":"2022-08-27T23:53:31.468Z","dependency_job_id":null,"html_url":"https://github.com/pettiboy/react-native-ui-buttons","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pettiboy%2Freact-native-ui-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pettiboy%2Freact-native-ui-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pettiboy%2Freact-native-ui-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pettiboy%2Freact-native-ui-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pettiboy","download_url":"https://codeload.github.com/pettiboy/react-native-ui-buttons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223829233,"owners_count":17210000,"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","buttons","dual-tone-buttons","icon-button","ios","loading-indicator","mobile","react","react-native","react-native-component","react-native-typescript","typescript","ui"],"created_at":"2024-11-09T18:29:51.505Z","updated_at":"2024-11-09T18:29:52.155Z","avatar_url":"https://github.com/pettiboy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# React Native UI Buttons\n\n[![npm](https://img.shields.io/npm/v/react-native-ui-buttons.svg)](https://npmjs.com/package/react-native-ui-buttons) [![npm](https://img.shields.io/npm/dy/react-native-ui-buttons.svg)](https://npmjs.com/package/react-native-ui-buttons)\n[![License MIT](https://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/pettiboy/react-native-ui-buttons/main/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/pettiboy/react-native-ui-buttons/pulls)\n\n![](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![](https://img.shields.io/badge/npm-CB3837?style=for-the-badge\u0026logo=npm\u0026logoColor=white)\n![](https://img.shields.io/badge/Android-3DDC84?style=for-the-badge\u0026logo=android\u0026logoColor=white)\n![](https://img.shields.io/badge/iOS-000000?style=for-the-badge\u0026logo=ios\u0026logoColor=white)\n\n\u003c/div\u003e\n\n## ✨ Installation\n\nIf you want to use icons make sure you have [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) installed in your project.\n\n```\nnpm install --save react-native-ui-buttons\n```\n\nOR\n\n```bash\nyarn add react-native-ui-buttons\n```\n\n## ⚙️ Getting started\n\n### 🚀 Solid Button\n\n```tsx\nimport {ButtonSolid} from 'react-native-ui-buttons';\n\n\u003cButtonSolid\n    title={'Button Solid'}\n/\u003e\n```\n\n### 🚀 Dual Tone Outline Button\n\n```tsx\nimport {ButtonOutline} from 'react-native-ui-buttons';\n\n\u003cButtonOutline\n    title={'Button Outline'}\n/\u003e\n```\n\n`NOTE:` See [`TestApp`](https://github.com/pettiboy/react-native-ui-buttons/blob/main/TestApp/App.tsx) for more examples.\n\n## Demo\n\n|                                                    Button Solid                                                    |                                                    Button Outline                                                    |\n| :----------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------: |\n| ![alt text](https://github.com/pettiboy/react-native-ui-buttons/blob/main/TestApp/assets/ButtonSolid.png?raw=true) | ![alt text](https://github.com/pettiboy/react-native-ui-buttons/blob/main/TestApp/assets/ButtonOutline.png?raw=true) |\n\n## 💡 Props\n\n1. All [`TouchableOpacityProps`](https://reactnative.dev/docs/touchableopacity#props) are valid.\n2. All props are optional.\n\n### 🎨 Props to customize container styles\n\n| Attributes | Type        | Description                               | Default             |\n| :--------- | :---------- | :---------------------------------------- | :------------------ |\n| `title`    | `string`    | Name of the button                        | -                   |\n| `useColor` | `string`    | rgb() format required                     | `rgb(235, 52, 122)` |\n| `style`    | `ViewStyle` | style will be applied to button container | -                   |\n\n### 🎨 Props to customize container styles (utils)\n\n| Attributes        | Type      | Description                                                                                                                                           | Default                              |\n| :---------------- | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------- |\n| `opacityReducer`  | `number`  | `ButtonSolid`: amount by which opacity of disabled button should be reduced, `ButtonOutline`: ammount by which background of button should be reduced | ButtonSolid `5`, ButtonOutline `3`   |\n| `padding`         | `number`  | padding of button                                                                                                                                     | ButtonOutline `18`, ButtonSolid `19` |\n| `borderRadius`    | `number`  | Border Radius of button                                                                                                                               | `4`                                  |\n| `noDisabledStyle` | `boolean` | if `true` disabled button will be styled same as enabled button                                                                                       | `false`                              |\n\n### 💬 Props to customize text styles\n\n| Attributes           | Type        | Description                                                                                       | Default            |\n| :------------------- | :---------- | :------------------------------------------------------------------------------------------------ | :----------------- |\n| `textStyle`          | `TextStyle` | style will be applied to text                                                                     | -                  |\n| `textOpacityReducer` | `number`    | `(ButtonOutline only)` amount by which opacity of text should be reduced, when button is disabled | `5`                |\n| `textColor`          | `string`    | `(ButtonSolid only)` color of text                                                                | `rgb(255,255,255)` |\n\n### 🔧 Props to manage state of button\n\n| Attributes      | Type      | Description                              | Default |\n| :-------------- | :-------- | :--------------------------------------- | :------ |\n| `disabled`      | `boolean` | set it to `true` when button is disabled | `false` |\n| `buttonLoading` | `boolean` | set it to `true` when button is loading  | `false` |\n\n### 🎞 Props for Icon\n\n| Attributes          | Type     | Description                             | Default                                                  |\n| :------------------ | :------- | :-------------------------------------- | :------------------------------------------------------- |\n| `materialIconRight` | `string` | `name` field for MaterialIcon component | -                                                        |\n| `materialIconLeft`  | `string` | `name` field for MaterialIcon component | -                                                        |\n| `iconColor`         | `string` | Color of icon                           | ButtonOutline `useColor`, ButtonSolid `rgb(255,255,255)` |\n| `iconSize`          | `number` | Size of icon                            | `18`                                                     |\n\n## 📦 (Optional) react-native-vector-icons Installation\n\n1. Install package\n\n```bash\nnpm install --save react-native-vector-icons\n```\n\n### IOS\n\n2. In your `Info.plist` add\n\n```xml\n\u003ckey\u003eUIAppFonts\u003c/key\u003e\n\u003carray\u003e\n    \u003cstring\u003eMaterialIcons.ttf\u003c/string\u003e\n\u003c/array\u003e\n```\n\n3. Install pods and reinstall app\n\n```bash\nnpx pod-install\nnpx react-native run-ios\n```\n\n### Android\n\n2. In your `android/app/build.gradle` add\n\n```gradle\nproject.ext.vectoricons = [\n    iconFontNames: [ 'MaterialIcons.ttf' ]\n]\n\napply from: \"../../node_modules/react-native-vector-icons/fonts.gradle\"\n```\n\n3. Reinstall app\n\n```bash\nnpx react-native run-android\n```\n\n## 📝 Authors\n\n- Hussain Pettiwala ([@pettiboy](https://github.com/pettiboy))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpettiboy%2Freact-native-ui-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpettiboy%2Freact-native-ui-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpettiboy%2Freact-native-ui-buttons/lists"}