- Notifications
You must be signed in to change notification settings - Fork0
customizable multi-action-button component for react-native
License
NotificationsYou must be signed in to change notification settings
ge-tracker/react-native-action-button
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
customizable multi-action-button component for react-native (I'm going to be maintaining this package since the main one is no longer being maintained).
- Doesn't Work While Android Debugging. See issue#79.
npm i @logvinme/react-native-action-button --save
Linkreact-native-vector-icons native dependencies to your project with:
react-native link react-native-vector-icons
or just:
react-native link
to link all libraries with native dependencies in your project.
First, require it from your app's JavaScript files with:
import ActionButton from'@logvinme/react-native-action-button';
ActionButton component is the main component which wraps everything and provides a couple of props (see Config below).
ActionButton.Item specifies an Action Button. You have to include at least 1ActionButton.Item.
The following Basic example can be found inexample/Basic.
importReact,{Component}from'react';import{StyleSheet,View}from'react-native';importActionButtonfrom'@logvinme/react-native-action-button';importIconfrom'react-native-vector-icons/Ionicons';classAppextendsComponent{render(){return(<Viewstyle={{flex:1,backgroundColor:'#f3f3f3'}}>{/* Rest of the app comes ABOVE the action button component !*/}<ActionButtonbuttonColor="rgba(231,76,60,1)"><ActionButton.ItembuttonColor='#9b59b6'title="New Task"onPress={()=>console.log("notes tapped!")}><Iconname="md-create"style={styles.actionButtonIcon}/></ActionButton.Item><ActionButton.ItembuttonColor='#3498db'title="Notifications"onPress={()=>{}}><Iconname="md-notifications-off"style={styles.actionButtonIcon}/></ActionButton.Item><ActionButton.ItembuttonColor='#1abc9c'title="All Tasks"onPress={()=>{}}><Iconname="md-done-all"style={styles.actionButtonIcon}/></ActionButton.Item></ActionButton></View>);}}conststyles=StyleSheet.create({actionButtonIcon:{fontSize:20,height:22,color:'white',},});
This will create a floating Button in the bottom right corner with 3 action buttons.Also this example usesreact-native-vector-icons for the button Icons.
<ActionButtonbuttonColor="rgba(231,76,60,1)"onPress={()=>{console.log("hi")}}/>
Take a look atthis gist for showing and hiding the floating action button depending on the scroll direction.
| Property | Type | Default | Description |
|---|---|---|---|
| size | number | 56 | use this to change the size of the Button |
| resetToken | any | null | use this to reset the internal component state (expand/collapse) in a re-render cycle. Synchronize the component state. |
| active | boolean | false | action buttons visible or not |
| autoInactive | boolean | true | Auto hide ActionButtons when ActionButton.Item is pressed. |
| hideShadow | boolean | false | use this to hide the default elevation and boxShadow |
| position | string | "right" / "center" | one of:leftcenter andright |
| bgColor | string | "transparent" | background color when ActionButtons are visible |
| buttonColor | string | "rgba(0,0,0,1)" | background color of the +Button(must be rgba value!) |
| spacing | number | 20 | spacing between theActionButton.Items |
| offsetX | number | 30 | offset from the left/right side of the screen |
| offsetY | number | 30 | offset from the bottom/top of the screen |
| btnOutRange | string | props.buttonColor | button background color to animate to |
| outRangeScale | number | 1 | changes size of button during animation |
| onPress | function | null | fires, when ActionButton is tapped |
| onPressIn | function | null | fires, before ActionButton is released |
| onPressOut | function | null | fires, after ActionButton is released |
| onLongPress | function | null | fires, when ActionButton is long pressed |
| renderIcon | function | null | Function to render the component for ActionButton Icon. It is passed a boolean,active, which is true if the FAB has been expanded, and false if it is collapsed, allowing you to show a different icon when the ActionButton Items are expanded. |
| icon | Component | + | Deprecated, userenderIcon Custom component for ActionButton Icon |
| backdrop | Component | false | Custom component for use as Backdrop (i.e.BlurView,VibrancyView) |
| degrees | number | 135 | degrees to rotate icon |
| buttonText | string | + | use this to set a different text on the button |
| buttonTextStyle | style | null | use this to set the textstyle of the button's text |
| onReset | function | null | use this to set the callback that will be called after the button reset's it's items |
| verticalOrientation | string | "up" | direction action buttons should expand. One of:up ordown |
| backgroundTappable | boolean | false | make background tappable in active state of ActionButton |
| activeOpacity | number | 0.85 | activeOpacity props of TouchableOpacity |
| shadowStyle | style | null | The custom shadow style you want to pass in the action button |
| useNativeFeedback | boolean | true | Android: Whether to use a TouchableNativeFeedback |
| fixNativeFeedbackRadius | boolean | false | Android: Activate this to fix TouchableNativeFeedback Ripple UI problems |
| nativeFeedbackRippleColor | string | 'rgba(255,255,255,0.75)' | Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback |
| Property | Type | Default | Description |
|---|---|---|---|
| size | number | parentSize | use this to change the size of the Button |
| title | string | undefined | the title shown next to the button. Whenundefined the title is not hidden |
| onPress | func | null | required function, triggers when a button is tapped |
| buttonColor | string | same as + button | background color of the Button |
| titleColor | string | "#444" | color of title,removed in v2.5. usetextStyle instead |
| titleBgColor | string | "white" | background color of title,removed in v2.5. usetextStyle instead |
| textContainerStyle | style | null | use this to set the textstyle of the button's item text container |
| textStyle | style | null | use this to set the textstyle of the button's item text |
| spaceBetween | number | 15 | use this to set the space between the Button and the text container |
| numberOfLines | number | 1 | use this to set the number of lines on the button's item text |
| activeOpacity | number | 0.85 | activeOpacity props of TouchableOpacity |
| hideLabelShadow | boolean | same as hideShadow | use this to hide the button's label default elevation and boxShadow |
| shadowStyle | style | null | The custom shadow style you want to pass in the action button item |
| useNativeFeedback | boolean | true | Android: Whether to use a TouchableNativeFeedback |
| fixNativeFeedbackRadius | boolean | false | Android: Activate this to fix TouchableNativeFeedback Ripple UI problems |
| nativeFeedbackRippleColor | string | 'rgba(255,255,255,0.75)' | Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback |
About
customizable multi-action-button component for react-native
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Languages
- JavaScript72.1%
- Objective-C18.6%
- Starlark5.6%
- Java3.7%