Custom floating bottom right button

I have a floating bottom right button in my app (similar to twitter/x's blue compose button). I have no tab bar. When moving to the duo, this floating button now appears to the left of an empty tabbar/toolbar area on the right of the device. Ideally I want it to be inside the new tabbar/toolbar area when on the duo, as otherwise its wasted space.

Is there anything new/inbuilt that I can leverage to manage this? Can I put my button into some container somewhere so that its the bottom right of the screen on an iPhone and automatically move to the toolbar area on duo?

Something like a single item, right aligned, tabbar would be a great option. But the new liquid glass tabbar comes with too many restrictions on colors/styling

I'm trying to find a way to avoid having logic like this in the app, as device specific logic becomes a maintenance issue int he future:

if device == duo {
    // create toolbar button
} else {
    // create button button and appen
}

d to window

Answered by Technology Evangelist in 906682022

Hi @simonmcl,

This can be achieved with a toolbar item with a .borderedProminent buttonStyle in a bottom toolbar.

This would also work on all other iPhone devices, not just iPhone Duo.

Hi @simonmcl,

This can be achieved with a toolbar item with a .borderedProminent buttonStyle in a bottom toolbar.

This would also work on all other iPhone devices, not just iPhone Duo.

Custom floating bottom right button
 
 
Q