npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@chuhoanglong/rn-really-awesome-button

v1.0.6

Published

ReactNative performant component that renders an 60fps animated set of progress enabled 3D UI buttons.

Downloads

1

Readme

React Native <AwesomeButton />

Travis NPM

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

Run the live demo @ expo.io.

| | | | |---|---|---|

Figma File

Import it directly into your Figma project.

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 | | textFontFamily | String | 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

  • Checkout my Full-Stack Web Developer Website
  • Other open source projects @ Code Laboratory
  • A scope of my work @ Web Developer Portfolio

License

MIT. Copyright (c) 2018 Rafael Caferati.