React Native Paper FAB.Group Icon stays on screen after navigating to another screen using react-native-navigator

Question

Whenever I try to swop between screens the FAB still remains visible and sometimes interferes with the functionality of components on the lower part of the screen as if a large square is rendered over the lower half of the page.

I tried using conditional rendering which is toggled everytime the user does an action that moves from the page

As a quick fix, I have opted to toggle the visibility property of the the FAB component.

Im hoping to be able to have the FAB be bound to one screen. I am not sure what would be the best practice in this case. I have found one good response to this issue on github, however, the component he used has since been deprecated and I cannot get it to work. https://snack.expo.dev/@satya164/navigation-aware-portal-for-react-navigation.

note: I have only been using react (and js/ts) for little less than a year now, and is mostly self taught, and been using it strictly with functional components rather than class based. I can understand class components, I am just not great at it.

Thank you for whoever takes the time in reading this.

Answer 1

Figured it out: wrap the parent component (where you want the FAB anchored) in a <Portal.Host> tag:

<Portal.Host>
   <FabComponent/>
</Portal.Host>

and change the color of the fab component:

<Portal>
   <FAB.Group
      backdropColor={'#FFF'}
      open={open}
      visible
      icon={open ? 'close' : 'plus'}
      actions={[
        {
          icon: 'link',
          label: 'Link account',
          onPress: () => console.log('Pressed email'),
        },
      ]}
      onStateChange={onStateChange}
   />
</Portal>