Installation
Add the dependency:
React Native
npm i @freakycoder/react-native-button
Peer 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
- [x]
LICENSE - [x]
Typescript Challenge & Code Cleaning - [ ] Expo Version
- [ ] Write an article about the lib on Medium
Change Log
0.2.0 (2019-09-07)
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.