
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





