https://github.com/pettiboy/react-native-ui-buttons
Functional, simple and customizable UI buttons for react native. Also contains loading functionality and automatically changes color for dual tone buttons. TypeScript support.
https://github.com/pettiboy/react-native-ui-buttons
android buttons dual-tone-buttons icon-button ios loading-indicator mobile react react-native react-native-component react-native-typescript typescript ui
Last synced: about 1 year ago
JSON representation
Functional, simple and customizable UI buttons for react native. Also contains loading functionality and automatically changes color for dual tone buttons. TypeScript support.
- Host: GitHub
- URL: https://github.com/pettiboy/react-native-ui-buttons
- Owner: pettiboy
- License: mit
- Created: 2021-10-10T18:21:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-20T16:24:45.000Z (almost 4 years ago)
- Last Synced: 2024-10-06T15:11:31.243Z (over 1 year ago)
- Topics: android, buttons, dual-tone-buttons, icon-button, ios, loading-indicator, mobile, react, react-native, react-native-component, react-native-typescript, typescript, ui
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-ui-buttons
- Size: 2.14 MB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native UI Buttons
[](https://npmjs.com/package/react-native-ui-buttons) [](https://npmjs.com/package/react-native-ui-buttons)
[](https://raw.githubusercontent.com/pettiboy/react-native-ui-buttons/main/LICENSE)
[](https://github.com/pettiboy/react-native-ui-buttons/pulls)
## ✨ Installation
If 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.
```
npm install --save react-native-ui-buttons
```
OR
```bash
yarn add react-native-ui-buttons
```
## ⚙️ Getting started
### 🚀 Solid Button
```tsx
import {ButtonSolid} from 'react-native-ui-buttons';
```
### 🚀 Dual Tone Outline Button
```tsx
import {ButtonOutline} from 'react-native-ui-buttons';
```
`NOTE:` See [`TestApp`](https://github.com/pettiboy/react-native-ui-buttons/blob/main/TestApp/App.tsx) for more examples.
## Demo
| Button Solid | Button Outline |
| :----------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------: |
|  |  |
## 💡 Props
1. All [`TouchableOpacityProps`](https://reactnative.dev/docs/touchableopacity#props) are valid.
2. All props are optional.
### 🎨 Props to customize container styles
| Attributes | Type | Description | Default |
| :--------- | :---------- | :---------------------------------------- | :------------------ |
| `title` | `string` | Name of the button | - |
| `useColor` | `string` | rgb() format required | `rgb(235, 52, 122)` |
| `style` | `ViewStyle` | style will be applied to button container | - |
### 🎨 Props to customize container styles (utils)
| Attributes | Type | Description | Default |
| :---------------- | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------- |
| `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` |
| `padding` | `number` | padding of button | ButtonOutline `18`, ButtonSolid `19` |
| `borderRadius` | `number` | Border Radius of button | `4` |
| `noDisabledStyle` | `boolean` | if `true` disabled button will be styled same as enabled button | `false` |
### 💬 Props to customize text styles
| Attributes | Type | Description | Default |
| :------------------- | :---------- | :------------------------------------------------------------------------------------------------ | :----------------- |
| `textStyle` | `TextStyle` | style will be applied to text | - |
| `textOpacityReducer` | `number` | `(ButtonOutline only)` amount by which opacity of text should be reduced, when button is disabled | `5` |
| `textColor` | `string` | `(ButtonSolid only)` color of text | `rgb(255,255,255)` |
### 🔧 Props to manage state of button
| Attributes | Type | Description | Default |
| :-------------- | :-------- | :--------------------------------------- | :------ |
| `disabled` | `boolean` | set it to `true` when button is disabled | `false` |
| `buttonLoading` | `boolean` | set it to `true` when button is loading | `false` |
### 🎞 Props for Icon
| Attributes | Type | Description | Default |
| :------------------ | :------- | :-------------------------------------- | :------------------------------------------------------- |
| `materialIconRight` | `string` | `name` field for MaterialIcon component | - |
| `materialIconLeft` | `string` | `name` field for MaterialIcon component | - |
| `iconColor` | `string` | Color of icon | ButtonOutline `useColor`, ButtonSolid `rgb(255,255,255)` |
| `iconSize` | `number` | Size of icon | `18` |
## 📦 (Optional) react-native-vector-icons Installation
1. Install package
```bash
npm install --save react-native-vector-icons
```
### IOS
2. In your `Info.plist` add
```xml
UIAppFonts
MaterialIcons.ttf
```
3. Install pods and reinstall app
```bash
npx pod-install
npx react-native run-ios
```
### Android
2. In your `android/app/build.gradle` add
```gradle
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
3. Reinstall app
```bash
npx react-native run-android
```
## 📝 Authors
- Hussain Pettiwala ([@pettiboy](https://github.com/pettiboy))