React Native UI Button
✨ Installation
If you want to use icons make sure you have react-native-vector-icon
installed in your project.
npm install --save 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'}
/>
💡 Props
- All
TouchableOpacityProps
are 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 |
📦 react-native-vector-icons Installation
- Install package
npm install --save react-native-vector-icons
IOS
- In your
Info.plist
add
<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.gradle
add
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
- Reinstall app
npx react-native run-ios