feat(buttons): implemented floating button

Author: computools-anastasiia-nahaiska

example/package.json

@@ -13,7 +13,8 @@
     "react-native": "0.72.4",
     "react-native-gesture-handler": "2.17.1",
     "react-native-reanimated": "3.5.1",
-    "react-native-safe-area-context": "4.10.7"
+    "react-native-safe-area-context": "4.10.7",
+    "react-native-svg": "15.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/buttons/floating-button/FloatingButton.component.tsx

@@ -0,0 +1,78 @@
+import React, {useMemo} from 'react';
+import Animated, {FadeInRight, LinearTransition, FadeOutRight} from 'react-native-reanimated';
+import {TouchableOpacity, type StyleProp, type TextStyle, type TouchableOpacityProps} from 'react-native';
+
+import {useTheme} from '../../theme/useTheme.hook';
+import {type IconProps} from '../../icons/icon-props';
+import {EditIcon} from '../../icons/edit-icon/EditIcon.component';
+import {useTypography} from '../../typography/useTypography.component';
+import {getBaseFloatingButtonShape, styles} from './floating-button.styles';
+
+export enum FloatingButtonSize {
+  SMALL = 'SMALL',
+  BIG = 'BIG',
+}
+
+export enum FloatingButtonType {
+  SURFACE = 'SURFACE',
+  PRIMARY = 'PRIMARY',
+  SECONDARY = 'SECONDARY',
+  TERTIARY = 'TERTIARY',
+}
+
+export interface FloatingButtonProps extends TouchableOpacityProps {
+  type?: FloatingButtonType;
+  label?: string;
+  extended?: boolean;
+  Icon?: React.FC<IconProps>;
+  iconProps?: IconProps;
+  size?: FloatingButtonSize;
+  labelStyle?: StyleProp<TextStyle>;
+}
+
+export const FloatingButton: React.FC<FloatingButtonProps> = ({
+  label,
+  iconProps,
+  labelStyle,
+  Icon = EditIcon,
+  extended = true,
+  size = FloatingButtonSize.SMALL,
+  type = FloatingButtonType.PRIMARY,
+  style,
+  ...props
+}) => {
+  const {labelLarge} = useTypography();
+  const {shadow, primaryContainer, surfaceContainer, secondaryContainer, tertiaryContainer, primary} = useTheme();
+
+  const colors = useMemo(
+    () => ({
+      [FloatingButtonType.SURFACE]: {backgroundColor: surfaceContainer.backgroundHigh, iconColor: primary.background},
+      [FloatingButtonType.PRIMARY]: {backgroundColor: primaryContainer.background, iconColor: primaryContainer.text},
+      [FloatingButtonType.SECONDARY]: {backgroundColor: secondaryContainer.background, iconColor: secondaryContainer.text},
+      [FloatingButtonType.TERTIARY]: {backgroundColor: tertiaryContainer.background, iconColor: tertiaryContainer.text},
+    }),
+    []
+  );
+
+  const [paddingStart, paddingEnd] = label && extended ? [16, 20] : [0, 0];
+
+  return (
+    <TouchableOpacity {...props}>
+      <Animated.View
+        layout={LinearTransition}
+        style={[
+          styles.container,
+          {backgroundColor: colors[type].backgroundColor, shadowColor: shadow, paddingStart, paddingEnd},
+          getBaseFloatingButtonShape(size).container,
+          style,
+        ]}>
+        {Icon ? <Icon size={24} color={colors[type].iconColor} {...iconProps} /> : null}
+        {label && extended ? (
+          <Animated.Text layout={LinearTransition} exiting={FadeOutRight} entering={FadeInRight} style={[labelLarge, labelStyle]}>
+            {label}
+          </Animated.Text>
+        ) : null}
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};

src/buttons/floating-button/floating-button.styles.ts

@@ -0,0 +1,38 @@
+import {StyleSheet, type ViewStyle} from 'react-native';
+
+import {FloatingButtonSize} from './FloatingButton.component';
+
+export const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 1,
+    bottom: 0,
+    right: 0,
+
+    gap: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    overflow: 'hidden',
+
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 5,
+    elevation: 3,
+  },
+});
+
+export const getBaseFloatingButtonShape = (size: FloatingButtonSize) => {
+  const buttonSizes: Record<FloatingButtonSize, ViewStyle> = {
+    [FloatingButtonSize.SMALL]: {minWidth: 40, height: 40, borderRadius: 12},
+    [FloatingButtonSize.BIG]: {minWidth: 56, height: 56, borderRadius: 16},
+  };
+
+  return StyleSheet.create({
+    container: buttonSizes[size] || buttonSizes[FloatingButtonSize.SMALL],
+  });
+};

src/icons/edit-icon/EditIcon.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Svg, {Path} from 'react-native-svg';
+
+import {path} from './path.json';
+import type {IconProps} from '../icon-props';
+
+const DEFAULT_SIZE = 24;
+const DEFAULT_COLOR = '#000';
+
+export const EditIcon: React.FC<IconProps> = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE}) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size}>
+    <Path fill={color} d={path} />
+  </Svg>
+);

src/icons/edit-icon/path.json

@@ -0,0 +1,3 @@
+{
+  "path": "M19.060 3.59l1.35 1.35c0.79 0.78 0.79 2.050 0 2.83l-13.23 13.23h-4.18v-4.18l13.23-13.23c0.78-0.78 2.050-0.78 2.83 0zM5 19l1.41 0.060 9.82-9.83-1.41-1.41-9.82 9.82v1.36z"
+}