1.0.4 ā¢ Published 5 years ago
@freakycoder/react-native-button v1.0.4
Installation
Add the dependency:
React Native
npm i @freakycoder/react-native-buttonPeer Dependencies
IMPORTANT! You need install them
"react-native-vector-icons": ">= 6.x.x",
"react-native-linear-gradient": ">= 2.5.x",
"react-native-dynamic-vector-icons": ">= x.x.x"Button Component Options
- Button (ClassicButton)
- GooglePlayButton (Material Design 2)
Import
import { Button, GooglePlayButton } from "@freakycoder/react-native-button";GooglePlayButton Usage (Material Design 2)
Solid
<GooglePlayButton text="Open" textColor="#fff" rippleColor="white" />Outline
<GooglePlayButton outline text="Uninstall" />Button Usage (Classic Button)
Gradient Button Usage
<Button gradient textColor="white" shadowColor="#ff738b" />Solid Background Usage
<Button
solid
textColor="white"
shadowColor="#ff738b"
backgroundColor="#FFAFBD"
/>Outline Button Usage
<Button outline color="#ff738b" textColor="#ff738b" borderColor="#ff738b" />Configuration - Props
Button Props
| Property | Type | Default | Description |
|---|---|---|---|
| text | string | null | set the button's text |
| solid | boolean | false | make the button with a solid background and a shadow |
| outline | boolean | true | make the button outline |
| gradient | boolean | false | make the button with a gradient background and a shadow |
| iconDisable | boolean | false | disable the left icon if you want |
| backgroundColor | color | #757575 | change the solid's background color |
| style | style | default | set/override the style for the button's style |
| textStyle | style | default | set/override style for the button's text style |
| shadowStyle | style | default | set/override style for the button's shadow style |
| outlineStyle | style | default | set/override style for the button's outline style |
GooglePlayButton Props
| Property | Type | Default | Description |
|---|---|---|---|
| text | string | null | set the button's text |
| solid | boolean | false | make the button with a solid background and a shadow |
| outline | boolean | true | make the button outline |
| gradient | boolean | false | make the button with a gradient background and a shadow |
| iconDisable | boolean | false | disable the left icon if you want |
| backgroundColor | color | #757575 | change the solid's background color |
| style | style | default | set/override the style for the button's style |
| textStyle | style | default | set/override style for the button's text style |
| textColor | color | default | set button's text color |
| shadowStyle | style | default | set/override style for the button's shadow style |
| outlineStyle | style | default | set/override style for the button's outline style |
| onPress | function | default | set the onPress functionality |
Icon Props
| Property | Type | Default | Description |
|---|---|---|---|
| name | string | star | change the icon name from React Native Vector Icons |
| type | string | FontAwesome | change the icon type from React Native Vector Icons |
| color | color | white | change the icon color |
| size | number | 15 | change the icon size |
ToDos
LICENSETypescript Challenge & Code Cleaning- Expo Version
- Write an article about the lib on Medium
Change Log
0.2.0 (2019-09-07)
ā BREAKING CHANGE: Way of import is changed! GooglePlayButton with newest Material Design 2 is added š
Merged pull requests:
- Bump eslint-utils from 1.4.0 to 1.4.2 in /example #1 (dependabot[bot])
0.0.15 (2019-08-17)
* This Change Log was automatically generated by github_changelog_generator
Author
FreakyCoder, kurayogun@gmail.com
License
React Native Button Library is available under the MIT license. See the LICENSE file for more info.