2.1.1 • Published 4 years ago
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