{"id":56995,"date":"2023-03-28T09:28:48","date_gmt":"2023-03-28T03:58:48","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=56995"},"modified":"2023-04-05T09:29:57","modified_gmt":"2023-04-05T03:59:57","slug":"floating-action-button-with-menu-explanation","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/floating-action-button-with-menu-explanation\/","title":{"rendered":"Floating Action Button with Menu Explanation"},"content":{"rendered":"

Intro<\/strong><\/p>\n

We\u2019ll 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<\/p>\n

\"Image\"<\/p>\n

Setup<\/strong><\/p>\n

A standard setup,\u00a0react-native-vector-icons library\u00a0<\/strong>for buttons icons and an animated value. This animated value will only go from\u00a00<\/code>\u00a0to\u00a01<\/code>\u00a0so we can keep our animation reversible.<\/p>\n

import<\/span> React<\/span>, {useState} from<\/span> 'react'<\/span>;\r\nimport<\/span> {\r\n  StyleSheet<\/span>,\r\n  Text<\/span>,\r\n  View<\/span>,\r\n  Animated<\/span>,\r\n  TouchableWithoutFeedback<\/span>,\r\n  Image<\/span>,\r\n} from<\/span> 'react-native'<\/span>;\r\nimport<\/span> Icon<\/span> from<\/span> 'react-native-vector-icons\/Ionicons'<\/span>;\r\n\r\nfunction<\/span> App<\/span>(): JSX<\/span>.Element<\/span> {\r\n  const<\/span> [animation] = useState<\/span>(new<\/span> Animated<\/span>.Value<\/span>(0<\/span>));\r\n  return<\/span> (\r\n    <View<\/span> style<\/span>={styles.container}\/<\/span>><\/span><\/span>\r\n  );\r\n}\r\n\r\nconst<\/span> styles = StyleSheet<\/span>.create<\/span>({\r\n  container<\/span>: {\r\n    flex<\/span>: 1<\/span>,\r\n  },\r\nexport<\/span> default<\/span> App<\/span>;<\/span><\/pre>\n
Add Bottom Button<\/strong><\/p>\n
So first we need to add our main floating action button. We won\u2019t be animating this button, but we will be animating the text.<\/p>\n
  <View<\/span> style<\/span>={styles.container}<\/span>><\/span>\r\n    <TouchableWithoutFeedback<\/span> onPress<\/span>={toggleOpen}<\/span>><\/span>\r\n      <View<\/span> style<\/span>={[styles.button,<\/span> styles.pay<\/span>]}><\/span>\r\n        <Animated.Text<\/span> style<\/span>={[styles.label]}<\/span>><\/span>Pay<\/Animated.Text<\/span>><\/span>\r\n        <Text<\/span> style<\/span>={styles.payText}<\/span>><\/span>$5.00<\/Text<\/span>><\/span>\r\n      <\/View<\/span>><\/span>\r\n    <\/TouchableWithoutFeedback<\/span>><\/span>\r\n  <\/View<\/span>><\/span><\/span><\/pre>\n
We\u2019ll 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\u00a0pay<\/code>\u00a0style to add a background color.<\/p>\n
Additionally we position our text absolutely and render it inside of our button. Without adding any\u00a0top\/left\/bottom\/right<\/code>\u00a0values it’ll float freely but still stay centered.<\/p>\n
label: {\r\n  color<\/span>: \"#FFF\"<\/span>,\r\n  position<\/span>: \"absolute\"<\/span>,\r\n  fontSize<\/span>: 18<\/span>,\r\n  backgroundColor<\/span>: \"transparent\"<\/span>,\r\n},\r\nbutton: {\r\n    width<\/span>: 60<\/span>,\r\n    height<\/span>: 60<\/span>,\r\n    alignItems<\/span>: \"center\"<\/span>,\r\n    justifyContent<\/span>: \"center\"<\/span>,\r\n    shadowColor<\/span>: \"#333\"<\/span>,\r\n    shadowOpacity<\/span>: 0.1<\/span>,\r\n    shadowOffset<\/span>: { x<\/span>: 2<\/span>, y<\/span>: 0<\/span> },\r\n    shadowRadius: 2,\r\n    borderRadius: 30,\r\n    position<\/span>: \"absolute\"<\/span>,\r\n    bottom<\/span>: 20<\/span>,\r\n    right<\/span>: 20<\/span>,\r\n  },\r\n  payText: {\r\n    color<\/span>: \"#FFF\"<\/span>,\r\n  },\r\n  pay: {\r\n    backgroundColor: \"#00B15E\",\r\n  },<\/span><\/pre>\n
Add More Buttons<\/strong><\/p>\n
Now let’s add our other buttons. These will need to be animated, so we use an Animated.View<\/code>\u00a0and choose the appropriate icons. Because our\u00a0button<\/code>\u00a0class is positioning everything in the same spot, and we have placed these buttons above our\u00a0pay<\/code> button in the render, they will be rendered behind our\u00a0pay<\/code>\u00a0button.<\/p>\n
<View<\/span> style<\/span>={styles.container}<\/span>><\/span>\r\n    <TouchableWithoutFeedback<\/span>><\/span>\r\n      <Animated.View<\/span> style<\/span>={[styles.button,<\/span> styles.other<\/span>]}><\/span>\r\n        <Animated.Text<\/span> style<\/span>={[styles.label]}<\/span>><\/span>Order<\/Animated.Text<\/span>><\/span>\r\n        <Icon<\/span> name<\/span>=\"food-fork-drink\"<\/span> size<\/span>={20}<\/span> color<\/span>=\"#555\"<\/span> \/><\/span>\r\n      <\/Animated.View<\/span>><\/span>\r\n    <\/TouchableWithoutFeedback<\/span>><\/span>\r\n    <TouchableWithoutFeedback<\/span>><\/span>\r\n      <Animated.View<\/span> style<\/span>={[styles.button,<\/span> styles.other<\/span>]}><\/span>\r\n        <Animated.Text<\/span> style<\/span>={[styles.label]}<\/span>><\/span>Reload<\/Animated.Text<\/span>><\/span>\r\n        <Icon<\/span> name<\/span>=\"reload\"<\/span> size<\/span>={20}<\/span> color<\/span>=\"#555\"<\/span> \/><\/span>\r\n      <\/Animated.View<\/span>><\/span>\r\n    <\/TouchableWithoutFeedback<\/span>><\/span>\r\n    <TouchableWithoutFeedback<\/span> onPress<\/span>={toggleOpen}<\/span>><\/span>\r\n      <View<\/span> style<\/span>={[styles.button,<\/span> styles.pay<\/span>]}><\/span>\r\n        <Animated.Text<\/span> style<\/span>={[styles.label]}<\/span>><\/span>Pay<\/Animated.Text<\/span>><\/span>\r\n        <Text<\/span> style<\/span>={styles.payText}<\/span>><\/span>$5.00<\/Text<\/span>><\/span>\r\n      <\/View<\/span>><\/span>\r\n    <\/TouchableWithoutFeedback<\/span>><\/span>\r\n  <\/View<\/span>><\/span><\/span><\/pre>\n
The only thing we need to do is specify their background color.<\/p>\n
other: {\r\n    backgroundColor: \"#FFF\"<\/span>,\r\n  }<\/span><\/pre>\n
Add Hidden Background<\/strong><\/p>\n
We want a circular animated black opaque background, however, rather than making it hidden via opacity, we\u2019ll just treat it like another button and tuck it behind the rest of the buttons.<\/p>\n
<View<\/span> style<\/span>={styles.container}<\/span>><\/span>\r\n        <Animated.View<\/span> style<\/span>={[styles.background,<\/span> bgStyle<\/span>]} \/><\/span>\r\n        <TouchableWithoutFeedback<\/span>><\/span>\r\n          <Animated.View<\/span> style<\/span>={[styles.button,<\/span> styles.other<\/span>, orderStyle<\/span>]}><\/span>\r\n            <Animated.Text<\/span> style<\/span>={[styles.label,<\/span> labelStyle<\/span>]}><\/span>Order<\/Animated.Text<\/span>><\/span>\r\n            <Icon<\/span> name<\/span>=\"food-fork-drink\"<\/span> size<\/span>={20}<\/span> color<\/span>=\"#555\"<\/span> \/><\/span>\r\n          <\/Animated.View<\/span>><\/span>\r\n        <\/TouchableWithoutFeedback<\/span>><\/span>\r\n        <TouchableWithoutFeedback<\/span>><\/span>\r\n          <Animated.View<\/span> style<\/span>={[styles.button,<\/span> styles.other<\/span>, reloadStyle<\/span>]}><\/span>\r\n            <Animated.Text<\/span> style<\/span>={[styles.label,<\/span> labelStyle<\/span>]}><\/span>Reload<\/Animated.Text<\/span>><\/span>\r\n            <Icon<\/span> name<\/span>=\"reload\"<\/span> size<\/span>={20}<\/span> color<\/span>=\"#555\"<\/span> \/><\/span>\r\n          <\/Animated.View<\/span>><\/span>\r\n        <\/TouchableWithoutFeedback<\/span>><\/span>\r\n        <TouchableWithoutFeedback<\/span> onPress<\/span>={toggleOpen}<\/span>><\/span>\r\n          <View<\/span> style<\/span>={[styles.button,<\/span> styles.pay<\/span>]}><\/span>\r\n            <Animated.Text<\/span> style<\/span>={[styles.label,<\/span> labelStyle<\/span>]}><\/span>Pay<\/Animated.Text<\/span>><\/span>\r\n            <Text<\/span> style<\/span>={styles.payText}<\/span>><\/span>$5.00<\/Text<\/span>><\/span>\r\n          <\/View<\/span>><\/span>\r\n        <\/TouchableWithoutFeedback<\/span>><\/span>\r\n  <\/View<\/span>><\/span><\/span><\/pre>\n