rcaferati / React Native Really Awesome Button
Licence: mit
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. 📱
Stars: ✭ 988
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Really Awesome Button
React Awesome Button
React button component. Awesome button is a 3D UI, progress, social and share enabled, animated at 60fps, light weight, performant, production ready react UI button component. 🖥️ 📱
Stars: ✭ 943 (-4.55%)
Mutual labels: share, social, animated, component, progress, button
React Progress Button
🌀 Simple react.js component for an inline progress indicator
Stars: ✭ 516 (-47.77%)
Mutual labels: component, progress, button
Vue Social Share
A Vue 2.x social share component
Stars: ✭ 136 (-86.23%)
Mutual labels: share, social, component
React Native Platform Touchable
A wrapper around the various Touchable* components built into React Native core with platform defaults
Stars: ✭ 440 (-55.47%)
Mutual labels: component, button
Gradient Widgets
Flutter widgets wrapped with gradients
Stars: ✭ 290 (-70.65%)
Mutual labels: progress, button
Share.js
一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等
Stars: ✭ 3,534 (+257.69%)
Mutual labels: share, social
Buttonprogressbar Ios
A small and flexible (well documented) UIButton subclass with animated loading progress, and completion animation.
Stars: ✭ 479 (-51.52%)
Mutual labels: animated, progress
Angular Socialshare
Angular social share module, share urls and content on social networks such as facebook, google+, twitter, pinterest and more ... - http://720kb.github.io/angular-socialshare
Stars: ✭ 508 (-48.58%)
Mutual labels: share, social
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-96.56%)
Mutual labels: share, component
Aiflatswitch
Nicely animated flat design switch alternative to UISwitch
Stars: ✭ 904 (-8.5%)
Mutual labels: animated, button
Static Social Buttons
Static Social Buttons for Sharing and Tweeting
Stars: ✭ 18 (-98.18%)
Mutual labels: share, social
Vue Step Progress
A simple Vue component that displays a Progress Bar with labels for each step
Stars: ✭ 26 (-97.37%)
Mutual labels: component, progress
aboutmeinfo-telegram-bot
ℹ️ About Me Info Bot: Share your social media and links on Telegram
Stars: ✭ 20 (-97.98%)
Mutual labels: social, share
netflix-list-exporter
💫 An Extension to export your lists from Netflix to Clipboard area and share it with your friends.
Stars: ✭ 60 (-93.93%)
Mutual labels: share, button
Vue Simple Spinner
A simple, flexible spinner for Vue.js
Stars: ✭ 385 (-61.03%)
Mutual labels: component, progress
Pix
🎨 Pix is an online pixel art community where everyone can unleash their creativity on a 16x16 canvas, built with React-Native for iOS devices. 🚀
Stars: ✭ 86 (-91.3%)
Mutual labels: social, share
react-custom-share
Social media share buttons for ReactJS. Use one of the built-in button themes or create a custom one from scratch.
Stars: ✭ 47 (-95.24%)
Mutual labels: social, share
jQuery-Awesome-Sosmed-Share-Button
Awesome Social Media Share Button With Share Count
Stars: ✭ 58 (-94.13%)
Mutual labels: share, button
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].