React-native-navigation: [Android] Fab Button options

Created on 6 Jul 2020  路  2Comments  路  Source: wix/react-native-navigation

Issue Description

I've found that some of the FAB button options are not working or displaying unexpected behaviour including:

  • alignVertically does not affect the vertical position.
  • size does not affect the size of the Fab button.
  • Fab defined in actions emit the root Fab id not its id.

Steps to Reproduce / Code Snippets / Screenshots

// playground/src/screens/ScrollViewScreen.tsx
fab: {
  id: 'FAB 1',
  // ...other configs
  alignVertically: 'top', 
  size: 300, 
  actions: [
    {
      id: 'FAB 2',
    }
  ]
},

navigationButtonPressed({ buttonId }) {
  // Clicking `FAB 2` button will emit `FAB 1` not `FAB 2`. 
  console.log(buttonId)
}

Environment

  • React Native Navigation version: 6.8.0
  • React Native version: 0.62.2
  • Platform(s) (iOS, Android, or both?): Android
  • Device info (Simulator/Device? OS version? Debug/Release?): All
Android acceptebug

All 2 comments

  • alignVertically was removed a while ago - lets remove it from docs as well.
  • Size is actually an enum: 'mini' | 'regular'
  • actions are deprecated :(

Fab is a very frustrating component. For a while the support library FAB was completely broken on Lollipop, that's why we've decided to use an OSS FAB component... which is no longer maintained.
We'd like to migrate to the Material Components FAB but it requires a breaking change (application style needs to extended the new Theme.MaterialComponents.* and it doesn't support actions. We'll migrate soon but for now it seems like there's no point in supporting fab actions.

@guyca Thanks heaps for the clarification! Will update the docs and types accordingly.

Was this page helpful?
0 / 5 - 0 ratings