npm

Join us for the upcoming webinar, "Enterprise JavaScript done right: the tools you love, the security you need."Sign up here »

react-native-really-awesome-button

1.4.2 • Public • Published

React Native <AwesomeButton />

Travis NPM

react-native-really-awesome-button is a performant, extendable, production ready ReactNative component that renders an animated set of 3D UI buttons.

Run the live demo @ expo.io

Installation

npm install --save react-native-really-awesome-button

Usage

Basic

import AwesomeButton from "react-native-really-awesome-button";
 
function Button() {
  return <AwesomeButton>Text</AwesomeButton>;
}

Progress

import AwesomeButton from "react-native-really-awesome-button";
 
function Button() {
  return (
    <AwesomeButton
      progress
      onPress={next => {
        /** Do Something **/
        next();
      }}
    >
      Text
    </AwesomeButton>
  );
}

Custom Children

import AwesomeButton from "react-native-really-awesome-button";
 
function Button() {
  return (
    <AwesomeButton>
      <Image source="require('send-icon.png)" />
      <Text>Send it</Text>
    </AwesomeButton>
  );
}

Importing a specific theme

  import AwesomeButtonRick from 'react-native-really-awesome-button/src/themes/rick';
 
  function Button() {
    return (
     <AwesomeButtonRick type="primary">Rick's Primary Button</AwesomeButtonRick>
     <AwesomeButtonRick type="secondary">Rick's Secondary Button</AwesomeButtonRick>
    );
  }

Extra Content placement

You can use the Extra Content prop to render a component inside the button content body. This could be useful to render an image or gradient background

import AwesomeButton from "react-native-really-awesome-button";
import LinearGradient from "react-native-linear-gradient";
 
function Button() {
  return (
    <AwesomeButton
      ExtraContent={
        <LinearGradient
          colors={["#4C63D2", "#BC3081", "#F47133", "#FED576"]}
        />
      }
    >
      <Text>Instagram</Text>
    </AwesomeButton>
  );
}

Props

Attributes Type Default Description
activityColor String #FFFFFF Button activity indicator color
activeOpacity Number 1 Button active state opacity
backgroundActive String #C0C0C0 Button active state background-color
backgroundColor String #C0C0C0 Button content background-color
backgroundDarker String #9F9F9F Button bottom-front-face background-color
backgroundShadow String #C0C0C0 Button bottom shaddow background-color
backgroundPlaceholder String #C0C0C0 Button placeholder background-color
backgroundProgress String #C0C0C0 Button progress bar background-color
borderColor String null Button border-color
borderRadius Number 4 Button border-radius
borderWidth Number 0 Button border-width
height Number 50 Button height
width Number null Setting width to null mirrors an auto behaviour
paddingHorizontal Number 12 Sets the button horizontal padding
paddingTop Number 0 Sets the button padding top
paddingBottom Number 0 Sets the button padding bottom
stretch Boolean false When set to true together with width set to null the button fills it's parent component width
disabled Boolean true Button disabled state: cancels animation and onPress func
raiseLevel Number 4 Button 3D raise level
ExtraContent Node null Renders a custom component inside the button content body
springRelease Boolean true Button uses spring on the release animation
onPress Function null Button onPress function. It receives a next argument when the progress prop is set to true
progress Boolean false When set to true enables progress animation
progressLoadingTime Number 3000 Number in ms for the maximum progress bar animation time
textColor String #FFFFFF Button default label text color
textLineHeight Number 20 Button default label text line height
textSize Number 16 Button default label text font size
textFamily Number null Button default label text font family
style Style null Button container custom styles

Web version

Checkout the web version of the Awesome Button UI component at rcaferati/react-awesome-button

About the Author

Rafael Caferati

License

MIT. Copyright (c) 2018 Rafael Caferati.

install

npm i react-native-really-awesome-button

Downloadsweekly downloads

517

version

1.4.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability