Custom Button 2
May 06, 2023
1 min
Property | Type | Default | Description |
---|---|---|---|
active | boolean | false | action buttons visible or not |
autoInactive | boolean | true | Auto hide ActionButtons when ActionButton.Item is pressed. |
position | string | “center” | one of: left center and right |
radius | number | 100 | radius of menu |
bgColor | string | “transparent” | color of overlay when ActionButtons are visible |
buttonColor | string | “rgba(0,0,0,1)” | background color of the +Button (must be rgba value!) |
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 |
onLongPress | function | null | fires, when ActionButton is long pressed |
onOverlayPress | function | null | fires, when Overlay is pressed |
icon | Component | + | Custom component for ActionButton Icon |
backdrop | Component | false | Custom component for use as Backdrop |
degrees | number | 135 | degrees to rotate icon |
Property | Type | Default | Description |
---|---|---|---|
onPress | func | null | required function, triggers when a button is tapped |
buttonColor | string | same as + button | background color of the Button |
startDegree | number | 0 | degrees to start the rotation of the Item |
endDegree | number | 720 | degrees to end the rotation of the Item |
npm i react-native-circle-button --save --force
// import React in our code import React from 'react'; // import all the components we are going to use import { SafeAreaView, StyleSheet, View, Text } from 'react-native'; //Import basic react native elements import CircleButton from 'react-native-circle-button'; const App = () => { return ( <SafeAreaView style={styles.container}> <View style={styles.container}> <CircleButton size={45} primaryColor="" secondaryColor="#459186" onPressButtonTop={() => alert('Top Button Clicked')} onPressButtonRight={() => alert('Right Button Clicked')} onPressButtonBottom={() => alert('Bottom Button Clicked')} onPressButtonLeft={() => alert('Left Button Clicked')} /> </View> </SafeAreaView> ); }; export default App; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white', padding: 10, }, });
Coming Soon…
Quick Links
Legal Stuff