Floating Action Button

On Android, the FloatingActionButton component renders an image inside a circular button. You use it to draw attention to the main action of your scene. In our example application, we add a FloatingActionButton for composing a new email. We use the gravity and margin props to position the button in the bottom right of the scene. Because the FloatingActionButton is 100% native, it must be a child of the CoordinatorLayout for the positioning to work. 

import {FloatingActionButton} from 'navigation-react-native';

<CoordinatorLayout>
  <FloatingActionButton
    image={require('./compose.png')}
    gravity="bottomRight"
    style={{marginRight: 16, marginBottom: 16}} />
</CoordinatorLayout>

Note

The FloatingActionButton doesn't show on iOS because the Navigation router is 100% native and there is no native floating action button on iOS

Anchoring the Floating Action Button

If you anchor the FloatingActionButton to another component then they will move in tandem. When the user opens an email in our example application, we anchor the floating compose button to the contact details Sheet. This prevents the sheet from obscuring the compose button. When the user expands the sheet to see the contact information then the compose button moves up, too. 

<CoordinatorLayout>
  <Sheet />
  <FloatingActionButton anchor="bottomSheet" />
</CoordinatorLayout>

Cradling a Floating Action Button

When a FloatingActionButton is anchored to a bottom NavigationBar, then the navigation bar changes its shape. It creates a cradle for the floating action button to nestle into. You create a bottom NavigationBar by setting the bottomBar prop to true. Any scrollable content that sits above a bottom navigation bar has to be padded to make room. Unless you make the bottom navigation bar scroll out of the way by setting its hideOnScroll prop to true. 

<CoordinatorLayout>
  <ScrollView nestedScrollEnabled={true} contentContainerStyle={{paddingBottom: 56}} />
  <NavigationBar bottomBar={true} />
  <FloatingActionButton anchor="bottomNavigationBar" />
</CoordinatorLayout>

Extending a Floating Action Button

When you assign text to a FloatingActionButton, it extends to display the text as well as the image. Extended floating action buttons can be anchored but not cradled. Also, they won't work unless you change to a MaterialComponents theme in the styles.xml, for example, Theme.MaterialComponents.Light.NoActionBar.Bridge. We add text to the action button in our example app to make clear it's for composing new emails. 

<CoordinatorLayout>
  <FloatingActionButton image={require('./compose.png')} text="Compose" />
</CoordinatorLayout>