[feat]: Floating Action Button (FAB) Component

[arnabJ]

What kind of change is this?

A new component

The problem

Summary

I'd like to request the addition of a Floating Action Button (FAB) component to PanelUI.

FABs are a common UI pattern for highlighting the primary action on a screen, and having a built-in implementation would make it easier to build apps without relying on external libraries.

Proposed Component

Component Name: FloatingActionButton (FAB)

Core Features

1. Icon Only

Support the standard circular FAB with an icon.

<FAB icon={Plus} onPress={...} />

2. Icon + Text (Extended FAB)

Support an extended variant with both an icon and a label.

<FAB
  icon={Plus}
  label="Create"
  onPress={...}
/>

3. Positioning

Allow positioning at the bottom of the screen with configurable horizontal alignment:

• Right (default)
• Center
• Left

Example:

<FAB position="right" />
<FAB position="center" />
<FAB position="left" />

Additional Features (Nice to Have)

It would also be great if the component supported features commonly found in other UI libraries, such as:

• Expandable child actions (Speed Dial / FAB Group)
• Multiple action buttons
• Open/close animations
• Backdrop/scrim when expanded
• Custom placement offsets
• Custom size (small, medium, large)
• Elevation/shadow variants
• Theme-aware styling
• Custom icons and animations

Why This Would Be Useful

Floating Action Buttons are widely used in mobile applications to expose the primary screen action (e.g. Create, Add, Compose, Scan). Since PanelUI is a component library, having a built-in FAB component would provide a consistent API and reduce the need for third-party implementations.

A flexible implementation with support for both simple and expandable FABs would cover most common use cases while fitting naturally into the existing PanelUI component ecosystem.

What you have in mind

<>
      {/* Your screen content */}

      {/* Standard FAB */}
      <FAB
        icon={Plus}
        onPress={() => console.log("Create")}
      />

      {/* Extended FAB */}
      <FAB
        icon={Pencil}
        label="Compose"
        position="left"
        onPress={() => console.log("Compose")}
      />

      {/* Speed Dial / Multiple Actions */}
      <FAB
        icon={Plus}
        position="right"
        actions={[
          {
            icon: Camera,
            label: "Camera",
            onPress: () => console.log("Camera"),
          },
          {
            icon: Pencil,
            label: "Note",
            onPress: () => console.log("Note"),
          },
          {
            icon: Trash2,
            label: "Delete",
            destructive: true,
            onPress: () => console.log("Delete"),
          },
        ]}
      />
</>

What you are doing instead today

I have used View with absolute positioning and Button to create a FAB like hovering Button.

My current implementation:

<View className="absolute bottom-6 right-0">
    <Button className="rounded-full shadow-lg flex-row items-center px-4 py-3" onPress={() => console.log('Add Rule clicked')}>
        <PlusIcon size={20} className="text-primary-foreground" />
        <Typography type='small' className="text-primary-foreground">Add Rule</Typography>
    </Button>
</View>

References

Reference Components:

• https://oss.callstack.com/react-native-paper/docs/components/FAB/AnimatedFAB

Before submitting

• I searched the existing issues and discussions and this is not a duplicate.
• I checked the documentation and no existing component covers this.

Would you be willing to work on this?

I could help test it

[Khalidabdi1]

Built — shipped in 0.49.0 as Fab.

<Fab placement="bottom-right" icon={} accessibilityLabel="New note" onPress={compose} />

Everything on your list: icon-only and extended, sm/md/lg, three placements with offset, primary/secondary/surface/destructive on theme tokens, and haptics. The speed dial is Fab.Group with Fab.Action children labelled, staggered open, destructive for the one that removes something, and a scrim (blur optional) that both says the dial is modal and catches the tap that closes it.

One deliberate difference from your sketch: actions are children rather than an array prop, so an action is an ordinary component you can wrap or conditionally render instead of an object shape we'd have to grow a field on each time.

The docs lead with when not to use it including padding your list's bottom, which is the failure people actually hit.

Thanks for the detail, and for offering to test the speed dial would benefit from a second pair of eyes on a device.

[arnabJ]

I tested the basic Fab and it worked as expected.
I will also test the grouping and let you know later today.

[arnabJ]

@Khalidabdi1 I tested the Fab.Group

I am not sure if I did it wrong or what but it hovers across all screens.

I navigated to another screen but the Fab Group Stayed visible and in open state too. Fab Group should just be visible on the screen it's in and not in child screens after navigation.

<Fab.Group icon={<PlusIcon size={20} />}>
  <Fab
        extended
        size='sm'
        icon={<PlusIcon size={20} />}
        onPress={() => router.push('/add-user')}>
        Add Rule
      </Fab>
      <Fab
        extended
        size='sm'
        icon={<PlusIcon size={20} />}
        onPress={() => router.push('/add-user')}>
        Add Domain
      </Fab>
      <Fab
        extended
        size='sm'
        icon={<PlusIcon size={20} />}
        onPress={() => router.push('/add-user')}>
        Add User
  </Fab>
</Fab.Group>

[arnabJ]

@Khalidabdi1 Did you see my above comment about the Fab.Group being visible on all screens?

[Khalidabdi1]

Reproduced, and sorry for the delay.

• Fab.Group rendered through a portal, and the portal was the bug. Portalled content mounts at the app root above the router and is only removed when the declaring component unmounts and a stack keeps the screen you pushed from mounted. So the group kept drawing over every screen after it, closed as well as open, because the trigger went through the portal too. It was the only overlay here that portalled unconditionally.

-It doesn't portal at all now. The scrim and the dial are two absolutely positioned siblings in the group's own parent, so the ordering still works and the dial belongs to its screen. Write a Fab.Group in the screen's root container that's what offset measures from and what the scrim covers.

Two things from your snippet, both reasonable code:

• You used a plain Fab as a child rather than Fab.Action. Only Fab.Action closed the dial before its onPress, so your router.push ran with the dial still open the "and in open state too" part. Now anything in an action slot closes it.

• Android back closes an open dial instead of popping the screen.

[arnabJ]

I am glad it wasn't just my fault. Thanks for catching the missing Fab.Action.

I will test out the changes today. I have found another problem but I need to confirm if it's just my emulator or actually a bug. I will create another issue if it's not just my emulator having it. It's in the Input component.

---

It works as expected now.