React Native UI Buttons
✨
Installation
If you want to use icons make sure you have react-native-vector-icons installed in your project.
npm install --save react-native-ui-buttons
OR
yarn add react-native-ui-buttons
⚙️
Getting started
🚀
Solid Button
import {ButtonSolid} from 'react-native-ui-buttons';
<ButtonSolid
title={'Button Solid'}
/>
🚀
Dual Tone Outline Button
import {ButtonOutline} from 'react-native-ui-buttons';
<ButtonOutline
title={'Button Outline'}
/>
NOTE: See TestApp for more examples.
💡
Props
- All
TouchableOpacityPropsare valid. - 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
- Install package
npm install --save react-native-vector-icons
IOS
- In your
Info.plistadd
<key>UIAppFonts</key>
<array>
<string>MaterialIcons.ttf</string>
</array>
- Install pods and reinstall app
npx pod-install
npx react-native run-ios
Android
- In your
android/app/build.gradleadd
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
- Reinstall app
npx react-native run-ios
📝
Authors
- Hussain Pettiwala (@pettiboy)
35 Dec 30, 2022
22k Jan 4, 2023
106.8k Jan 3, 2023
2 Mar 17, 2022
14.2k Dec 28, 2022
2 Sep 24, 2022
156 Dec 8, 2022
121 Jan 2, 2023
33.5k Dec 31, 2022
15.6k Jan 3, 2023