49

GitHub - rcaferati/react-native-really-awesome-button: ? React Native button com...

 5 years ago
source link: https://github.com/rcaferati/react-native-really-awesome-button
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

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

demo-button-blue-new.gif?raw=truedemo-button-rick.gif?raw=truedemo-button-cartman.gif?raw=true

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

react-awesome-button-customizer.png?raw=true

About the Author

Rafael Caferati

License

MIT. Copyright (c) 2018 Rafael Caferati.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK