@freakycoder/react-native-button

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)

Full Changelog

⚠ 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, [e-mail]

License

React Native Button Library is available under the MIT license. See the LICENSE file for more info.