Git Product home page Git Product logo

gmertk / react-native-really-awesome-button Goto Github PK

View Code? Open in Web Editor NEW

This project forked from rcaferati/react-native-really-awesome-button

0.0 0.0 0.0 4.75 MB

React Native button component. Awesome Button is a 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. 📱

Home Page: https://expo.io/@rcaferati/react-native-really-awesome-button

License: MIT License

JavaScript 100.00%

react-native-really-awesome-button's Introduction

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

License

MIT. Copyright (c) 2018 Rafael Caferati.

react-native-really-awesome-button's People

Contributors

bwold001 avatar hevertoncastro avatar rcaferati avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.