@freakycoder/react-native-button

1.0.4 • Public • Published

React Native Button

Battle Tested ✅

Fully customizable, Gradient, Outline and Solid Button for React Native.

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Button 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:

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.

Package Sidebar

Install

npm i @freakycoder/react-native-button

Weekly Downloads

1

Version

1.0.4

License

MIT

Unpacked Size

49.7 kB

Total Files

28

Last publish

Collaborators

  • freakycoder