@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
Maintainers
Readme
React Native <AwesomeButton />
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.