HomeOur TeamContact

Circular Action Menu Button

By Utkarsh Lubal
Published in Buttons
August 14, 2022
1 min read
Circular Action Menu Button

Table Of Contents

01
Introduction
02
Installation
03
Example
04
Tutorial

Introduction

ActionButton Configuration:
PropertyTypeDefaultDescription
activebooleanfalseaction buttons visible or not
autoInactivebooleantrueAuto hide ActionButtons when ActionButton.Item is pressed.
positionstring“center”one of: left center and right
radiusnumber100radius of menu
bgColorstring“transparent”color of overlay when ActionButtons are visible
buttonColorstring“rgba(0,0,0,1)”background color of the +Button (must be rgba value!)
btnOutRangestringprops.buttonColorbutton background color to animate to
outRangeScalenumber1changes size of button during animation
onPressfunctionnullfires, when ActionButton is tapped
onLongPressfunctionnullfires, when ActionButton is long pressed
onOverlayPressfunctionnullfires, when Overlay is pressed
iconComponent+Custom component for ActionButton Icon
backdropComponentfalseCustom component for use as Backdrop
degreesnumber135degrees to rotate icon
ActionButton.Item:
PropertyTypeDefaultDescription
onPressfuncnullrequired function, triggers when a button is tapped
buttonColorstringsame as + buttonbackground color of the Button
startDegreenumber0degrees to start the rotation of the Item
endDegreenumber720degrees 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,
  },
});

Tutorial

Coming Soon…


Previous Article
Date Picker
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Custom Button 2
Custom Button 2
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media