Floating Action Button with Menu Explanation

28 / Mar / 2023 by Aman Manhas 0 comments

Intro

We’ll be rebuilding the starbucks app pay button. Not only does this have a floating button, it has 2 other floating buttons, and a circular background cover that shoots out to allow you to focus on the options. These other 2 floating buttons will appear when user will press the floating pay button with animation.Attached a gif file from where you can visualise how the animation will look like when we press the floating pay button

Image

Setup

A standard setup, react-native-vector-icons library for buttons icons and an animated value. This animated value will only go from 0 to 1 so we can keep our animation reversible.

Add Bottom Button

So first we need to add our main floating action button. We won’t be animating this button, but we will be animating the text.

We’ll position our button in the corner and create a reusable style so all of our buttons will be the same shape and size. This will allow us to hide them behind our button then animate them visible. Then to make our button green we just add our pay style to add a background color.

Additionally we position our text absolutely and render it inside of our button. Without adding any top/left/bottom/right values it’ll float freely but still stay centered.

Add More Buttons

Now let’s add our other buttons. These will need to be animated, so we use an Animated.View and choose the appropriate icons. Because our button class is positioning everything in the same spot, and we have placed these buttons above our pay button in the render, they will be rendered behind our pay button.

The only thing we need to do is specify their background color.

Add Hidden Background

We want a circular animated black opaque background, however, rather than making it hidden via opacity, we’ll just treat it like another button and tuck it behind the rest of the buttons.

  • Basically the same as the button styling.

Setup Animation on Press

Because we don’t need to toggle pointer events on this animation we just need to save off on the instance whether or not our menu is opened or closed. Then decide to animate to 0 or 1. This will produce a reversible animation that also can be interrupted at any point.

  • Our reload button will be closest so we’ll offset it by -70 giving us some padding from the pay button. Our order button will be the last button so we just need to offset it by -140 so it will bypass the reload button and also have some padding.

Additionally we’ll pass in our 0<=>1 animated value into scale so it will be moving and growing at the same time.

Animate Labels

The label animations are the more difficult of the animations. They start hidden in the center of each individual button. However, we don’t want the text to appear over our icons and transition out. This would look bad.

However, what we can do is keep it hidden and keep animating its location. Then once we know it’s cleared the buttons of any overlap, we’ll fade it in. The text will always be offset by -30 and animate to an offset of -90 but to accomplish our fade in we’ll have it happen after our animation is 80% complete. So we’ll make a cliff at that point and then quickly fade it into 1 over the last 20% of the animation.

We also want all of our labels to do the same thing so we can pass the same label style into all of our labels.

Animate Background

Finally, our animated background is simply a scale of our small box. This is an arbitrary number selected, however, you could use math to calculate how many times the background needs to scale before it covers the entire view. I picked a large enough number to cover the screen and then some.

You can download the code from this GitHub link https://github.com/amanmanhas/FloatingActionButton/blob/main/App.tsx

Thanks for reading this blog

FOUND THIS USEFUL? SHARE IT

Leave a Reply

Your email address will not be published. Required fields are marked *