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-buttonsimport {ButtonSolid} from 'react-native-ui-buttons';
<ButtonSolid
title={'Button Solid'}
/>import {ButtonOutline} from 'react-native-ui-buttons';
<ButtonOutline
title={'Button Outline'}
/>NOTE: See TestApp for more examples.
| Button Solid | Button Outline |
|---|---|
 |
 |
- All
TouchableOpacityPropsare valid. - All props are optional.
| 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 | - |
| 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 |
| 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) |
| 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 |
| 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 |
- Install package
npm install --save react-native-vector-icons- 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- 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-android- Hussain Pettiwala (@pettiboy)