This fixes the appearance of the floating action buttons on the Home screen, and FindWaypointsButton in particular. Every FAB must be wrapped in <Provider><Portal> so that it appears on top of the base component (the Map). Also note that it's important to have the FAB.group component (i.e. FindWaypointsButton) in
a separate <Provider><Portal> tree than the layers and locator FABs. This is
required so that when FindWaypointsButton is clicked, the options that then
show up appear above the layers and locator FABs, and not beneath them.
I first figured this out in this snack, and then ported it to work with the native map. One of the issues was that I had MapboxGl.Mapview in an extra view component that made it share the bottom part of the screen.
This fixes the appearance of the floating action buttons on the Home screen, and
FindWaypointsButton
in particular. Every FAB must be wrapped in<Provider><Portal>
so that it appears on top of the base component (theMap
). Also note that it's important to have theFAB.group
component (i.e.FindWaypointsButton
) in a separate<Provider><Portal>
tree than the layers and locator FABs. This is required so that whenFindWaypointsButton
is clicked, the options that then show up appear above the layers and locator FABs, and not beneath them.I first figured this out in this snack, and then ported it to work with the native map. One of the issues was that I had
MapboxGl.Mapview
in an extra view component that made it share the bottom part of the screen.