@masumdev/rn-fab

A highly customizable Floating Action Button (FAB) component for React Native. Supports multiple variants including single, extended, stacked, clustered, and doted layouts. Built with smooth animations and optimized for both iOS and Android platforms.

Demo

Youtube Tutorial

Features

• 🚀 Multiple FAB variants (Single, Extended, Stacked, Clustered, Doted)
• 🎨 Customizable themes (Light/Dark)
• 🔄 Smooth animations and transitions
• 📱 Works on iOS and Android
• 📚 TypeScript support
• 🎯 Support for custom icons and components
• 🔍 Flexible positioning and styling

Installation

Prerequisites

1. Make sure you have React Native project set up with the following peer dependencies:

   {
     "react": "^18.2.0",
     "react-native": "^0.76.9",
     "react-native-reanimated": "^3.16.7",
   }

   npm install react-native-reanimated
   # or
   yarn add react-native-reanimated
   # or
   pnpm add react-native-reanimated
   # or
   bun add react-native-reanimated

2. Reanimated plugin setup:

   If you are using Expo, you need to configure the Reanimated plugin in your babel.config.js file. Add the following configuration:

   module.exports = function(api) {
     api.cache(true);
     return {
       presets: ['babel-preset-expo'],
       plugins: ['react-native-reanimated/plugin'], // Add this line
     };
   };

3. Install the library:

   npm install @masumdev/rn-fab
   # or
   yarn add @masumdev/rn-fab
   # or
   pnpm install @masumdev/rn-fab
   # or
   bun add @masumdev/rn-fab

Usage

Basic Setup

import { Fab } from '@masumdev/rn-fab';
import { View } from 'react-native';
import { PlusIcon, EditIcon, TrashIcon } from 'lucide-react-native'; // or any icon library

// Single FAB
export const SingleFAB = () => (
  <Fab
    variant="single"
    icon={<PlusIcon color="white" />}
    onPress={() => console.log('FAB pressed')}
    theme="light"
    style={{ backgroundColor: '#007AFF' }}
  />
);

// Extended FAB with label
export const ExtendedFAB = () => (
  <Fab
    variant="extended"
    items={[
      {
        icon: <EditIcon color="white" />,
        label: "Edit",
        onPress: () => console.log('Edit pressed')
      }
    ]}
    theme="light"
  />
);

// Stacked FAB
export const StackedFAB = () => (
  <Fab
    variant="stacked"
    items={[
      {
        icon: <EditIcon color="white" />,
        onPress: () => console.log('Edit')
      },
      {
        icon: <TrashIcon color="white" />,
        onPress: () => console.log('Delete')
      }
    ]}
    theme="light"
  />
);

Configuration Options

Each FAB variant supports these common props:

type CommonProps = {
  theme?: 'light' | 'dark';           // Theme variant
  style?: ViewStyle;                   // Custom styles
  containerStyle?: ViewStyle;          // Container styles
  plusIcon?: React.ReactNode;          // Custom plus icon
  isOpen?: (prev: boolean) => void;    // Open state callback
};

// Variant-specific props are also available
type FabItem = {
  icon: React.ReactNode;          // Icon component
  onPress: () => void;                 // Press handler
  label?: string;                      // Label (for extended/clustered)
};

Advanced Usage

// Clustered FAB with labels
const ClusteredFAB = () => (
  <Fab
    variant="clustered"
    items={[
      {
        icon: <CameraIcon color="white" />,
        label: "Camera",
        onPress: () => console.log('Camera')
      },
      {
        icon: <GalleryIcon color="white" />,
        label: "Gallery",
        onPress: () => console.log('Gallery')
      }
    ]}
    theme="light"
    isOpen={(open) => console.log('FAB is open:', open)}
  />
);

// Doted FAB with custom plus icon
const DotedFAB = () => (
  <Fab
    variant="doted"
    items={[
      {
        icon: <HomeIcon color="white" />,
        onPress: () => console.log('Home')
      },
      {
        icon: <SettingsIcon color="white" />,
        onPress: () => console.log('Settings')
      }
    ]}
    theme="light"
    plusIcon={<CustomPlusIcon />}
  />
);

API Reference

Common Props

Props available for all FAB variants:

| Prop | Type | Default | Description | |------|------|---------|-------------| | theme | 'light' | 'dark' | 'light' | FAB display theme | | style | ViewStyle | - | Custom styles for FAB | | containerStyle | ViewStyle | - | Custom styles for FAB container | | plusIcon | ReactNode | - | Custom icon for plus button | | isOpen | (prev: boolean) => void | - | Callback when FAB is opened/closed |

FAB Variants

Single FAB

Basic FAB with a single action.

| Prop | Type | Required | Description | |------|------|----------|-------------| | variant | 'single' | Yes | FAB variant type | | icon | ReactNode | No | Icon component | | onPress | () => void | No | Callback when FAB is pressed |

Extended FAB

FAB with text label next to the icon.

| Prop | Type | Required | Description | |------|------|----------|-------------| | variant | 'extended' | Yes | FAB variant type | | items | Array | Yes | Array of 1-3 FAB items |

Tipe ExtendedItem:

{
  icon: ReactNode;     // Icon component
  onPress: () => void;      // Callback when item is pressed
  label: string;            // Text label
}

Stacked FAB

Vertically stacked FAB.

| Prop | Type | Required | Description | |------|------|----------|-------------| | variant | 'stacked' | Yes | FAB variant type | | items | Array | Yes | Array of 1-3 FAB items |

Tipe StackedItem:

{
  icon: ReactNode;     // Icon component
  onPress: () => void;      // Callback when item is pressed
}

Clustered FAB

FAB with labels arranged in an arc.

| Prop | Type | Required | Description | |------|------|----------|-------------| | variant | 'clustered' | Yes | FAB variant type | | items | Array | Yes | Array of 1-3 FAB items |

Tipe ClusteredItem:

{
  icon: ReactNode;     // Icon component
  onPress: () => void;      // Callback when item is pressed
  label: string;            // Text label
}

Doted FAB

FAB with dot indicators.

| Prop | Type | Required | Description | |------|------|----------|-------------| | variant | 'doted' | Yes | FAB variant type | | items | Array | Yes | Array of 1-3 FAB items |

Tipe DotedItem:

{
  icon: ReactNode;     // Icon component
  onPress: () => void;      // Callback when item is pressed
}

Theme Options

| Theme | Description | |-------|-------------| | light | Light background with dark icons | | dark | Dark background with light icons |

License

MIT