/react-native-button

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

Primary LanguageJavaScriptMIT LicenseMIT

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": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": "0.0.31",
"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

Property Type Default Description
outline boolean true make the button outline
solid boolean false make the button with a solid background and a shadow
gradient boolean false make the button with a gradient background and a shadow
width number 150 change the button's width
height number 50 change the button's height
borderRadius number 32 change the button's border radius
text string null set the button's text
textColor color #757575 change the button's text color
textStyle style style set your own style for the button's style
borderWidth number 0.3 change the outline's border width
borderColor color #757575 change the outline's border color
shadowColor color #757575 change the solid and gradient's shadow color
backgroundColor color #757575 change the solid's background color
iconDisable boolean false disable the left icon if you want

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

  • LICENSE
  • 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.