Circular Action Menu Button

By Utkarsh Lubal

Published in Buttons

August 14, 2022

1 min read

Introduction

ActionButton Configuration:

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

ActionButton.Item:

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

Installation

npm i react-native-circle-button --save --force

Example

// 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,
  },
});