React-native-paper: FAB Group appears on all pages
Current behaviour
The FAB Group appears on all pages within a react navigation stacknavigator whose initial page contains the FAB Group.
Expected behaviour
While appreciating the ease of use that comes with this functionality, i would like that i can disable the functionality when i dont need a fab on a page within that stack navigator.
What have you tried
I tried using Portal assuming from the documentation it works like index in css. So i enclosed the entire page with the portal assuming it would render higher than the fab thereby hiding the fab.
Your Environment
| software | version
| --------------------- | -------
| ios or android | Android
| react-native | 0.55.4
| react-native-paper | ^2.0.1
| node | latest
| npm or yarn | latest
iamdarknight
All 2 comments
@iamdarknight it's disabled by default in v2 and I'm exploring how to integrate it properly with react-navigation. here is an approach you can use: https://snack.expo.io/@satya164/navigation-aware-portal-for-react-navigation
if you're using v1, you can listen to the focus events from react navigation and show/hide the FABGroup manually.
i dont want a fab on higher than the fab
not sure what you mean here
satya164
on 12 Sep 2018
@satya164 you the champ!!! You my man. Been heckling with this for since version 1.
iamdarknight
on 14 Sep 2018
Related issues
makhataibar
路
4Comments
talaikis
路
3Comments
sm2017
路
4Comments
yaronlevi
路
3Comments
tonyxiao
路
3Comments
Most helpful comment
@iamdarknight it's disabled by default in v2 and I'm exploring how to integrate it properly with react-navigation. here is an approach you can use: https://snack.expo.io/@satya164/navigation-aware-portal-for-react-navigation
if you're using v1, you can listen to the focus events from react navigation and show/hide the FABGroup manually.
not sure what you mean here